JSONP

JSONP是什么

跨域资源共享(Resources Domain Resources Sharing)，客户端从不同的域名发送JSON响应时绕过浏览器限制

JSONP原理解析

利用 script标签 的 src属性 进行跨域请求，服务器响应函数调用传参。

2.1 静态方法创建

代码：

<?php
 //echo "a = 1";
?>
//html代码
<script type="text/javascript" src="http://ly.yungou.ws/test/index"></script>
<script type="text/javascript">
    console.log(a);   // 1
</script>

跨域请求成功！

2.2、 动态方法创建

动态创建 script标签的方式，添加到头部，来获取变量参数

<?php
    echo "var a = 1;";
 ?>

//通过 script语句动态创建 script标签进行请求
<script type="text/javascript">
   var script = document.createElement('script');
   script.src = 'http://ly.yungou.ws/test/index';
   var head = document.getElementsByTagName('head')[0];
   head.appendChild(script);
   console.log( a );
</script>

注意：原来动态创建 script 的方式发送请求 是异步的，虽然请求成功了，但是在使用变量时，请求还没有完成，相当于还没有定义变量，然后就报错了。
解决办法：使用callback

<?php
    echo 'callback(123)';
 ?>

<script type="text/javascript">
    var script = document.createElement('script');
    script.src = 'http://ly.yungou.ws/test/index';
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(script);

    function callback(data){
        console.log( data );    //callback(123) 对 callback 调用 输出 123
    }
</script>

那我们就可以用这种动态的方式 很轻松的 拿到后台数据了，只不过前台声明的和 后台 调用的 函数名 需要一样才行，如上面的 然而这样也不太好，每次改动，那都要前后台对接一下。

所以我们可以把回调函数名放在参数中传输。案例如下：

<?php
$callback = $_GET[ 'callback' ];    // get 通过 callback键 得到 函数名
$userInfo = array( 'username' => 'leiyuan', 'password' => '123456' );// 生成数据
$data = json_encode($userInfo);
echo "{$callback}({$data});";// hello( json_encode($arr) )

通过 script语句动态创建 script标签进行请求

    var script = document.createElement('script');
    script.src = 'http://ly.yungou.ws/test/callback?callback=hello';
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(script);
     function hello(data){
        console.log(data);// Object {username: "leiyuan", password: "123456"}        
    }
  </script>

2.3 jsonp原理：

JSONP是一个协议（并且是非正式传输协议）。 该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了.
由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求，

2.4 jsonp原理

首先在客户端注册一个callback, 然后把callback的名字传给服务器。
服务器先生成 json 数据。 然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp. 最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）

JSONP和JSON的区别：
目前为止最被推崇或者说首选的方案还是用JSON来传数据，靠JSONP来跨域。
　　JSON(JavaScript Object Notation)和JSONP(JSON with Padding)
JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。一个是描述信息的格式，一个是信息传递双方约定的方法。
　　1、ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery等框架都把jsonp作为ajax的一种形式进行了封装；
　　2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加
```

JSONP使用注意事项
1、跨系统跨域名，获取基本信息，
ps：后端不能存在任何页面跳转登陆信息，否则会请求失败
2、jsonp的缺陷：不提供错误处理（对方拒绝请求，网络不通，请求地址或者参数不正确等等）如果动态插入的代码正常运行，你可以得到返回，但是如果失败了，那么什么都不会发生。
3、动态请求，都是异步请求。不支持同步请求，async无效。
请求不是通过XHR完成的，而是动态创建script标记，并请求url。跨域请求和dataType: "jsonp" 本身不支持同步操作。
4、若要在fun中使用jsonp请求后的参数，需要注意的是执行顺序，fun需要写在callback中才能成功调用参数。
5、如果没有定义jsonp和jsonpCallback，jsonp默认为"callback",jsonpCallback会是Jquery自动生成的函数名。
6、请求返回的是script tag，首先会调用jsonpCallback函数，不管是否找到该函数，都会调用success函数

参考资料

http://api.jquery.com/jQuery.ajax/

发表评论