前端学习日志1027

原生AJAX实现

发送ajax请求步骤

• 1.创建XMLHttpRequest类型的对象
• 2.准备发送，打开与一个网址之间的连接

• 3.执行发送动作
• 4.指定xhr状态变化事件处理函数

XMLHttpRequest类型对象

• AJAX API中核心提供的是一个XMLHttpRequest类型，所有的AJAX操作都需要使用这个类型。

open方法开启请求

• 本质上XMLHttpRequest就是JavaScript在web平台中发送HTTP请求的手段，因此发送出去的请求仍然是HTTP请求，同样符合HTTP约定的格式。

语法：xhr.open(method,url);

• method: 要使用的HTTP方法。

• • 比如GET、POST、PUT、DELETE等。

• url: 要向其发送请求的url地址，字符串格式。

setRequestHeader()方法设置请求头

• 此方法必须在 open() 方法和 send() 之间调用

语法：xhr.setRequestHeader(header,value)

• header: 一般设置"Content-Type",传输数据类型，即：服务器需要我们传送的数据类型。
• value: 具体的数据类型，常用"application/x-www-form-urlencoded"和"application/json"。

send方法和请求头

• 用于发送HTTP请求

语法：xhr.send(body)

• body: 在XHR请求中要发送的数据体，根据请求头中的类型进行传参。
• 如果是GET方法，无需设置数据体，可以传null或者不传参。

readyState属性

• readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态，由于 readystatechange 事件是在 xhr 对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会被触发多次。

 

封装AJAX库

封装一个ajax函数

• 主要是为了了解封装的过程，一般情况在开发中都是使用第三方提供的 AJAX 库，因为它们可能更加严谨。
• 为了在后续的开发过程中可以更方便的使用这套 API，一般的做法都是将其封装到一个函数中以便调用。

• 代码演示（将封装好的函数单独提取到一个文件中）

 

<script>
        // 封装自己的ajax函数
        /* 参数1：{string} method 请求方法
           参数2：{string} url 请求地址
           参数2：{Object} params 请求参数
           参数3：{function} done 请求完成后执行的回调函数
        */
       function ajax(method,url,params,done){
            // 创建xhr对象，兼容写法
            var xhr = window.XMLHttpRequest 
            ? new XMLHttpRequest()
            : new ActiveXObject("Microsoft.XMLHTTP");

            // 将method转换成大写
            method = method.toUpperCase();
            // 参数拼接
            var pair = [];
            for(var k in params){
                pair.push(k + "=" + params[k]);
            }
            var str = pair.join("&");
            // 判断请求方法
            if(method === "GET"){
                // 字符串拼接 或者 模板字符串
                url += "?" + str;
            }
            xhr.open(method,url);

            var data = null;
            if(method === "POST"){
                // 需要请求头
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                data = str;
            }
            xhr.send(data);

            // 指定xhr状态变化事件处理函数
            // 执行回调函数
            xhr.onreadystatechange = function (){
                if(this.readyState === 4){
                    // 返回的应该是一个对象，这样客户端更好渲染
                    done(JSON.parse(xhr.responseText));
                }
            }
       }

    //    调用自己写的ajax函数
    ajax("get","http://localhost:3000/users",{
        name:"zs",
        age:45
    },function (a){
        console.log(a);
    });
</script>