[JavaScript知识库]原生js中的ajax请求

? ? ? ? 作为一名程序员，虽然在实际使用时没有用原生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请求罢了