AJAX的封装

发表于 | 分类于 | 阅读


详细步骤见代码注释。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
function ajax(opts){
    var settings = {
        url: "",
        method: "get",
        data: {},
        dataType: "json",
        success: function(){},
        error: function(){}
    };
    //用户传动数据覆盖默认数据
    for(var attr in opts){
        settings[attr] = opts[attr];
    }
    //上面已经把用户传的数据覆盖过了，所以这里拼接的数据是settings的数据
    var arr = [];
    for(var attr in settings.data){
        arr.push(attr + "=" + settings.data[attr]);
    }    
    var dataStr = arr.join("&");
    //声明xhr对象
    var xhr = window.XMLHttpRequest? new XMLHttpRequest: ActiveXObject("Microsoft.XMLHTTP");
    //设置完成事件的兼容性
    if(typeof xhr.onload === "undefined"){    //判断是否是ie6
        xhr.onreadystatechange = ready;
    }else{
        xhr.onload = ready;
    }
    //回调函数
    function ready() {
        if(xhr.readyState === 4) {
            //只有2xx和304的状态码，表示服务器返回是正常状态
            //因为get请求中都添加了时间戳，所以这里不考虑缓存出现（即304）的情况
            if(xhr.status >= 200 && xhr.status < 300) {
                switch (settings.dataType.toLocaleLowerCase()) {
                    case "text":
                        settings.success(xhr.responseText);
                        break;
                    case "json":
                        settings.success(JSON.parse(xhr.responseText));
                        break;
                    case "xml":
                        settings.success(xhr.responseXML);
                }
            }else{
                settings.error();
            }
        }
    }
    //判断请求方式
    if(settings.method.toLocaleLowerCase() === "get") {
        //有缓存所以要每次请求地址不一样才能更新，所以用时间戳
        //第三个参数完全可以略去，因为如果用同步（false）会对浏览器有“堵塞效应”
        xhr.open(settings.method, settings.url + "?" + encodeURI(dataStr) +'&'+ new Date().getTime(), true);
        xhr.send();
    }else{
        xhr.open(settings.method, settings.url, true);
        xhr.setRequestHeadr("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(encodeURI(dataStr));
    }
}
0%