jquery 中jsonp的实现原理

　　在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，即一般的 ajax 是不能进行跨域请求的。但 img 、 iframe 、 script 等标签是个例外，这些标签可以通过 src 属性请求到其他服务器上的数据。利用 script 标签的开放策略，我们可以实现跨域请求数据，当然这需要服务器端的配合。 Jquery 中 ajax 的核心是通过 XmlHttpRequest 获取非本页内容，而 jsonp 的核心则是动态添加 <script> 标签来调用服务器提供的 js 脚本。

　　当我们正常地请求一个 JSON 数据的时候，服务端返回的是一串 JSON 类型的数据，而我们使用 JSONP 模式来请求数据的时候服务端返回的是一段可执行的 JavaScript 代码。因为 jsonp 跨域的原理就是用的动态加载 script 的 src ，所以我们只能把参数通过 url 的方式传递 , 所以 jsonp 的 type 类型只能是 get ！

示例：

$.ajax({

    url: 'http://192.168.1.114/yii/demos/test.php', // 不同的域

    type: 'GET', // jsonp 模式只有 GET 是合法的

    data: {

        'action': 'aaron'

    },

    dataType: 'jsonp', // 数据类型

    jsonp: 'backfunc', // 指定回调函数名，与服务器端接收的一致，并回传回来

})

其实 jquery 内部会转化成

http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron

然后动态加载

<script type="text/javascript"src="http://192.168.1.114/yii/demos/test.php?backfunc= jQuery2030038573939353227615_1402643146875&action=aaron"></script>

然后后端就会执行 backfunc( 传递参数 ) ，把数据通过实参的形式发送出去。

　　使用 JSONP 模式来请求数据的整个流程：客户端发送一个请求，规定一个可执行的函数名（这里就是 jQuery 做了封装的处理，自动帮你生成回调函数并把数据取出来供 success 属性方法来调用 , 而不是传递的一个回调句柄），服务器端接受了这个 backfunc 函数名，然后把数据通过实参的形式发送出去

 

（在 jquery 源码中， jsonp 的实现方式是动态添加 <script> 标签来调用服务器提供的 js 脚本。 jquery 会在 window 对象中加载一个全局的函数，当 <script> 代码插入时函数执行，执行完毕后就 <script> 会被移除。同时 jquery 还对非跨域的请求进行了优化，如果这个请求是在同一个域名下那么他就会像正常的 Ajax 请求一样工作。）