一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第15天，点击查看活动详情。

ajax中使用XMLHttpRequest对象

1.创建异步对象 var xmlhttp=new XMLHttpRequest();

2.给异步对象绑定事件。onreadystatechange:当异步对象发起请求，获取了数据就会触发这个事件。这个事件需要指定一个处理函数function，在函数中处理状态的变化。

例如：

xmlhttp.onreadystatechange=function(){
    //处理请求的状态变化
    
    if (xmlHttps.readystate==4 && xmlHttp.status==200) {

//可以处理服务器端的数据，更新当前页面
var data =xmlHttp.responseText;

document.getElementById("name").value=data;

    }
}

XMLHttpRequest对象属性

readystate表示异步对象请求的状态变化

0：创建异步对象时，new XMLHttpRequest();

1：初始异步请求对象，xmlHttp.open()

2：发送请求，xmlHttp.send()

3:从服务器端获取了数据，此时3，注意3时异步对象内部使用，获取了原始的数据

4：异步对象把接收的数据处理完成后，此时开发人员在4的时候处理数据

异步对象的status属性，表示网络请求的状况的，200，404，500，需要时当status===200时，表示网络请求时成功的。

初始异步请求对象

异步的方法open{}

xmlHttp.open("请求的方式get|post","服务器的访问地址"，同步|异常请求(默认是true))

例如：xmlHttp.open("get","",,true)

使用异步对象发送请求

xmlHttp.send()

获取服务器端返回的数据，使用异步对象的属性 responseText

使用例子：

xmlHttp.responseText

ajax请求的基本操作

我们以一个具体例子的实现来解析ajax请求的基本操作过程。

首先我们要设置一个button按钮，然后通过点击这个按钮发请求；
那么就既然我们要通过这个按钮来发请求，那么我们能势必要先获取这个元素，并将其绑定事件
接下来就开始正式进行ajax的操作了
首先我们要创建一个对象
然后设置请求方法和url对其进行初始化
紧接着我们可以将其发送
接下去我们要做一个事件的绑定来处理服务端返回的结果
但是我们在处理返回的结果之前还要判断这个结果是否是合理的结果所有我们还需要对其进行判断，所以我们要判断结果是否全部返回以及判断响应的状态码是否成功
最后我们就可以处理结果了

接下来给大家展示一下具体的代码

这部分是html的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX GET 请求</title>
    <style>
     #result {
            width: 200px;
            height:100px;
            border: soild 2px black;
            background-color: pink;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        //获取button元素
        const btn =document.getElementsByTagName("button")[0];
        const result = document.getElementById("result");
        //绑定事件
        btn.onclick = function(){
            //1.创建对象
           const xhr =new XMLHttpRequest();
           //2.初始化，设置请求的方法和url
           xhr.open("GET","http://127.0.0.1:8000/server");
           //发送
           xhr.send();
           //4.事件绑定，处理服务端返回的结果
           xhr.onreadystatechange =function(){
                if(xhr.readyState==4){
                    //判断响应状态码 200 404 403 401 500，大部分只要是2xx就表示成功了
                    if(xhr.status >= 200 && xhr.status < 300){
                        //处理结果 行 头 空行 体
                        // //响应行
                        // console.log(xhr.status);//状态码
                        // console.log(xhr.statusText);//状态字符串
                        // console.log(xhr.getAllResponseHeaders());//所有响应头
                        // console.log(xhr.response);//响应体

                        //设置result文本
                       result.innerHTML = xhr.response;
                    }else{

                    }
                }
           }
        }
    </script>
</body>
</html>

这部分是js的代码

//1.引入express
// const { request } = require("express");
const express = require("express");
//2.创建应用对象
const app = express();
//3.创建路由规则
// request是对请求报文的封装
// response是对相应报文的封装
app.get("/server",(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*')
    //response.setHeader("Acess-control-Allow-Origin","*")// 傻宝宝注意大小写
    //设置响应
    response.send("hello ajax！");
});
//监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中...");
})

ajax中使用XMLHttpRequest对象+ajax请求的基本操作