Ajax探究和原生Ajax封装

什么是Ajax?

Ajax 是一种技术方案，不是新技术。它依赖现有的CSS/HTML/Javascript,其中最核心的是XMLHttpRquest对象。

Ajax 请求步骤

1. 创建 XMLHttpRequest 对象
2. 准备发送请求 open()
3. 发送请求数据 send()
4. 请求返回的回调函数 onreadystatechange = function(){}

Ajax步骤详解

1. 创建 XMLHttpRequest 对象
   var xhr = new XMLHttpRequest()

2. 准备发射数据的 open() 方法
   语法：xhr.open("请求类型","url地址","是否异步")
   例如：xhr.open("get","http://127.0.0.1/index.php?username=123&sex=1",true) xhr.open("post","http://127.0.0.1/index.php?login.php",true)

3. send() 发送请求的数据

• post: send(data)
• get: send()
  因为 get 请求发送的数据实际上是拼接在地址栏中，所以发送的数据为空。

4. 回调函数 onreadystatechange 属性指向一个回调函数
   当页面加载状态发生改变，xhr 的 readystate 属性就会发生改变，然后 onreadystatechange 指向的回调函数就会自动被调用。
   例：

    <script type="text/javascript">
        let xhr = new XMLHttpRequest();
        xhr.open("get","http://a.itying.com/api/productlist",true);
        xhr.send();
        if(xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.response);
        }
    </script>

readyState 状态值

是指运行AJAX所经历过的几种状态，无论访问是否成功都将响应的步骤，可以理解成为AJAX运行步骤
0 - 4 的状态变化：

• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成且响应已就绪

status 状态码

是 XMLHttpRequest 对象的一个属性，表示响应的HTTP状态码
状态码分五大类：

• 1xx：信息响应类，表示接收到请求并且继续处理
• 2xx：处理成功响应类，表示动作被成功接收、理解和接受
• 3xx：重定向响应类，为了完成指定的动作，必须接受进一步处理
• 4xx：客户端错误，客户请求包含语法错误或者是不能正确执行
• 5xx：服务端错误，服务器不能正确执行一个正确的请求

XMLHttpRquest兼容

老版本的 Internet Explorer(ie5 和 ie6) 使用 ActiveX 对象：
let xhr = new ActiveXObject("Microsoft.XMLHTTP")

请求超时 timeout 和 超时监听 ontimeout

1. timeout 属性值为一个整数，单位为 ms (毫秒)，用来设置请求发送后等待接收响应的时间。如果在设置时间内未能接收到后端响应的数据，则被认为请求超时，则执行 ontimeout
2. ontimeout() 是等待超时后，自动执行的回调方法
   例：

let xhr = new XMLHttpRequest();
xhr.timeout = 60000;
xhr.ontimeout = function() {
      console.error("Time Out !")
}

封装原生的 Ajax

封装思路：请求方式，请求地址，请求数据，回调函数
将请求的数据格式化成拼接的数据

        /**
         * jsonData 的格式：
         * {
         *   url:       请求地址
         *   method:    请求类型
         *   data：      请求数据
         *   isAsync    是否异步
         *   success    成功的回调函数
         *  }
         * */
        function $ajax(jsonData) {
            let formatData = "";
            let xhr;
            // 兼容低版本ie
            if(window.XMLHttpRequest) {
                xhr = new XMLHttpRequest()
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            // 格式化数据为 key1=value1&key2=value2 的格式
            if(jsonData.data) {
                let str = "";
                let arr = [];
                for(let key in jsonData.data) {
                    str = `${key}=${jsonData.data[key]}`
                    arr.push(str);
                }
                formatData = arr.join("&");
            }
            // get请求
            if(jsonData.method.toLowerCase() == "get") {
                xhr.open('get', jsonData.url + "?" + formatData, jsonData.isAsync);
                xhr.send()
            // post请求
            } else if(jsonData.method.toLowerCase() == "post") {
                xhr.open('post', jsonData.url, jsonData.isAsync);
                xhr.setRequestHeader('Contenttype','application/x-www-form-urlencoded;charset=utf-8');
                xhr.send(formatData);
            }
            // 状态值和状态码对应上后 执行成功的回调函数
            xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.status == 200) {
                    jsonData.success(xhr.response);
                } 
            }
        }

具体使用案例：

$ajax({
                url: "http://127.0.0.1:8082/process_get",
                method: "get",
                data: {
                    myname: myname,
                    myage: myage
                },
                isAsync: true,
                success: function(res) {
                    console.log("successRes:", res);
                }
            })
        }