本人作为小白，第一次写下自己的理解，还请各位大佬多多指出问题，加以改正。

AJAX-express框架基本使用

首先在最外层位置启动终端，做初始化npm init --yes 第二步在终端中安装express框架 npm i express

安装完成后便会出现这两个文件夹随后便可在js文件中按照步骤使用express框架 1:引入express

`const express = require('express');`

2:创建应用对象

const app = express();

3:创建路由规则

app.get('/',(request,response)=>{
    //设置响应
    response.send('HELLO EXPRESS')
});
request:对请求报文的封装
respinse:对响应报文的封装

4:监听端口启动服务

app.listen(8000,()=>{//跟一个回调函数
    console.log("服务已经启动，8000端口监听当中....")
})

随后便在自己的文件夹下启动端口（注意是自己的文件夹名字，按住TAB键自动生成路径）

便可在页面中看见HELLO EXPRESS

AJAX案例准备

准备一个前端页面和一个服务端

首先定义一个需求，编写一个样式

需求是：点击这个按钮后需要向服务端发送一个请求，把服务端返回的响应体结果，在div中做一个呈现，页面不刷新在服务端中修改一下代码

app.get('/server',(request,response)=>{
});

改成server的目的：当客户端浏览器向服务器发送请求时，如果说url路径就是请求行的第二段内容他的路径是/server的话，这个时候就会执行回调函数里面的代码，并且由responce来做出响应。（红色方框圈起来的代码块）。此时和上面一样在当前文件夹下启动

出现这个问题时需要释放之前的端口，因为上面执行的时候端口被占用选择(ctrl+c)释放掉初次使用的端口或者选用新的端口。我选择的是停用上面的端口

此时响应体的返回是正常的

响应头也是正常的

AJAX请求的基本操作

1:获取button元素

const btn = doucument.getElementsByTagName('button')[0];

2:绑定事件

btn.onclik = function(){
//创建对象
const xhr = new XMLHttpRequest();//xhr是对AJAX请求的一个缩减
//初始化 设置请求方法和url
xhr.open('GET','http://127.0.0.1:8000/server')
//发送
xhr.send();
//事件绑定 处理服务端返回的结果
//on when 当。。。。时候
//readystate是xhr对象中的属性，表示状态0 1 2 3 4
//0(未初始化) 1(open方法已作用完毕) 2(send方法已调用完毕) 3(服务端部分返回来的部分结果) 4(服务端返回所有的结果)
//change改变
xhr.onreadystatechange = function(){
//触发四次
//这里要处理服务端返回的结果，只能在4做服务器返回结果的一个处理
//判断(服务端返回了所有了结果)
   if(xhr.readyState ===4){
      //判断响应的状态码200 404 403 401 500
      //2XX 成功
      if(xhr.status >= 200 && xhr.status <300){
          //处理结果
          
      }else{
       }
     }
   }
 }

此时我们就要将响应的的结果在div中做一个呈现，在获取button元素中增加

const result = document.getElementById("result");

在处理结果中设置result的文本

result.innerHTML = xhr.response;

此时我们并没有进行页面刷新就从服务器拿回了最新的结果

完整GET页面代码

AJAX发送POST请求

同样准备一个前端页面和一个服务端

写一个需求，用于POST请求

需求是：向服务端发请求，当把鼠标放到div上面的时候发请求，发post请求然后回来的结果将响应体在div中做一个呈现

随后和上面同样的操作 1:获取元素对象

const result = document.getElementById("result")

2:绑定事件

result.addEventListener("mouseover",function(){
//创建对象
const xhr = new XMLHttpRequest();
//初始化 设置类型与url
xhr.open('POST','http://127.0.0.1:8000/server');
//发送
xhr.send();
//事件绑定
xhr.onreadystatechange = function(){
    if(xhr.readyState ===4){
      //判断响应的状态码200 404 403 401 500
      //2XX 成功
      if(xhr.status >= 200 && xhr.status <300){
          //处服务端返回的结果
          result.innerHTML = xhr.response;
      }
     }
   }
});

此时会发生报错原因是因为，服务端并没有一个与之匹配的路由规则，而且没有设置响应头，此时我们就需要新增加一个规则在server.js里。

一定要注意app.post以及上面的app.get一定要小写不能大写

这样POST请求就完成了完成POST页面代码

AJAX-服务端响应

AJAX请求服务端响应JSON的一个请求；在实际工作当中我们向服务端发送请求，服务端返回结果绝大多数情况都是一个JSON格式的数据，所以说我们要知道这个结果我们怎么样去处理，同样以案例去演示同样准备一个div

在这个窗口下，按下任何一个键盘按键就会向服务端发送请求，服务端返回结果，将结果在div中做一个呈现 1:绑定键盘按下事件 `

window.onkeydow = function(){
   //发送请求
   const xhr = new XMLHttpRequest();
   //初始化
   xhr.open('GET','http://127.0.0.1:8000/json-server');
   //发送
   xhr.send();
   //事件绑定
   xhr.onreadystatechange = function(){
    if(xhr.readyState ===4){
      if(xhr.status >= 200 && xhr.status <300){
          //
          console.log(xhr.response);
          result.innerHTML = xhr.response;
      }
     }
   }
};

获取result元素对象 const result = doucument.getElementById('result')

此时返回的结果是服务端的响应体，并没有达到我们的目标

于是修改服务端，我们的目标是响应数据，

//响应一个数据，
const data = {
  name:'atguigu'
};
//对对象进行字符串转换
let str = JSON.stringify(data);
//设置响应体
response.send(str);
//send方法只能接收字符串类型

因为此时生成的数据如下图我们便需要对数据进行转化 xhr.response是一个字符串，需要把他变成一个对象

//1.手动对数据转化
let data = JSON.parse(xhr.response);
console.log(data);
result.innerHTML = data.name;//把name属性值放入里面做一个显示
//2.自动转换(借助于xhr对象上的一个属性来设置，直接拿到结果)
//在键盘按下事件上面设置响应体数据的类型
xhr.response = 'json';
console.log(xhr.response);
result.innerHTML = xhr.response.name;

此时结果

完整页面代码

以上便是我的理解，我也是第一次写，还有很多我不知道的知识，需要我学会的地方还有很多，希望各位大佬能够多多提出指导的意见，我都会虚心接受，希望自己能继续努力

Ajax基础小白学习，这一篇就够了

AJAX-express框架基本使用

AJAX案例准备

AJAX请求的基本操作

AJAX发送POST请求

AJAX-服务端响应