现在的位置: 首页 > 综合 > 正文

js框架开发剖析–AJAX(跨域)

2018年10月20日 ⁄ 综合 ⁄ 共 1420字 ⁄ 字号 评论关闭

跨域请求非常的有用,他可以让你获取第三方服务的数据,如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支持。

抱歉!评论已关闭.