在上一篇文章中介绍了CORS跨源资源共享,在本节中介绍JSONP跨源技术。
JSONP也可以用来实现跨域资源请求,并且支持所有浏览器,不过JSONP只支持GET请求。
JSONP不使用XMLHttpRequest 对象,而是用 script 标签。
<script src="demo_jsonp.php">
** 完整示例:**
html代码:
<!DOCTYPE html>
<html>
<body>
<button onclick="clickButton()">Click me!</button>
<p id="demo"></p>
<script>
function clickButton() {
var s = document.createElement("script");
s.src = "demo_jsonp.php";
document.body.appendChild(s);
}
function myFunc(myObj) {
document.getElementById("demo").innerHTML = myObj.name;
}
</script>
</body>
</html>
php代码:
<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
echo "myFunc(".$myJSON.");";
?>
返回一个以JSON数据为参数的名为myFunc函数,并执行。确保客户端中存在myFunc函数。
为了实现前后端分离,在demo_jsonp.php后面添加查询参数?callback=myFunc,现在的script的src为demo_jsonp.php?callback=myFunc,然后后端就可以根据查询参数$_GET['callback']获取回调函数名。
jquery实现jsonp请求:
$.ajax("demo.php",{
dataType:"jsonp",
jsonp:"jsonpCallback", //此字段不指定的话默认为callback,请求生成的url为demo_jsonp.php?jsonpCallback=myFunc
jsonpCallback:"myFunc", //此字段不指定的话默认会生成一个随机名称,此例中不填会弹出error
success:function(){
alert("success")
},
error:function(){
alert("error")
}
})
ps:jsonp的jquery实现可以参考http://www.cnblogs.com/aaronjs/p/3785646.html