跨域请求有三种实现方式,后台代理实现跨域请求,前端用JSONP实现跨域请求,或者XHR2方式实现跨域请求。本章主要来说说JSONP实现跨域请求。
因为安全考虑,JavaScript同源策略导致跨域访问被限制。为了解决这一问题,下面就来进行详细的说明。
(1)什么是JSONP?
JSONP是JSON with Padding的略称。它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。
(2)跨域的简单实现:
HTML文件如下:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js" type="text/javascript"></script>
<style type="text/css">
*{
padding:0;
margin:10px;
font-size:30px;
color:#ccc;
}
button{
background:blue;
font-size:15px;
}
input{
border:5px solid #000;
}
#searchResult{
background:red;
width:auto;
height:auto;
}
</style>
</head>
<body>
<h1>员工查询</h1>
<label>请输入员工编号:</label>
<input type="text" id="keyword">
<button id="search">查询</button>
<p id="searchResult"></p>
<h1>员工创建</h1>
<label>请输入员工姓名:</label>
<input type="text" id="staffName">
<br>
<label>请输入员工编号:</label>
<input type="text" id="staffNumber">
<br>
<label>请选择员工性别:</label>
<select id="staffSex">
<option>男</option>
<option>女</option>
</select>
<br>
<label>请输入员工职位:</label>
<input type="text" id="staffJob">
<button id="save">保存</button>
<br>
<p id="createResult"></p>
<script>
$(document).ready(function() {
$("#search").click(function(){
$.ajax({
type:"GET",
//涉及到跨域请求
//JS 同源策略的限制,出于安全考虑
//主域名不同
//子域名不同
//端口号不同
//协议不同,以上四种都算作是跨域
//跨域解决之后台:代理
//跨域解决之前端:JSONP
//跨域解决之前端:XHR2
url: "http://127.0.0.1:8080/ajaxdemo/test.php?number="+$("#keyword").val(),
dataType:"jsonp",
jsonp:"callback",
success: function(data){
if (data.success){
$("#searchResult").html(data.msg);
}else{
$("#searchResult").html("出现错误:"+data.msg);
}
},
error:function(jsXHR){
alert("发生错误"+jsXHR.status);
},
});
});
$("#save").click(function(){
$.ajax({
type:"POST",
url: "test.php",
//dataType:"json"
dataType:"jsonp",
jsonp:"callback",
data:{
name:$("#staffName").val(),
number:$("#staffNumber").val(),
sex:$("#staffSex").val(),
job:$("#staffJob").val()
},
success: function(data){
if (data.success){
$("#createResult").html(data.msg);
}else{
$("#createResult").html("出现错误:"+data.msg);
}
},
error:function(jsXHR){
alert("发生错误"+jsXHR.status);
},
});
});
});
</script>
</body>
</html>
//PHP端代码:
function search(){
$jsonp=$_GET["callback"];
//检查是否有员工编号的参数
//isset检查变量是否设置;empty判断值是否为空
//超全局变量$_GET和$_POST用于收集表单数据
if(!isset($_GET['number'])||empty($_GET['number'])){
echo '{"success":false,"msg":"参数错误"}';
return;
}
//函数之外声明的变量拥有Global作用域,只能在函数以外访问
//global关键词用于访问函数内的全局变量
global $staff;
//获取number参数
$number=$_GET['number'];
$result=$jsonp.'({"success":false,"msg":"没有找到员工。"})';
//.号用来连接字符串
//遍历$staff多维数组,查找key值为number的员工是否存在,如果存在,则修改返回结果
foreach($staff as $value){
if($value['number'] == $number){
$result=$jsonp.'({"success":true,"msg":"找到员工:员工编号:' . $value["number"] .
',员工姓名:' . $value["name"] .
',员工性别:' . $value["sex"] .
',员工职位:' . $value["job"] . '"})';
break;
}
}
echo $result;
}
用一句话来说就是:创建一个回调函数,然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递,完成回调。
//XHR2实现跨域非常简单,哈哈,只需要服务器端加两句话即可
header('Access-Control-ALlow-Origin:*');
header('Access-Control-ALlow-Methods:POST,GET');