对原生AJAX 的简单封装:wink:

我们先看一下JQuery的AJAX的使用。
jQuery.ajax(url,[settings])

参数：

  1. url:一个用来包含发送请求的URL字符串。
  2. data [Object,String]类型：发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 “&foo=bar1&foo=bar2”。
  3. type [String]类型：(默认: “GET”) 请求方式 (“POST” 或 “GET”)， 默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
  4. success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
  5. error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）

JQuery AJAX 的简单使用

1
2
3
4
5
6
7
8
9
10
11
$.ajax({
    type: "get",
    url: "ajax_get.php",
    data: "username=John&userpwd=Boston",
    success: function(xrh) {
        alert(xrh.responseText);
    },
    error: function() {
        alert("请求错误")
    }
});

对原生AJAX的封装：
  对元素我们需要注意的有以下几点

  1. 对IE5 IE6的兼容
  2. AJAX在ie中的缓存问题
  3. url中的中文进行转码 地址栏中不能出现中文
  4. 将传入的对象转化为字符串函数
  5. 判断外界是否传入超时
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
//封装对象转化为字符串函数
/**
 * 
 * "username":"wzg"
 * "userpwd":"123"
 * "t":"235262345112354"
 */
function datastr(data) {
    var res = [];
    data.t = new Date().getTime();
    for (var key in data) {
        //encodeURLComponent() 将url中的中文进行转码 地址栏中不能出现中文
        // url中只能出现字母数字下划线
        res.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key])); //[username = wzg,userpwd=123]
    }
    return res.join("&"); //username = wzg&userpwd=123
}


function ajax(option) {

    // 将对象转化为字符串
    var str = datastr(option.data);
    //1.创建一个异步对象
    var xhr, timer;
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xhr = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 2.设置请求方式
    if (option.type.toLowerCase() === "get") {
        xhr.open(option.type, option.url + "?" + str, true);
        // 3.发送请求
        xhr.send();
    } else {
        xhr.open(option.type, option.url, true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(str);
    }

    // 4.监听状态的变化
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            clearInterval(timer); //接收到响应 就关闭定时器
            if (xhr.status >= 200 && xhr.status <= 300 ||
                xhr.status == 304) {
                // 5.处理返回的结果
                option.success(xhr);
                //无论请求成功还是失败 都会调用option.complete();函数
                option.option.complete();;
            } else {
                option.error(xhr);
                //无论请求成功还是失败 都会调用option.complete();函数
                option.complete();
            }
        }
    }

    // 判断外界是否传入超时
    if (option.timeout) {
        timer = setInterval(function() {
            xhr.abort();     //终止异步请求
            clearInterval(timer);
        }, option.timeout)
    }

}

对封装的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
btn.onclick = function() {
              ajax({
                  type: "get",
                  url: "1.txt",
                  timeout: 3000,
                  data: {
                      "username": "wzg",
                      "userpwd": "123"
                  },
                  success: function(xhr) {
                      // console.log(xhr.responseXML);
                      // let x = xhr.responseXML
                      // console.log(x.querySelector("to").innerHTML);
                      // console.log(x.querySelector("from"));
                      let x = xhr.responseText;
                      y = JSON.parse(x);
                      console.log(y.name);
                      console.log(y.age);
                  },
                  error: function(xhr) {
                      alert("请求失败！！！");
                  }
              });
}