jsonp 演示实例 —

序

同源策略是浏览器处于安全考虑，为通信设置了“相同的域、相同的端口、相同的协议”这一限制。这让我们的ajax请求存在跨域无权限访问的问题。
同时我们发现script标签引入脚本的行为并不受同源策略的限制，但是script引入的文件会被立即执行，如果其内容不符合js语法，则会报错；

操作原理

针对以上情况，诞生了jsonp：

利用script标签的src属性来请求接口，并向接口传递一个回调函数（克服了同源问题）
接口将数据以回调函数参数的形式同回调函数一同传回;此时传回则是这样形式的一个字符串：回调函数名(数据)，这样就符合js语法了（克服了script标签引入内容非js报错的问题）

实例操作

纸上得来总觉浅，绝知此事要躬行。jsonp的原理我早就倒背入流了，但是看着觉得明白，但总觉得少了点什么没抓住。所以，实际操刀试试吧。点击下载源码

下载代码后，进入some-code/jsonp-demo文件夹,该文件夹的目录为：

app.js

package.json

views

命令行进入当前目录，安装包依赖：
```
npm install
```
安装完毕后，运行程序：
```
node app.js
```
如果看到命令行输出“app is listening”则表示运行成功
修改host

因为需要模拟跨域，所以在host文件中创建俩个不同的域名，在host文件中添加以下内容：
```
127.0.0.1  www.a.com www.b.com
```
自此结束，在浏览器中输入http://www.a.com:3000/，如果访问成功则表示大功告成，页面中应该出现俩个按钮。

这个时候，我们打开浏览器的控制台，分别点击页面中的俩个按钮，就可以看到测试结果啦。

代码分析

入口文件：app.js

设定模版引擎

app.set('views', path.join(__dirname, 'views'));
var swig = new swig.Swig();
app.engine('html', swig.renderFile);
app.set('view engine', 'html');

设置路由和接口

访问www.a.com时，渲染view/index.html页面

app.get("/",function(req,res){
	res.render('index', {});
})

请求www.b.com/index.json时，返回数据,这里服务器收到jsonp的回调函数名，并把它与数据拼接在一起返回给客户端

//模拟数据
var data = {"brand":23}
app.get("/index.json",function(req,res){
//解析请求路径
var param = urlLib.parse(req.url,true);
var returnValue = param.query.callback+ '(' + 			JSON.stringify(data) +')';
	res.send(returnValue)
})

启动服务

app.listen(3000,function(){
  console.log("app is listening")
})

页面：view/index.html

页面中有俩个按钮：jsonp_button 和 ajax_button,点击以后分别进行jsonp请求和ajax请求。

绑定点击事件

jsonp_button.onclick = function(){
    var url = "http://www.b.com:3000/index.json?callback=jsonp";
    //向页面中添加script标签，进行jsonp请求
    creatScript(url)
}
ajax_button.onclick = function(){
//ajax请求
    var xhr = getXhr();
    xhr.open("get","http://www.b.com:3000/index.json");
    xhr.send();
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
          console.log(xhr.responseText);
      } else {
          console.log("Request was unsuccessful: " + xhr.status);
    }
}
function getXhr(){
    var xhr;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest()
    }else{
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xhr;
}


- 动态创建script标签
	```
	function creatScript(url){
        var scriptTag = document.createElement('script');
        scriptTag.setAttribute('src', url);
        document.getElementsByTagName('head')[0].appendChild(scriptTag);
    }
    ```
- jsonp回调函数
	```
	function jsonp(data) {
		  //获取数据
        console.log(data);
    }
	```

由上面可以得出：jsonp中所有请求数据的后续操作应写在jsonp的回调函数中，它类似于ajax 的 success操作。

最后一句话概括jsonp：jsonp就是原本应该发送json数据给客户端的服务器，不再发送json，改为发送一段调用回调函数的js代码，而原本应该返回的数据则是该函数的参数。