1、JSONP的作用
由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为
了实现跨域请求,可以通过script标签实现跨域请求,然后再服务器端输出JSON数据并执行回调函
数,从而解决了跨域的数据请求。
JSONP协议的一个要点:允许用户传递一个callback参数给服务器端,然后服务器端返回数据时
会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自
动处理返回函数了。
2、如何使用JSONP?
在客户端声明回调函数之后,客户端通过script标签向服务器跨域请求数据,然后服务器返回的相
应数据并动态执行回调函数
JSONP原理:
(1)首先在客户端注册一个callback,然后把callback的名字传给服务器、此时,服务器先生成
json数据
(2)然后以javascript语法的方式,放置到function中,function名字就是传递上来的参数jsonp
(3)最后将json数据直接以入参的方式,放置到function中中,这样就生成了一段js语法的文档,
返回给客户端。
eg.
<script type="text/javascript">
function jsonCallback(result){
for(var i in result){
alert(i+":"+result[i]);
}
}
var JSONP = document.createElement("script");
JSONP.type = "text/javascript";
JSONP.src = "http://crossdomain/services.php?callback=jsnopCallback";
document.getElementByTagName("head")[0].appendChild(JSONP);
</script> //或者
<script type="text/javascript" src="http://crossdomain/services.php?callback=jsnopCallback"></script>