可重用类：
1 function Ajax() {
2 var oXhr = null;
3 var msxml_progid = [
4 'MSXML2.XMLHTTP.6.0',
5 'MSXML3.XMLHTTP',
6 'Microsoft.XMLHTTP',
7 'MSXML2.XMLHTTP.3.0'
8 ];
9 try{
10 oXhr = new XMLHttpRequest(); //先尝试标准方法
11 }catch(e) {
12 for(var i=0, len=msxml_progid.length; i<len; i++) {
13 try{
14 oXhr = new ActiveXObject(msxml_progid[i]);
15 break;
16 }catch(e2) {}
17 }
18 }finally {
19 if(!oXhr) return;
20 }
21 this.oXhr = oXhr;
22 }
23 Ajax.prototype.get(url, options) {
24 if(this.oXhr) {
25 var oXhr = this.oXhr;
26 var aborted = false; //请求是否被取消
27 //默认参数
28 var _options = {
29 method: 'GET',
30 timeout: 5, //s为单位
31 onerror: function() {},
32 onsuccess: function() {}
33 };
34 //覆盖各个选项
35 for(var key in options) {
36 _options[key] = options[key];
37 }
38 function checkForTimeout() {
39 if(oXhr.readyState != 4) {
40 aborted = true;
41 oXhr.abort();
42 }
43 }
44 //超时调用函数取消请求
45 setTimeout(checkForTimeout, _options.timeout * 1000);
46 function onreadystateCallback() {
47 if(oXhr.readyState == 4) {
48 if(!aborted && oXhr.status>=200 && oXhr.status<=300) {
49 _options.onsuccess(oXhr);
50 }else {
51 _options.onerror(oXhr);
52 }
53 }
54 }
55 oXhr.open(_options.method, url, true);
56 oXhr.onreadystatechange = onreadystateCallback;
57 oXhr.send();
58 }
59 };
为失败做准备
- 如果请求超时会发生什么事？应该等待多长时间
解决办法：等待一段时间后调用超时，并处理超时错误。
- 如果取回的数据与预期不符怎么办
应在服务器端设置应急方案，在结果里返回某种错误代码。客户端接收数据后，先有无检查错误代码。
这是处理JSON数据格式的情况：
{“error”:{“id”:1, “message”:”Your session has ,,,”}}
var UNKNOWN = 0;
function processRequestSuccess(oXhr) {
var obj = oXhr.responseText.parseJSON();
if(!obj) {
processError(UNKNOWN);
}else if(obj.error) {
processError(obj.error.id, obj.error.message);
}else {
//按照正常情况继续处理请求
//...
}
}
- 如果发出了多个请求会发生什么事？(尤其是在响应返回的顺序和请求发生的顺序不一致的情况下！)
在web应用中，多重请求是司空见惯的。
1) 第一次请求已经发出，而后续的请求应该覆盖掉第一次请求。
2) 连续发出了多个请求，但调用返回的顺序是不定的。 (用一个令牌来跟踪每次调用)
如果打算重用这个Ajax对象，让它发送多个请求，那么必须在open调用之后声明onreadystatechange事件，否者IE5/6上只有第一次调用成功执行，其他都会失败
