ajax和它的超时
日常开发中一般都会使得ajax去获了数据，但有两点是需要值得注意的：
1、ajax请求队列
2、ajax的超时处理
为什么要注意这两点？为了让用户在其可视区域内更快速的看见内容。
假设页面结构分为三栏：左、中、右，而且页面数据会比较多，页面呈现的顺序则是是按从上而下执行的（当然是从左至右开始，一个模块一个模块加载数据），如果不采用队列，那么在页面可视范围之外的模块可能已经加载完数据了，而可视范围之内（假设为第一屏）的模块却尚未开始接收数据，这一类应用如：搜狐博客、新浪博客、网易博客等…
既然是采用了队列，那么又会有一个新的问题：需要保证一个请求的时候不能太长，不能因为一个请求而导致后续的请求被阻塞了。在这两点上jQuery做的其实都挺不错的。队列的处理上，已经有一个插件了，叫ajaxManager，例子和链接在这里：http://www.protofunc.com/scripts/jquery/ajaxManager/；而在超时的处理上，jquery本身就支持传递参数timeout来进行设置（默认是没有设置的）。它没有考虑IE8，尽管IE已经支持xhr对象的timeout属性。
从ajax创建开始，这里优化的一点是针对IE浏览器，只循环获取一次使用哪种MSXML库，副作用就是需要使用额外的属性来记录它
function createXHR() {
if (typeof XMLHttpRequest != 'undefined') {
return new XMLHttpRequest();
} else if (typeof ActiveXObject != 'undefined') {
if (typeof arguments.callee.activeXString != 'string') {
var version = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
for (var i = 0, len = version.length; i < len; ++i) {
try {
var xhr = new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
return xhr;
}
catch (ex){
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
} else {
throw new Error("No XHR object available.");
}
}创建的xhr对象，它对应有5状态(readyState属性)
0 Uninitialized（尚未调用open方法）
1 Loading （已调用open，尚未调用send）
2 Loaded (已经调用send，尚未接收到响应)
3 Interactive （开始接收数据）
4 Complete (数据接收完毕，响应内容解析完成)
在判定一个请求是否已经完成的时候，验证xhr的status有一点是需要注意的：“有的浏览器会错误地返回204状态码”，而IE（非原生的XHR对象）中会将204设置为1223，Opera会在取得204时将status设置为0，而Safari 3之前的版本会将status设置为undefined
最终验证请求是否成功的代码将会是：
( xhr.status >= 200 && xhr.status < 300 ) ||
xhr.status === 304 || xhr.status === 1223 || xhr.status === 0 另外在send的时候，还需要注意的是如果不需要通过请求主体发送数据，最好是传入参数，因为send方法的参数
对于有些浏览器是必需的，建议一般传null即可
在发送请求时，可以通过setRequestHeader来设置HTTP头部信息，在使用GET请求时，可以在头部加上If-Modified-Since、Cache-Control参数来达到刷新缓存数据的目的(如果采用在URL上加随机数据或是时间戳，资源并没有被缓存)
xhr.setRequestHeader('If-Modified-Since', 'Thu, 1 Jan 1970 00:00:00 GMT');
xhr.setRequestHeader('Cache-Control', 'no-cache'); 在响应完成后，可以使用getResponseHeader、getAllResponseHeaders两个方法来获取指定或是全部的响应头的HTTP信息
剩下的一个问题是，处理ajax超时的问题。jquery中的做法是使用定时器来检测xhr的状态，而使用延时器来解决超时的问题：
setInterval(onreadystatechange, 13);
setTimeout(fn, timeout);
而在自定义的onreadystatechange函数中会检测传入的参数，如果参数为“timeout”则说明超时了，先调用xhr的abort取消请求，然后再调用complete方法。至于间隔时间为什么是13，这个没仔细去研究它
正常情况下，如果readyState为4，则先清除定时器，然后再检测响应的数据。而setTimeout中的fn函数，在处理时会先检测请求是否已经处理过了，这里它并没有对延时器进行引用，会导致的一种情况是，请求已经结束，延时器还在跑，直到达到指定的时间间隔。
最后如果ajax请求为异步的话，别忘记将xhr置为null==>xhr = null; 以防止内存泄漏的问题
IE8中直接写xhr.timeout = xxx;然后当超时时，会调用xhr的ontimeout方法，不过需要注意的问题是，当调用ontimeout事件时，此时的readyState可能已经变为了4，此时如果去访问status则会导致错误(最好使用try{}catch{}进行捕获一下)
到目前为止，除IE外，其它浏览器支持xhr对象的onload事件，只要浏览器开始接收到响应，就会触发它，所以在这个函数里面还是需要对它的status属性进行判断。
最后一点是在FF 1.5之后，它支持progress事件，这意味着可以显示当前请求的进度（不再是枯燥的loading了）。
在onprogress事件中会传入一个event对象，它的target是对应的xhr对象，它包含了两个额外的属性：position、totalSize。
其中position表示已接收的字节数，totalSize表示根据Content-Length响应头部确定的预期字节数。
var xhr = new createXHR();
xhr.onload = function() {
//...
}
xhr.onprogress = function(evt) {
var percent = (evt.position / evt.totalSize)*100;
}
xhr.open("get", url, true);
xhr.send(null);