对原生AJAX 的简单封装

我们先看一下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 的简单使用

                $.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. 判断外界是否传入超时

//封装对象转化为字符串函数
/**
 * 
 * "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的简单使用：

		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("请求失败！！！");
                    }
                });
	 }