作为一名程序员,虽然在实际使用时没有用原生js的ajax请求,但是我们要清楚js中的ajax的底层原理,才能走的更深。好了废话少说,下面我们用node服务器来作为后台,使用ajax来进行访问。
现在我们使用express脚手架搭建好了一个node服务器,express脚手架的安装命令为:
npx express-generator --views=ejs 项目名,这句命令要在终端中输入,即vscode的集成终端或者dos窗口中进行输入。
一切配置好后我们在public文件下的js文件夹中新建一个js文件,命名为myAjax.js,用来存放原生ajax的代码,输入代码如下:
function myAjax() {
//js原生ajax函数的四个步骤
let xhr;
//1.进行兼容性判断
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
//2.事件处理,判断请求成功与否
xhr.onreadystatechange = function () {
if (xhr.readyState != 4) {
return
}
if (xhr.status == 200) {
console.log("请求成功:", xhr.responseText)
} else {
console.log("请求失败:", xhr)
}
}
//3+4.请求配置open与发送send
//判断是GET请求还是POST请求
//GET请求
// xhr.open("GET", "/users/list?id=2", true)
// xhr.send();
//POST请求
xhr.open("POST","/users/add",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("id=5&name='xiaowang'")
}
在这个文件中我设置的是发送POST请求,并且把ajax代码用一个函数myAjax包裹了起来,需要调用的话在html文件中引入该文件,并调用函数myAjax就可以了。
注意:这个函数是无参函数,所有的参数都在myAjax中设置,实际上很冗余,这里只是实现了最基本的ajax请求罢了