11.手写原生ajax

11.ajax：

        /*
    实现过程：
        1.创建Ajax的核心对象 XMLHttpRequest对象
            new XMLHttpRequest()
        2.通过实例化对象中的open()与服务器建立连接
            open(method:表示请求方式,url:服务器的地址)
        3.构建请求所需的数据内容,并通过实例化对象中的send()方法发给服务器
            send(body:发送的数据)
            如果使用get请求发送数据,send()参数设置为null
        4.通过实例化对象提供的 onreadystatechange 事件监听服务器的通信状态
            onreadystatechange 主要监听的属性是实例对象中的readyState
            readyState 五种状态:
                0:open()方法未调用,还没建立连接
                1:send()方法未调用,还没发送请求
                2:send()已调用,响应头和响应状态已返回
                3:响应体正在下载,responseText(接收服务端响应结果),获取部分数据
                4:整个请求过程已经完毕
                只要readyState属性值发生改变,onreadystatechange事件就被触发
        5.接受并处理服务端向客户端相应的数据结果
        6.将处理结果更新到HTML页面中
 */
        function ajax(url, data) {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            // post请求:
            // 1.xhr.open('POST', url, true);
            // 2.xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // responseText:以字符串的形式返回
                        // console.log(JSON.parse(xhr.responseText));
                        console.log(xhr.responseText);
                    }
                }
            }
            xhr.send(null);
            // 3.xhr.send(data);
        }
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