JSONP的实现流程

浏览数：79 / 时间：2015年06月09日

　　在进行AJAX的时候会经常产生这样一个报错：

技术分享

　　看红字，这是浏览器的同源策略，使跨域进行的AJAX无效。注意，不是不发送AJAX请求（其实就是HTTP请求），而是请求了，也返回了，但浏览器‘咔擦’一声，下面没有了。对比下fiddler和浏览器抓的包的异同：
　　fiddler：

　　技术分享

　　chrome：

技术分享

　　简而言之，浏览器这边就是头（response header）给看，身体（response body）不给看。

　　什么是同源策略？为什么会有同源策略？这一点在吴翰清老师著的《白帽子讲Web安全》一书中由阐述，这里就不赘述了。下面要做的，就是使用JSONP让上面的报错消失，按正确的流程进行下去。

　　首先介绍下我这里的环境，两个Web服务器，Tomcat监听8081，Node监听3000，Tomcat这边实现一个处理AJAX的JSP文件，很简单，返回一个JSON
　　

<%@ page contentType="application/json; charset=utf-8" %>
{"status": true}

　　Tomcat的页面对这个URL发出AJAX请求，并打印出了返回值

技术分享

　　但Node的页面发出AJAX请求，则像上面那样报错了，因为AJAX有同源策略保护。怎么绕过这个保护呢？平时我们页面引入的CSS、JS可能是从其他的服务器比如静态服务器、CDN获取内容，都在不同的域，可知页面内的标签引入JS是没有同源策略一说的，而且也是进行request和处理response，于是我们把这个AJAX请求改为如下代码：

var script = document.createElement(‘script‘);
script.src = ‘http://localhost:8081/test/true.jsp‘;
document.body.insertBefore(script, document.body.lastChild);

　　但还是残忍的报错了

技术分享

　　因为返回的JSON({"status": true})成为了一个独立的js片段，而这个片段明显是不符合语法的，如果返回的是符合语法规范的处理JSON的js片段而不仅仅是JSON就好了。比如我们将服务器端的代码改成这样：

<%@ page contentType="application/javascript; charset=utf-8" %>
console.log({"status": true});

　　再在Node的页面进行AJAX

技术分享

　　目的是达到了，但问题是，这个AJAX的servlet不仅返回了数据，还返回了行为，难道我要把处理DOM的js写在这里面吗？页面重构了又跑到这里来修改？问题太美不敢想，所以请求成功的方法必须写在页面的js里面，比如这样

function callback(data) {
    console.log(data);
}
var script = document.createElement(‘script‘);
script.src = ‘http://localhost:8081/test/true.jsp‘;
document.body.insertBefore(script, document.body.lastChild);

　　而服务器返回的js片段直接调用这个function就行了，这个就叫回调函数了

<%@ page contentType="application/javascript; charset=utf-8" %>
callback({"status": true});

　　可以看到，这个方案比之前好多了，servlet和请求页面的耦合度低了很多，但没完全解决，比如callback这个回调函数的名字，如果把这个名字放在请求的parameter中，比如这样

function callback(data) {
    console.log(data);
}
var script = document.createElement(‘script‘);
script.src = ‘http://localhost:8081/test/true.jsp?cb=callback‘;
document.body.insertBefore(script, document.body.lastChild);

　　服务器对这个parameter进行处理

<%@ page contentType="application/javascript; charset=utf-8" %>
<%= request.getParameter("cb") %>({"status": true});

　　优化一下，对没有cb参数的请求仅返回JSON

<%
    String callback = request.getParameter("cb");
    if(null == callback) {
        response.setContentType("application/json; charset=utf-8");
%>
    {"status": true}
<%
    }else {
        response.setContentType("application/javascript; charset=utf-8");
%>
    <%= callback %>({"status": true})
<%
    }
%>

　　那么整个JSONP的功能就实现了。但还有一点瑕疵，代码执行完html中留下了一个script标签，强迫症能忍？处女座能忍？

　　解决方法：可以使用jQuery的方法，jQuery会清除掉留下的script标签。

$.ajax({
    url: ‘http://localhost:8081/test/true.jsp‘,
    dataType: "jsonp",
    jsonp: "cb",
    success: function (data) {
        console.log(data)
    }
});

　　也可以自己实现一个，我抛个砖，在js加载完成后删除节点。

function callback(data) {
    console.log(data);
}
var script = document.createElement(‘script‘);
script.src = ‘http://localhost:8081/test/true.jsp?cb=callback‘;
document.body.insertBefore(script, document.body.lastChild);
script.onload = function(){
    this.parentNode.removeChild(this);
};

　　JSONP的东西就到此结束了，其实做完才发现，实际上这是个很简单的概念，取了个比较唬人的名字而已。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

JSONP的实现流程