jQuery源码学习13——Ajax

Ajax部分的核心是ajax静态方法

jQuery初始化的时候提供了ajaxStart,ajaxStop,ajaxComplete,ajaxError,ajaxSuccess一系列实例化方法

在ajax内部会依次触发这些方法

if ( ! jQuery.active++ )
　　jQuery.event.trigger( "ajaxStart" );

关于ajaxStart方法，当页面中只发送一个请求时，请求一开始时，进入ajax方法判断jQuery.active的值

此时jQuery.active的值是0，jQuery.active++的值也是0，再取反，满足条件，触发ajaxStart方法

onreadystatechange里面不管是响应成功或者超时都会再次判断jQuery.active的值

if ( ! --jQuery.active )
　　jQuery.event.trigger( "ajaxStop" );

--jQuery.active的值就成了0，触发ajaxStop事件

以上是只发送一个请求的情况

如果一次性发送了很多请求的话

$.ajaxTimeout(30000);//设置超时时间为30s
$.ajax({
"type":"get",
"data":{
"aaa":111,
"bbb":222
},
"url":"firstRequest.php"
});
$.ajax({
"type":"get",
"data":{
"aaa":111,
"bbb":222
},
"url":"secondRequest.php"
});
$.ajax({
"type":"get",
"data":{
"aaa":111,
"bbb":222
},
"url":"thirdRequest.php"
});

第一个请求调用ajax的时候jQuery.active的值是0，jQuery.active++表达式仍然是0，取反为真，触发ajaxStart

接下来第二个请求马上又会调用ajax，按照一般的网络情况来说，这时第一个请求一定没有响应，按照js执行代码的速度来说，也一定没有超过超时时间30s

这样一来就没有机会修改jQuery.active的值，此时jQuery.active的值是1，jQuery.active++仍然是1，取反为假，不会触发ajaxStart

同理，第三个也不一定触发ajaxStart，所以jQuery.active的值为2，jQuery.active++仍然是2，取反为假，不会触发ajaxStart

综合以上结果，可以得出结论：当一次性发送多个请求的时候只有第一个请求开始发送时触发ajaxStart事件

不论哪个请求回来，以何种方式(成功或失败)回来都会触发ajaxComplete事件

当所有的请求都回来的时候触发ajaxStop事件

ajaxSuccess和ajaxError的触发时机自然不必多说

此外，之所以给onreadystatechange绑定了一个有名字的函数

xml.onreadystatechange = onreadystatechange;

是因为其他地方还调用了onreadystatechange这个函数

什么地方调用呢？

就是我们加了超时时间的时候调用的

if(jQuery.timeout > 0)
setTimeout(function(){
// Check to see if the request is still happening
if (xml) {
// Cancel the request
xml.abort();

if ( !requestDone ) onreadystatechange( "timeout" );

// Clear from memory
xml = null;
}
}, jQuery.timeout);

当到达超时时间后会触发setTimeout里面的函数

首先判断有没有xml对象是否存在

有xml对象的话证明xml.readyState还没有到4，所以进入onreadystatechange函数之后第一个if条件都不符合

那此时的requestDone一定也是false

所以执行setTimeout里面的函数时会执行onreadystatechange( "timeout" )

ajax失败，触发参数中传入的error函数

反之触发success函数，并把xml对象传递回去

不管成功失败，都会执行complete函数

至此，v1.0.0的代码看得差不多了