原生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请求罢了

上一篇:xhr、XMLHttpRequest使用


下一篇:原生面试题系列02