浏览器与服务器通讯技术——jsonp

除了使用cros实现跨域资源访问以外，另外一种实现跨域资源访问的技术是借助DOM中可以执行跨域请求的功能，在不依赖XHR对象的状况下发送某种请求。好比借助<img>，<script>标签的src属性。其中最流行的是JSONP技术。

1、跨域加载脚本

先看下面一段代码:

1 function handleResponse(response){
2     alert("name:"+response.name+","+"age:"+response.age);
3 }
4 
5 jsonData={
6     name:"xiaoming",
7     age:20
8 }
9 handleResponse(jsonData);

上例中，handleResponse方法显然是能够访问jsonData中的数据的。若是咱们把上例中5-9行的脚本放在另外一台服务器上，命名为json.js，经过script的src属性加载这段脚本。最终的效果和上例是等效的，以下例：

1 function handleResponse(response){
2     alert("name:"+response.name+","+"age:"+response.age);
3 }
4 //跨域加载json.js脚本    
5 var script=document.createElement("script");
6 script.src="http://www.somewhere.com/json.js";
7 document.body.insertBefore(script,document.body.firstChild);

放在其余服务器上的json.js脚本

1 jsonData={
2     name:"xiaoming",
3     age:20
4 }
5 handleResponse(jsonData);

这样就实现了跨域资源的访问；

2、什么是JSONP

经过script的src属性加载的脚本数据称为JSONP。经过分析上例中的json.js脚本，咱们能够发现JSONP有两部分组成：1.json数据，好比上例的jsonData，2.回调函数，好比上例的handleResponse。也能够把JSONP理解为包含在回调函数中的json,好比：

handleResponse({
    name:"xiaoming",
    age:20
});

3、发送回调函数名

经过上例可知客户端定义的回调函数名称和服务器端jsonp中的回调函数名称必须保持一致。为了增长灵活性，即客户端能够任意定义回调函数名，咱们须要请求服务时把回调函数名做为url上的查询字符串发送给服务器，服务器拿到函数名后，再生成jsonp发送回客户端。客户端代码和服务端代码以下：

客户端

1 function handleResponse(response){
2     alert("name:"+response.name+","+"age:"+response.age);
3 }
4 
5 var script=document.createElement("script");
6 script.src="http://www.test.com/test/test.php?jsoncallback=handleResponse";//函数名做为查询字符串发给服务器
7 document.body.insertBefore(script,document.body.firstChild);    

服务器端php代码

 1 <?php
 2 
 3 header('Content-type: application/json');
 4 //获取回调函数名
 5 $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
 6 //json数据
 7 $json_data = '{
 8     "name":"xiaoming",
 9     "age":29
10 }';
11 //输出jsonp格式的数据
12 echo $jsoncallback . "(" . $json_data . ")";
13 
14 ?>

4、jsonp的优缺点

经过jsonp能够直接跨域访问响应文本，支持浏览器和服务器之间双向通讯，而且不须要定义服务器上的响应头文件。使用jsonp的主要缺点是安全问题，因为jsonp是从其余域加载代码并执行，若是其它域不安全，极可能会在响应中夹带一些恶意代码。所以在使用不是本身维护的服务时，必定要保证它安全可靠。