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标签没有跨域限制的方式来
    达到与第三方通讯的目的。
    

results matching ""

    No results matching ""