创建一个简单的本地ajax请求，

下载node.js，相信学前端的都已经安装了，使用npm安装express框架

// 1. 引入express
// const { response } = require('express');
const express = require('express');

//2. 创建应用对象
const app = express();

// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/',(request, response)=>{
      //设置响应头 设置允许跨域
      response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应 此时这个send就是响应体
    response.send("你好你访问到了我！");

});

//4. 监听端口启动服务
app.listen(8000, ()=>{
    console.log("服务已经启动， 8000端口监听中....");
})

简单理解以下，上面就是一个服务端，在这个文件的文件夹启动终端，输入 node (js文件) 就启动了

 

在原生ajax右键打开在终端打开。

 

 服务已经启动了，可以通过浏览器，http://127.0.0.1:8080 查看

服务端写好了，此时去写我们的客户端，一般的ajax请求，都是用户鼠标点击了一个按钮，或者移入了某个地方就会发送请求。

 

页面里面很简单就是一个按钮，下面一个div点击按钮发送请求，然后把服务的返回的内容放在div里面。

看js部分

      const btn = document.querySelector("button");
      const content = document.querySelector("#content");
      btn.onclick = () => {
        const xhr = new XMLHttpRequest();
        // 设置初始化
        xhr.open("GET", "http://127.0.0.1:8000");
        xhr.send();
        // 处理服务端返回的结果
        // on when 当.....时候
        // readystate 是xhr 对象中的属性 表示状态 0 1 2 3 4
        // change 改变
        xhr.onreadystatechange = () => {
          // 判断一下服务端返回的状态是不是是不是4，4表示数据全部返回了
          if (xhr.readyState === 4) {
            // 看下服务端返回的状态码是不是200，300以下都是成功
            if (xhr.status >= 200 && xhr.status < 300) {
              content.innerHTML = xhr.response;
            }
          }
        };
      };

创建一个请求的对象，xhr，设置初始值，第一个值，请求方式，‘get’，第二个参数，请求的url路径，xhr.send()；发送 (如果是post请求，post的请求体可以放在send()里面)，服务端返回要处理的数据， readyState是xhr的一个属性，1表示初始化，2表示发送，3表示返回部分数据，4返回了全部的数据，判断一下这个属性的值是不是等于4全部返回了，然后在判断以下状态码是不是两百，两百表示成功，最后把响应体的内容输入到html页面中。