脚本宝典收集整理的这篇文章主要介绍了NodeJs - 原生 JavaScript 实现 Ajax 异步通信,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
写在前面的话:本篇文章主要讲到的知识点是如何通过原生JavaScript 实现 Ajax,首先就需要对Json、HTTP网络传输协议、网络请求方式、异步编程等有一点点的了解;
- 创建
XMLHttpRequest
对象;- 通过
onreadystatechange
事件判断请求是否成功;- 请求配置
open()
- 发送请求
send()
XMLHttpRequest是一个构造函数,创建该对象的实例化,可以使用构造函数的方式:
let xhr; xhr = new XMLHttpRequest();
现在很多的浏览器都已经有内置的 XMLHttpRequest 对象,但是为了兼容老版本的 浏览器,还有下面这个写法:
let xhr; new ActiveXObject("Microsoft.XMLHTTP");
在 Ajax 异步通信中,需要客户端向后端发起请求,在这个过程中会涉及到 TCP 协议中的 三次握手四次挥手 规则; 使用 XMLHttpRequest 的
onreadystatechange
事件可以判断当前事务的请求进度以及请求状态xhr.onreadystatechange = function(){ if(xhr.readyState != 4){ // 当 readyState 值等于 4 的时候 请求完成 return } if(xhr.status == 200){ // 当 status 的值等于 200 的时候,请求成功 console.log(xhr.resposeText); // 收到后端返回的数据 } else { console.log("请求失败", xhr); } }
前端向后端发送请求需要使用到 XMLHttpRequest 对象中的 open() 方法进行请求配置:
xhr.open(method, url, async);
参数解释:
- method:请求方式(“POST”、“GET”、“HEAD”、“PUT”、“DELETE”);
- url:请求地址(通过与后端开发人员沟通后的接口文档确定);
- async:布尔值(是否异步请求,true代表 异步请求,false代表不使用异步请求,一般使用异步);
前端向后端发送请求则需要使用到 XMLHttpRequest 对象中的 send() 方法进行发送:
xhr.send(String);
参数解释:
- String:发送请求时,携带的数据信息;
注意:
- 当请求类型为 “POST” 的时候,该参数是 “POST” 请求所携带的数据信息(如果没有数据信息,也可以填写 “null”);
- 当请求类型为 “GET” 类型的时候,该参数填写为 “null” 因为,“GET” 请求类型的数据信息是必须写在 url 请求地址中的,并以 “?” 开头,以 “&” 连接,如:?key=value&key=value
通过 Promise 对象处理 Ajax 的异步操作,关于XMLHttpRequest的 status值,网虫找到一篇精简版本的解释说明:
- HTTP status 状态码(精简版)
function myAjax({
method = "GET", // 请求方式设置默认为 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 - 原生 JavaScript 实现 Ajax 异步通信全部内容,希望文章能够帮你解决NodeJs - 原生 JavaScript 实现 Ajax 异步通信所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。