JSONP

  1. JSONP的由来

     根据浏览器同源策略,所谓同源就是协议、主机、端口号都相同时成为同源。a 域的js不能直接访问 b域名的信
     息,但是script 标签的src属性可以跨域引用文件,jsonp是请求之后后台包装好一段json,并且把数据放在一个
     callback函数,返回一个js文件,动态引入这个文件,下载完成js之后,会去调用这个callback,通过这样访问数
     据。
    
  2. JSONP有什么用

    由于同源从略的限制,XMLHttpRequest只允许请求前源(域名、协议、端口)的资源,为了实现跨域请求,可以通
    过script标签实现跨域请求,然后再服务端输出JSON数据并执行回调函数,从而解决跨域数据请求。
    
  3. 如何使用JSONP

     (function () {
         var show = function (obj) {
             var body = document.body;
             body.innerHTML = obj.data;
         };
         var url = "https://localhost?fun=show";
         var script = document.createElement('script');
         script.setAttribute('src', url);
         document.getElementsByTagName('head')[0].appendChild(script);
     })()
    
  4. 链接'https://localhost?fun=show'的响应(JSONP)

     show(
         {
           'code':200,
           'data':'data',
           'msg':'获取数据成功'
         }
     )
    
  5. JSONP原理

     首先在客户端注册一个callback,然后把callback的名字传给服务器。此时,服务器先生成json数据,然后以javascript
     语法的方式,生成function,function名字就是传递上来I带参数jsonp。最后将json数据直接以入参的方式,将数据放置
     function中,这样就生成js语法的文档,返回给客户端。客户端浏览器,解析script变迁,并执行返回javascript文档,
     此时数据作为参数,传入了客户端预先定义好的callback函数里。简单的说,就是利用script标签没有跨域限制的方式来
     达到与第三方通讯的目的。
    
@耿志环 2012-∞ 冀ICP备17033181号, powered by Gitbook修订: 2019-07-08 16:49:59

results matching ""

    No results matching ""