js框架开发剖析--AJAX（跨域）

跨域请求非常的有用，他可以让你获取第三方服务的数据，如Twitter。跨域的请求比较麻烦，这是一般框架要提供的服务之一。

实现方案

jQuery通过JSONP实现了跨域，它的文档里是这样描述的：

jsonp类型在url添加一个添加一个字符串参数callback。服务器预先将json数据和回调函数名字拼接成一个规范的JSONP响应。在$.ajax()的参数中，我们也可以使用自定义的参数名代替callback。

在URL中添加callback的原因是，我们要通过插入script标签来发起远程请求，然后通过调用回调函数名称对应的方法来处理响应数据。JSONP的含义是指“JSON with Padding”，是Bob Ippolito在文章Remote JSON – JSONP中提出的。

原理

JSONP的工作原理是这样的：

1.给请求提供一个回调函数的名称
2.在文档中插入一个script标签，该标签对用户来说是不可见的
3.设置标签的src属性如：http://example.com/json?callback=jsonpCallback
4.服务器端生成要响应的数据
5.将json格式的数据用回调函数包装起来，如jsonpCallback({ ... })
6.script标签加载完成后，自动调用回调函数处理数据
7.最后删除callback函数和script标签

但是要注意一点，JSONP技术需要服务器端的配合。

接口设计

我们把jsonp的功能放到turing.net下，使用代码类似于：

turing.net.jsonp('http://feeds.delicious.com/v1/json/alex_young/javascript?callback={callback}', {
success: function(json) {
console.log(json);
}
});

{callback}要换成你自己对应的方法名称。

实现

创建一个callback方法最好的办法就是创建一个方法然后做为window对象的一个属性：

methodName = '__turing_jsonp_' + parseInt(new Date().getTime());
window[methodName] = function() { /* callback */ };

script标签的创建和销毁代码如下：

scriptTag = document.createElement('script');
scriptTag.id = methodName;

// Replacing the request URL with our internal callback wrapper
scriptTag.src = url.replace('{callback}', methodName);
document.body.appendChild(scriptTag);

// The callback should delete the script tag after the client's callback has completed
document.body.removeChild(scriptTag)

你要查看完整的代码参考turing.net.js，在里面搜索JSONPCallback

结论

JSONP需要服务器端的支持，大多数的第三方服务都支持JSONP。JSONP的技术使得跨域的功能非常普遍，因此，我们在博客和网站上才能实现纯Javascript的Twitter支持。