JSONP(跨域请求) —— 一种非官方跨域数据交互协议

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>

 

posted @ 2016-07-08 21:29  Van小时  阅读(351)  评论(0编辑  收藏  举报