Welcome

首页 / 脚本样式 / jQuery / jQuery ajax:将类AJAX方法包装起来

jQuery ajax:将类AJAX方法包装起来2013-10-18 cnblogs Justany_WhiteSnow上一篇文章,将jQuery.ajax中的一些细节补充完。这篇文章讲解如果将类AJAX方法都包装进jQuery.ajax中。下篇文章则讲解各预过滤器和分发器的细节。

为什么要包装起来?

我们知道,古老的XMLHttpRequest出于同源策略考虑,是不支持跨域的。所以,在前端想动态加载跨域Javascript脚本,通常是使用被称为Script DOM Element的方案,如:

var scriptElem = document.createElement("script");

scriptElem.src = "http://anydomain.com/A.js";

document.getElementsByTagName("head")[0].appendChild(scriptElem);

同理,JSON也无法通过XMLHttpRequest进行跨域,所以利用Script DOM Element,将JSON填入一个回调函数中来实现其跨域,也就是JSONP(JSON with padding, 填充式JSON或参数式JSON)。

实际上JSONP就是将,得到JSON后回调的函数通过GET传参告诉服务器,然后服务器拼接一段脚本,用该回调函数并参数为需要的JSON数据,如:

callback({ "name": "Justany_WhiteSnow" });

jQuery团队当然希望开发者开发的时候,不需要想需不需要跨域,只要直接使用就行了。

所以他们把XMLHttpRequest、Script DOM Element、JSONP包装起来,都当成AJAX来使用。

这里顺便提一下,其实现代浏览器(Firefox 3.5+、Safari 4+、Chrome等)中,通过XMLHttpRequeest实现了CORS(Cross-Origin Resource Sharing, 跨源资源共享)原生支持。也就是XMLHttpRequest在某些浏览器中,实际上是可以跨域的,只需要设置一下HTTP Response Header中的Access-Control-Allow-Origin。比如设置成通配符*。

而IE8也引入XDomainRequest也实现了CORS。

但毕竟某些浏览器不行,所以,咳咳……这不能成为一种通用方案。

怎么包装起来?

首先我们有一个山寨XHR对象,也就是jqXHR对象。通过对其添加send、abort来模拟XHR对象。

可是我们需要在不同方案执行前先处理一下特异性的东东,所以我们需要一个预过滤机制(Prefilter)来预先处理一下。

然后我们需要知道到底应当用那一套方案来执行整个过程,所以我们需要一个分发机制(Transport)来得到最后的jqXHR对象。

inspectPrefiltersOrTransports

我们在jQuery.ajax找到了预过滤和分发机制的函数,inspectPrefiltersOrTransports。

// 预过滤inspectPrefiltersOrTransports( prefilters, s, options, jqXHR );//……// 得到transporttransport = inspectPrefiltersOrTransports( transports, s, options, jqXHR );