NodeJs - 原生 JavaScript 实现 Ajax 异步通信

前言

写在前面的话：本篇文章主要讲到的知识点是如何通过原生JavaScript 实现 Ajax，首先就需要对Json、HTTP网络传输协议、网络请求方式、异步编程等有一点点的了解；

1、实现步骤

1. 创建 XMLHttpRequest对象；
2. 通过 onreadystatechange 事件判断请求是否成功;
3. 请求配置 open()
4. 发送请求 send()

1.1 创建 XMLHttpRequest 对象

XMLHttpRequest是一个构造函数，通过使用构造函数的方式创建实例对象：

  	let xhr;
  	xhr = new XMLHttpRequest();

目前很多的浏览器都已经有内置的 XMLHttpRequest 对象，但是为了兼容老版本的 浏览器，还有下面这个写法：

  	let xhr;
  	new ActiveXObject("Microsoft.XMLHTTP");

1.2 通过 onreadystatechange 事件判断请求是否成功

在 Ajax 异步通信中，需要客户端向后端发起请求，在这个过程中会涉及到 TCP 协议中的 三次握手四次挥手 规则；
 
使用 XMLHttpRequest 的 onreadystatechange 事件可以判断当前事务的请求进度以及请求状态

  	xhr.onreadystatechange = function(){
  		if(xhr.readyState != 4){ // 当 readyState 值等于 4 的时候 请求完成
  		// readyState = 0: 未初始化；
  		// readyState = 1: 启动；
  		// readyState = 2: 发送；
  		// readyState = 3: 接收；
  		// readyState = 4: 完成；
  			return
  		}
  		if(xhr.status == 200){ // 当 status 的值等于 200 的时候，请求成功
  			console.log(xhr.resposeText); // 收到后端返回的数据		
  		} else {
  			console.log("请求失败", xhr);
  		}
  	}

2.3 请求配置 open()

前端向后端发送请求需要使用到 XMLHttpRequest 对象中的 open() 方法进行请求配置：

  	xhr.open(method, url, async);

参数解释：

• method：请求方式(“POST”、“GET”、“HEAD”、“PUT”、“DELETE”)；
• url：请求地址（通过与后端开发人员沟通后的接口文档确定）；
• async：布尔值（是否异步请求，true代表 异步请求，false代表不使用异步请求，一般使用异步）；

2.4 发送请求 send()

前端向后端发送请求则需要使用到 XMLHttpRequest 对象中的 send() 方法进行发送：

  	xhr.send(String);

参数解释：

• String：发送请求时，携带的数据信息；
   

注意：

• 当请求类型为 “POST” 的时候，该参数是 “POST” 请求所携带的数据信息（如果没有数据信息，也可以填写 “null”）；
• 当请求类型为 “GET” 类型的时候，该参数填写为 “null” 因为，“GET” 请求类型的数据信息是必须写在 url 请求地址中的，并以 “?” 开头，以 “&” 连接，如：?key=value&key=value

2、综合演示

通过 Promise 对象处理 Ajax 的异步操作，关于XMLHttpRequest的 status值，网虫找到一篇精简版本的解释说明：

function myAjax({
    method = "GET", // 请求方式设置默认值
    url = null, // 请求路径 默认为 null
    data = null, // 携带的数据 默认为 null
    async = true, // 默认为异步请求
    timeout = 3000 // 请求时长（请求超时设置）
}) {
    return new Promise((resolve, reject) => {
        //  ajax 实现步骤
        let xhr;

        // 兼容 判断
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest()
        } else if (window.ActiveXObject) { // 低版本 IE 处理
            xhr = new ActiveXObject("Microsoft.XMLHTTP")
        }

        // 事件处理, 通过审核事件 onreadystatechange 来判断请求成功与否
        /* 
         * readyState 值:
         * 0：未初始化，就是没有调用 open()；
         * 1：启动，已经调用 open()，但是没有调用 send();
         * 2：发送，调用 send()，但是没有收到响应；
         * 3：接收，响应体还没有接收完成；
         * 4：完成，接收到全部的响应数据。 
         * 
         * status值:
         * xmlHttpRequest对象的status代表当前http请求的状态，是一个长整型数据
         * 
         */
        xhr.onreadystatechange = function () {
            if (xhr.readyState != 4) {
                return
            }
            if (xhr.status == 200) {
                console.log(JSON.parse(xhr.responseText))
                // 因为默认接收的是 字符串数据, 所以转换为 Object 对象
                resolve(JSON.parse(xhr.responseText))
            } else {
                // console.log("请求失败", xhr)
                reject(xhr)
            }
        }

        // 设置请求超时
        xhr.timeout = timeout;

        // 将 GET 请求 与 POST 请求区分开
        if (method === "GET") {
            // 请求配置
            // Get 请求参数必须放在 url 上，以 ？开头, ?key=value&key=value
            xhr.open(method, url + "?" + formatData(data), async)

            // 发送请求
            xhr.send(null)
        } else if (method === "POST") {
            // 请求配置
            // POST 请求 可以不用写 url 参数
            xhr.open(method, async)

            // POST 请求 需要设置请求头  设置在 open 之后  send 之前
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencodeed")

            //发送请求
            //POST 在这里提交数据
            xhr.send(formatData(data))
        }
    })
}

// 处理 get 请求的数据
// 对数据做处理,格式化成我们想要的数据: key=root&value=root
function formatData(data) {
    if (data instanceof Object) {
        let arr = []
        for (let key in data) {
            arr.push(key + "=" + data[key])
        }
        return arr.join("&")
    }
    return data
}

---

相关文章

• NodeJs - 模块
• NodeJs - Promise & async
  ……

---