您的位置：首页 > Web前端 > JavaScript

web跨域请求<一>之JSONP

2016-10-10 16:28 267 查看

跨域请求有三种实现方式，后台代理实现跨域请求，前端用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端代码：

//XHR2实现跨域非常简单，哈哈，只需要服务器端加两句话即可

header('Access-Control-ALlow-Origin:*');

header('Access-Control-ALlow-Methods:POST,GET');

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jsonp 跨域 callback web

相关文章推荐

新的分享

章节导航