后端如何识别前端ajax请求（web前端ajax笔记之二）
后端如何识别前端ajax请求（web前端ajax笔记之二）是否跨域说明假如：你有网站a，当你再a站使用ajax请求网站b的地址的时候就会出现跨域数据请求的问题。那么什么时候我们算跨域呢？URL
学习大纲
主要以高级应用为主
一、Ajax跨域请求1.什么是跨域所谓跨域就是不同域名之间的数据访问，非当前域名数据请求。
跨域的问题：不可以获取数据
再ajax中的体现是：
假如：你有网站a，当你再a站使用ajax请求网站b的地址的时候就会出现跨域数据请求的问题。
那么什么时候我们算跨域呢？
|
URL |
说明 |
是否跨域 |
|
http://www.a.com/1.php http://www.a.com/2.php |
同一域名下不同文件的访问 |
否 |
|
http://www.a.com/a/1.php 同一域名下不同目录的文件访问 |
否 | |
|
http://www.a.com/1.php http://www.a.com:80/1.php |
同一域名下不同端口的文件访问 |
是 |
|
http://www.a.com/1.php https://www.a.com/1.php |
同一域名下，不同协议之间的访问 |
是 |
|
http://www.a.com/1.php http://127.0.0.1/1.php |
域名和对应域名IP |
是 |
|
http://www.a.com/1.php http://oa.a.com/1.php |
同一个主域名和从域名之间 |
是 |
|
http://www.a.com/1.php http://www.b.com/2.php |
不同域名之间 |
是 |
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
CORS目前所有浏览器都支持该功能，IE浏览器不能低于IE10
如果跨域就会出现
1.2代码允许所有域名访问再服务器端代码返回的请求头中增加
header(‘Access-Control-Allow-Origin:*’); //*代码所有域名
实现效果
只需要再PHP的响应最开始增加一个头输出
1.3允许单个域名访问使用格式
Header(‘Access-Control-Allow-Origin:指定网址’);
http://www.teach.com
header('Access-Control-Allow-Origin:http://www.teach.com');
说明：使用好处安全性高
脚下留心：必须要加上http://
1.4允许多个域名访问再PHP中获取服务器信息我们可以使用$_SERVE这个全局变量
其中有个HTTP_ORIGIN 的参数就是用来获取请求用户来源的域名地址
我们可以这样子来写代码
【PHP代码】
$url = $_SERVER['HTTP_ORIGIN'];
$origin='';
$allowUrl = array('http://www.teach.com' 'http://www.php8.com');
if(in_array($url $allowUrl)){
$origin = $url;
}
Header('Access-Control-Allow-Origin:'.$origin);
$user = array('admin' 'xiaoming' 'xiaohong' 'xiaoqiang');
//获取传递的参数
$username = $_GET['username'];
//判断用户是否存在在数组中
if(in_array($username $user)){
echo '不可用';
}else{
echo '可用';
}3.JSONP跨域解决1.1什么是JSONP
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式，而jsonP（JSON with Padding）则是JSON 的一种“使用模式”，通过这种模式可以实现数据的跨域获取（注意：仅支持GET形式）
1.2实现跨域<script>
Function callback(data){
// console.log(data);
alert(data.name);
}
</script>
<body>
<input type="button" value="点我" id="btn1">
</body>
<script type="text/javascript">
var obj = document.getElementById('btn1');
obj.onclick = function(){
var scriptObj = document.createElement('script');
scriptObj.src="http://www.php8.com/2.php";
document.body.appendChild(scriptObj);
}
</script>
<!--<script type="text/javascript" src="http://www.php8.com/2.php"></script>-->
【PHP代码】
<?php
$array = array('name'=>'xiaoming' 'age'=>18);
$json_str = json_encode($array);
echo "callback($json_str)";二、自定义AJAX框架
重复使用到的代码有那些呢？
根据属性ID获取节点对象
document.getElementById();
就是ajax 的整个发送请求的过程
1.自定义获取节点document.getElementById();
封装成函数
Function $(id){
Return document.getElementById(id);
}
2.自定义异步请求/*
* 同步请求方法
* @param string id 文档ID名称
*/
function $(id){
return document.getElementById(id);
}
/*
* 封装ajax请求
*@param string url 请求地址
*@param string postData 发送参数
*@param function fun 回调函数
*/
function ajax(url postData fun){
//创建ajax对象
var XHRObj = new XMLHttpRequest();
//创建请求头，设置请求发送的地址和类型，并且将参数传递给服务端
XHRObj.open('post' url);
//获取服务器端返回的数据
XHRObj.onreadystatechange = function(){
if(XHRObj.readyState == 4 && XHRObj.status == 200){
fun(XHRObj.responseText);
}
}
//设置数据编码格式 使用URL编码格式
XHRObj.setRequestHeader('content-type' 'application/x-www-form-urlencoded');
//发送请求
XHRObj.send(postData);
}
【调用案例】
<script type="text/javascript">
//按钮绑定事件，给input增加ID属性
// var checkObj = document.getElementById('check');
$('check').onclick = function(){
var username = $('username').value;
ajax('check.php' 'username=' username function(obj){
alert(obj);
});
}
</script>三、地区三级联动1.概述
在我们购买商品填写商品邮寄地址的时候会出现地区的选择，省、市、区。
包括我们再一些社交网站的时候，更新个人资料例如：出生地址，居住地址等
以上案例我们应该如何实现呢？
我们再学习ajax的时候已经知道了数据格式，可以使用json 可以使用xml
在实际工作项目中，一般将地理位置信息保存到数据库中从数据库中读取是最普遍的。
准备数据库db_php9
CREATE TABLE `location` (
`id` int(11) NOT NULL COMMENT '主键标识'
`name` varchar(40) NOT NULL DEFAULT '' COMMENT '城市名称'
`pid` int(11) NOT NULL DEFAULT '0' COMMENT '所属父级'
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT charset=utf8 COMMENT='地区表\n@author liumeng';
一个无限级分类表
2.显示省份数据1.1思路1.打开网页发送ajax请求获取省份数据
2.服务器端链接数据库，并且从数据库中获取省份数据
3.将数据转换成json数据返回给客户端
4.客户端处理接受到的json数据，展示出来
1.2JS代码使用封装好的js
<!--引入封装的ajax方法-->
<script type=text/javascript src="../ajax.js"></script>
<script type="text/javascript">
//获取省级别的数据
ajax('/ajax/location.php' 'pid=0' function(data){
//将省的数据遍历出来写入到select 里面去
$str = '<option value="-1">请选择</option>';
//循环遍历省份数据
for(i=0;i<data.length;i ){
$str = '<option value="' data[i].id '">' data[i].name '</option>';
}
//将便利的数据放到容器中去
$('sheng').innerHTML = $str;
});
</script>1.3PHP代码
<?php
header('content-type:text/html;charset=utf-8');
//数据库链接方式有我们使用PDO链接方式
//1.设置数据源
$dsn = 'mysql:dbname=db_php9;host=localhost';
//2.数据库链接用户名和密码
$username = 'root';
$pwd ='';
//实例化PDO类
$pdo = new PDO($dsn $username $pwd);
//设置编码格式
$pdo->query('set names utf8');
//查询省份的sql 语句
$sql = 'select * from location where pid=0';
//执行查询语句
$res = $pdo->query($sql);
//返回字段结果集 PDO::FETCH_ASSOC
$datas = $res->fetchAll(PDO::FETCH_ASSOC);
//将结果转换成json数据返回给客户端
echo json_encode($datas);
最终运行结果
3.显示城市数据1.1思路1.给省份绑定change 事件
2.ajax传递参数id
3.服务器端根据前端传递过来的id获取省份的下级城市数据
4.将服务器端返回的城市的数据展示到前段
1.2JS代码
<script type="text/javascript">
//获取省级别的数据
ajax('/ajax/location.php' 'pid=0' function(data){
//将省的数据遍历出来写入到select 里面去
$str = '<option value="-1">请选择</option>';
//循环遍历省份数据
for(i=0;i<data.length;i ){
$str = '<option value="' data[i].id '">' data[i].name '</option>';
}
//将便利的数据放到容器中去
$('sheng').innerHTML = $str;
});
//省份绑定change事件
$('sheng').onchange = function(){
//获取当前选中的省份的ID
id = this.value;
ajax('/ajax/location.php' 'pid=' id function(data){
//将省的数据遍历出来写入到select 里面去
$str = '<option value="-1">请选择</option>';
//循环遍历省份数据
for(i=0;i<data.length;i ){
$str = '<option value="' data[i].id '">' data[i].name '</option>';
}
//将便利的数据放到容器中去
$('shi').innerHTML = $str;
});
}
</script>
1.3PHP代码4.显示地区数据1.1思路1.给省份绑定change 事件
2.ajax传递参数id
3.服务器端根据前端传递过来的id获取省份的下级城市数据
4.将服务器端返回的城市的数据展示到前段
1.2JS代码<script type="text/javascript">
//获取省级别的数据
ajax('/ajax/location.php' 'pid=0' function(data){
//将省的数据遍历出来写入到select 里面去
$str = '<option value="-1">请选择</option>';
//循环遍历省份数据
for(i=0;i<data.length;i ){
$str = '<option value="' data[i].id '">' data[i].name '</option>';
}
//将便利的数据放到容器中去
$('sheng').innerHTML = $str;
});
//省份绑定change事件
$('sheng').onchange = function(){
//获取当前选中的省份的ID
id = this.value;
ajax('/ajax/location.php' 'pid=' id function(data){
//将省的数据遍历出来写入到select 里面去
$str = '<option value="-1">请选择</option>';
//循环遍历省份数据
for(i=0;i<data.length;i ){
$str = '<option value="' data[i].id '">' data[i].name '</option>';
}
//将便利的数据放到容器中去
$('shi').innerHTML = $str;
//选择省的时候要清空区的数据
$('qu').innerHTML = '<option value="-1">请选择</option>';
});
}
//市级绑定change事件
$('shi').onchange = function(){
//获取当前选中的省份的ID
id = this.value;
ajax('/ajax/location.php' 'pid=' id function(data){
//将省的数据遍历出来写入到select 里面去
$str = '<option value="-1">请选择</option>';
//循环遍历省份数据
for(i=0;i<data.length;i ){
$str = '<option value="' data[i].id '">' data[i].name '</option>';
}
//将便利的数据放到容器中去
$('qu').innerHTML = $str;
});
}
</script>1.3PHP代码
因为我们用的是无级分类不需要考虑了。
四、分页1.需求AJAX的分页思想就是：将跳转链接的href方法换成，使用js动态方法，异步获取数据
2.完成面向过程分页<?php
//1.设置数据源
$dsn = 'mysql:dbname=db_php9;host=localhost';
//2.数据库链接用户名和密码
$username = 'root';
$pwd ='';
//实例化PDO类
$pdo = new PDO($dsn $username $pwd);
//设置编码格式
$pdo->query('set names utf8');
//获取传过来的页数
$pageno = isset($_GET['page'])?intval($_GET['page']):1;
//初始化每页显示个数
$pageSize = 4;
//定位起始位置
$page = $pageSize*($pageno-1) ;
//分页sql语句
$sql = "select * from page limit $page $pageSize";
//执行sql语句
$res = $pdo->query($sql);
//分页页码展示
//下一页为了不超出页码我们要使用总页数/每页显示个数 = 一共有多少页
$sql2 = "select count(*) from page";
$res2 = $pdo->query($sql2);
$countData = $res2->fetch();
$counts = $countData['count(*)'];
//四舍五入取整数
$totalPage = ceil($counts/$pageSize);
//上一页
$prev = $pageno>1 ? $pageno -1 : $pageno;
$next = $totalPage>$pageno ? $pageno 1:$totalPage;
//获取数据
$datas = $res->fetchAll(PDO::FETCH_ASSOC);
//设置页码
$str = '<table border="1">
<tr>
<td>新闻标题</td>
<td>新闻内容</td>
</tr>';
foreach ($datas as $val){
$str.='<tr>
<td>'.$val['title'].'</td>
<td>'.$val['content'].'</td>
</tr>';
}
$str.='<tr>
<td colspan="2">
<span>总页数10</span>
<span><a href="?page='.$prev.'">上一页</a></span>
<span><a href="?page='.$next.'">下一页</a></span>
</td>';
$str.='</tr></table>';
echo $str;3.异步获取第一页数据
1.HTML代码
<script type="text/javascript" src="../ajax.js"></script>
<body>
<h1>AJAX-无刷新分页</h1>
<table id='content' border="1">
</table>
</body>
<script type="text/javascript">
ajax('page_ajax.php' 'page=1' function(data){
$('content').innerHTML = data.html;
});
</script>
2.PHP代码
将不是ajax的分页转换即可
4.完成分页功能本质就是替换href标签使用javascript
<?php
//1.设置数据源
$dsn = 'mysql:dbname=db_php9;host=localhost';
//2.数据库链接用户名和密码
$username = 'root';
$pwd ='';
//实例化PDO类
$pdo = new PDO($dsn $username $pwd);
//设置编码格式
$pdo->query('set names utf8');
//获取传过来的页数
$pageno = isset($_POST['page'])?intval($_POST['page']):1;
//初始化每页显示个数
$pageSize = 4;
//定位起始位置
$page = $pageSize*($pageno-1) ;
//分页sql语句
$sql = "select * from page limit $page $pageSize";
//执行sql语句
$res = $pdo->query($sql);
//分页页码展示
//下一页为了不超出页码我们要使用总页数/每页显示个数 = 一共有多少页
$sql2 = "select count(*) from page";
$res2 = $pdo->query($sql2);
$countData = $res2->fetch();
$counts = $countData['count(*)'];
//四舍五入取整数
$totalPage = ceil($counts/$pageSize);
//上一页
$prev = $pageno>1 ? $pageno -1 : $pageno;
$next = $totalPage>$pageno ? $pageno 1:$totalPage;
//获取数据
$datas = $res->fetchAll(PDO::FETCH_ASSOC);
//设置页码
$str = '
<tr>
<td>新闻标题</td>
<td>新闻内容</td>
</tr>';
foreach ($datas as $val){
$str.='<tr>
<td>'.$val['title'].'</td>
<td>'.$val['content'].'</td>
</tr>';
}
$str.='<tr>
<td colspan="2">
<span>总页数10</span>
<span><a href="javascript:goPage('.$prev.');">上一页</a></span>
<span><a href="javascript:goPage('.$next.');">下一页</a></span>
</td>';
$str.='</tr>';
echo json_encode(array('html'=>$str));
<script type="text/javascript" src="../ajax.js"></script>
<body>
<h1>AJAX-无刷新分页</h1>
<table id='content' border="1">
</table>
</body>
<script type="text/javascript">
ajax('page_ajax.php' 'page=1' function(data){
$('content').innerHTML = data.html;
});
//获取数据函数
function goPage(page){
ajax('page_ajax.php' 'page=' page function(data){
$('content').innerHTML = data.html;
});
}
</script>五、无刷新表单信息提交1.收集表单信息
再前面我们学习ajax进行post传值，我们需要获取所有的值然后组合成字符串，发送数据请求。
1.1HTML代码<script type="text/javascript">
//ajax 提交所有数据
//增加点击事件
document.getElementById('btn1').onclick = function(){
//获取所有元素
var XHR = new XMLHttpRequest();
XHR.onreadystatechange = function(){
if(XHR.readyState == 4 && XHR.status == 200){
console.log(XHR.responseText);
}
}
XHR.open('post' 'form.php');
//使用formData
var formdata = new FormData(document.getElementById('reg_form'));
//设置请求头 不需要设置请求头部
// XHR.setRequestHeader('Content-Type' 'application/x-www-form-urlencoded');
XHR.send(formdata);
}
</script>1.2PHP代码
<?php
var_dump($_POST);exit;
脚下留心：
1.FormData 是HTML5 的新技术，再主流的浏览器都可以正常使用
2.不需要设置请求头
3.表单Input 必须要有name属性，不然不会提交
2.无刷新上传附件【FromData】1.1HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>AJAX-表单提交</title>
</head>
<body>
<form action="" id="reg_form" method="post">
<table border="1">
<tr>
<td align='center' colspan="2">注册</td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" name="username" id=""></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" name="pwd" id=""></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="text" name="pwd2" id=""></td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text" name="phone" id=""></td>
</tr>
<tr>
<td>邮件</td>
<td><input type="text" name="email" id=""></td>
</tr>
<tr>
<td>头像</td>
<td><input type="file" name="img"></td>
</tr>
<tr>
<td align="center" id="btn1" colspan="2"><input type="button" value="提交"></td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
//ajax 提交所有数据
//增加点击事件
document.getElementById('btn1').onclick = function(){
//获取所有元素
var XHR = new XMLHttpRequest();
XHR.onreadystatechange = function(){
if(XHR.readyState == 4 && XHR.status == 200){
console.log(XHR.responseText);
}
}
XHR.open('post' 'form.php');
//使用formData
var formdata = new FormData(document.getElementById('reg_form'));
//设置请求头 不需要设置请求头部
// XHR.setRequestHeader('Content-Type' 'application/x-www-form-urlencoded');
XHR.send(formdata);
}
</script>
</html>1.2PHP代码
<?php
//var_dump($_POST);exit;
//附件上传
var_dump($_FILES);
/*
打印出来的结果说明已经给我们传递过来了
array (size=1)
'img' =>
array (size=5)
'name' => string 'timg.jpg' (length=8)
'type' => string 'image/jpeg' (length=10)
'tmp_name' => string 'C:\wamp64\tmp\php4332.tmp' (length=25)
'error' => int 0
'size' => int 33024
*/
if($_FILES['img']['name']){
//上传文件
//使用php move_uploaded_file('临时文件位置' '新的文件的位置');
$old_file = $_FILES['img']['tmp_name'];
$new_file = 'php9_img/'.time().'.jpg';
$res = move_uploaded_file($old_file $new_file);
var_dump($res);exit;
}
总结：
使用FromData 可以收集文件上传的数据
