ajax学习总结

转载

mob604756f87695 2021-08-18 18:19:00

文章标签 ajax 服务器端数据 json html 文章分类 代码人生

title: ajax学习总结
date: 2021-08-18 08:55:59
tags:
  - node.js
  - JS
categories:
  - 学习笔记

1.什么是ajax：

AJAX = (async)异步 JavaScript 和 XML；

AJAX 是一种用于创建快速动态网页的技术；

它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验；

1.1应用场景：

页面上拉加载更多数据
列表数据无刷新分页
表单项离开焦点数据验证
搜索框提示文字下拉列表

1.2 ajax的运行环境：

Ajax 技术需要运行在网站环境中才能生效，一般使用Node创建的服务器作为网站服务器；

2.Ajax实现步骤：

创建Ajax对象：
```
let xhr = new XMLHttpRequest();
```

告诉Ajax请求地址以及请求方式：

// 2.告诉Ajax对象要向哪里发送请求，以什么方式发送请求
// 1)请求方式 2)请求地址
xhr.open('get','http://localhost:3000/first');

发送请求：
```
// 3.发送请求
xhr.send();
```

获取服务器端响应到客户端的数据

// 注意：发送请求之后数据不是一下子就能够接收的，
// 需要时间才能够接收完毕，接收完毕后使用xhr.onload进行响应
// 4.获取服务器端响应到客户端的数据
xhr.onload = function(){
console.log(xhr.responseText);
}

客户端完整(test.html)：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 1.创建ajax对象
let xhr = new XMLHttpRequest();
// 2.告诉Ajax对象要向哪里发送请求，以什么方式发送请求
// 1)请求方式 2)请求地址
xhr.open('get','http://localhost:3000/first');
// 3.发送请求
xhr.send();
// 注意：发送请求之后数据不是一下子就能够接收的，
// 需要时间才能够接收完毕，接收完毕后使用xhr.onload进行响应
// 4.获取服务器端响应到客户端的数据
xhr.onload = function(){
console.log(xhr.responseText);
}

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

创建服务器(app.js)：

// 引入express框架
const express = require("express");
// 路径处理模块
const path = require("path");
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, "public")));

// 01ajax入门
app.get("/first", (req, res) => {
  res.send("Hello Ajax!");
});
// 监听端口
app.listen(3000);
// 控制台提示输出
console.log("服务器启动成功");

在浏览器中输入：http://localhost:3000/first 进行ajax请求访问

3.服务器端响应数据的格式

在真实的项目中，服务器端大多数情况下会以 JSON 对象作为响应数据的格式。当客户端拿到响应数据时，要将 JSON 数据和 HTML 字符串进行拼接，然后将拼接的结果展示在页面中；
在 http 请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输；

 JSON.parse() // 将 json 字符串转换为json对象

服务器端：

// 02处理服务器端返回的json数据
app.get("/responseData", (req, res) => {
  res.send({ name: "张三" });
});

处理返回的数据：

// 4.获取服务器端响应到客户端的数据
xhr.onload = function(){
  // 将JSON字符串转换成JSON对象
  let responseText = JSON.parse(xhr.responseText);
  console.log(responseText);
  // 对服务器返回的数据进行使用
  let str = '<h2>'+responseText.name+'</h2>';
  document.body.innerHTML=str;
}

3.1向服务器中传递get请求参数

客户端：

<!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>Document</title>
</head>
<body>
  <p>
    <input id="username" name type="text">
  </p>
  <p>
    <input id="age" name type="text">
  </p>
  <p>
    <input id="btn" name type="button" value="提交">
  </p>
  <script>
    // 获取按钮元素
    let btn = document.getElementById('btn');
    let username = document.getElementById('username');
    let age = document.getElementById('age');
    // 为按钮添加点击事件
    btn.onclick=function(){
      // 创建ajax对象
      let xhr = new XMLHttpRequest();
      let nameValue = username.value;
      let ageValue = age.value;
      // 拼接请求参数
      let params = 'username='+nameValue+'&age='+ageValue;
      // 配置ajax对象
      xhr.open('get','http://localhost:3000/get?'+params);
      // 发送请求
      xhr.send();
      // 获取服务器端响应的数据
      xhr.onload = function(){
        // console.log(xhr.responseText);
        console.log(JSON.parse(xhr.responseText));  
      }
    }
  </script>
</body>
</html>

服务器端

// 对应03
app.get("/get", (req, res) => {
  res.send(req.query);
});

3.2向服务器传递post请求参数

客户端

<!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>Document</title>
</head>
<body>
  <p>
    <input id="username" name type="text">
  </p>
  <p>
    <input id="age" name type="text">
  </p>
  <p>
    <input id="btn" name type="button" value="提交">
  </p>
  <script>
    // 获取按钮元素
    let btn = document.getElementById('btn');
    let username = document.getElementById('username');
    let age = document.getElementById('age');
    // 为按钮添加点击事件
    btn.onclick=function(){
      // 创建ajax对象
      let xhr = new XMLHttpRequest();
      let nameValue = username.value;
      let ageValue = age.value;
      // 拼接请求参数
      let params = 'username='+nameValue+'&age='+ageValue;
      // 配置ajax对象
      xhr.open('post','http://localhost:3000/post');
      // 设置请求参数格式的类型(post请求必须要设置)(如是拼接字符串的形式则是下面的类型)
      xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
      // 发送请求
      xhr.send(params);
      // 获取服务器端响应的数据
      xhr.onload = function(){
        console.log(xhr.responseText);
        // console.log(JSON.parse(xhr.responseText));  
      }
    }
  </script>
</body>
</html>

服务器端：

// 对应04
app.post("/post", (req, res) => {
  // 需要借助第三方模块body-parser才能够成功接受到
  res.send(req.body);
});

3.4请求报文

在 HTTP 请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，这些数据和信息要遵守规定好的格式；

3.5请求参数的格式

application/x-www-form-urlencoded
```
 name=zhangsan&age=20&sex=男
```

application/json

 {name: 'zhangsan', age: '20', sex: '男'}

在请求头中指定 Content-Type 属性的值是 application/json，告诉服务器端当前请求参数的格式是 json。

JSON.stringify() // 将json对象转换为json字符串

注意：get 请求是不能提交 json 对象数据格式的，传统网站的表单提交也是不支持 json 对象数据格式的。

3.6向服务器传递json格式参数

客户端

<!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>Document</title>
</head>
<body>
  <script>
    // 创建ajax对象
      let xhr = new XMLHttpRequest();
      // 配置ajax对象
      xhr.open('post','http://localhost:3000/json');
      // 设置请求参数格式的类型(post请求必须要设置)(如是拼接字符串的形式则是下面的类型)
      xhr.setRequestHeader('Content-Type','application/json');
      // JSON.stringify()将JSON对象转换成json字符串
      // 发送请求
      xhr.send(JSON.stringify({name:'lisi',age:50}));
      // 获取服务器端响应的数据
      xhr.onload = function(){
        console.log(xhr.responseText);
      }
  </script>
</body>
</html>

服务器端

// 解析传递过来的请求参数
app.use(bodyParser.json());
app.post("/json", (req, res) => {
  // 需要借助第三方模块body-parser才能够成功接受到
  res.send(req.body);
});

3.7Ajax状态码

在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态码；

0：请求未初始化(还没有调用open())1：请求已经建立，但是还没有发送(还没有调用send())2：请求已经发送3：请求正在处理中，通常响应中已经有部分数据可以用了4：响应已经完成，可以获取并使用服务器的响应了
```
xhr.readyState // 获取Ajax状态码
```

onreadystatechange 事件,当 Ajax 状态码发生变化时将自动触发该事件

在事件处理函数中可以获取 Ajax 状态码并对其进行判断，当状态码为 4 时就可以通过 xhr.responseText 获取服务器端的响应数据了;

<script>
    let xhr = new XMLHttpRequest();
    // 0已经创建ajax对象，但是还没有对ajax对象进行配置
    console.log(xhr.readyState);
    xhr.open('get','http://localhost:3000/readystate')
    // 1已经对ajax对象进行配置，但是还没有发送数据
    console.log(xhr.readyState);
    // 当ajax状态发生改变时触发
    xhr.onreadystatechange = function(){
      // 2请求已经发送了
      // 3已经接收到服务器的部分数据了
      // 4服务器端的响应数据已经接收完成
      console.log(xhr.readyState);
      if(xhr.readyState==4){
        console.log(xhr.responseText);                                      
      }
    }
    xhr.send();
  </script>

4.Ajax错误处理

网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。可以判断服务器端返回的状态码，分别进行处理。xhr.status 获取http状态码
网络畅通，服务器端没有接收到请求，返回404状态码。检查请求地址是否错误。
网络畅通，服务器端能接收到请求，服务器端返回500状态码。服务器端错误，找后端程序员进行沟通。
网络中断，请求无法发送到服务器端。会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理。

客户端：

<button id="btn">提交ajax数据</button>
  <script>
    let btn = document.getElementById('btn');
    btn.onclick=function(){
      // 1.创建ajax对象
      let xhr = new XMLHttpRequest();
      // 2.告诉Ajax对象要向哪里发送请求，以什么方式发送请求
      // 1)请求方式 2)请求地址
      xhr.open('get','http://localhost:3000/error');
      // 3.发送请求
      xhr.send();
      // 4.获取服务器端响应到客户端的数据
      xhr.onload = function(){
        console.log(xhr.responseText);
        // 获取http状态码 xhr.status
        console.log(xhr.status);
        if(xhr.status==400){
          alert('请求发生错误');
        }
		  }
      // 当网络中断时,不会触发onload事件，会触发onerror事件
      xhr.onerror = function(){
        alert('网络中断，无法发送ajax请求！');
      }
      // Ajax状态码：表示Ajax请求的过程状态 ajax对象返回的
      // Http状态码：表示请求的处理结果 是服务器返回
    }
  </script>

服务器端：

// 对应07
app.get("/error", (req, res) => {
  // console.log(asdfa);
  res.status(400).send("not ok");
});

5.Ajax函数封装

发送一次请求代码过多，发送多次请求代码冗余且重复时，将请求代码封装到函数中，发请求时调用函数即可;

客户端

<!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>Document</title>
</head>
<body>
  <button id="btn">提交ajax数据</button>
  <script>
    let btn = document.getElementById('btn');
    btn.onclick=function(){
      // 1.创建ajax对象
      let xhr = new XMLHttpRequest();
      // 2.告诉Ajax对象要向哪里发送请求，以什么方式发送请求
      // 1)请求方式 2)请求地址
      xhr.open('get','http://localhost:3000/error');
      // 3.发送请求
      xhr.send();
      // 4.获取服务器端响应到客户端的数据
      xhr.onload = function(){
        console.log(xhr.responseText);
        // 获取http状态码 xhr.status
        console.log(xhr.status);
        if(xhr.status==400){
          alert('请求发生错误');
        }
		  }
      // 当网络中断时,不会触发onload事件，会触发onerror事件
      xhr.onerror = function(){
        alert('网络中断，无法发送ajax请求！');
      }
      // Ajax状态码：表示Ajax请求的过程状态 ajax对象返回的
      // Http状态码：表示请求的处理结果 是服务器返回
    }
  </script>
</body>
</html>

6.服务器端总代码：

// 引入express框架
const express = require("express");
// 路径处理模块
const path = require("path");
const bodyParser = require("body-parser");
const { parse } = require("path");
const { fstat } = require("fs");
// 创建web服务器
const app = express();
// 解析传递过来的请求参数
app.use(bodyParser.json());
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, "public")));

// 01ajax入门
app.get("/first", (req, res) => {
  res.send("Hello Ajax!");
});

// 02处理服务器端返回的json数据
app.get("/responseData", (req, res) => {
  // 将JSON字符串转换成JSON对象
  res.send({ name: "张三" });
});

// 对应03
app.get("/get", (req, res) => {
  res.send(req.query);
});

// 对应04
app.post("/post", (req, res) => {
  // 需要借助第三方模块body-parser才能够成功接受到
  res.send(req.body);
});

// 对应05
app.post("/json", (req, res) => {
  // 需要借助第三方模块body-parser才能够成功接受到
  res.send(req.body);
});

// 对应06
app.get("/readystate", (req, res) => {
  // 需要借助第三方模块body-parser才能够成功接受到
  res.send("hello world");
});

// 对应07
app.get("/error", (req, res) => {
  // console.log(asdfa);
  res.status(400).send("not ok");
});

//08 当前的路由意思是，当访问的是cache时，要将读取到的内容返回到浏览器中
app.get("/cache", (req, res) => {
  fs.readFile("./test.txt", (err, result) => {
    res.send(result);
  });
});

// 监听端口
app.listen(3000);
// 控制台提示输出
console.log("服务器启动成功");

title: ajax学习总结
date: 2021-08-18 08:55:59
tags:
  - node.js
  - JS
categories:
  - 学习笔记

1.什么是ajax：

AJAX = (async)异步 JavaScript 和 XML；

AJAX 是一种用于创建快速动态网页的技术；

它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验；

1.1应用场景：

页面上拉加载更多数据
列表数据无刷新分页
表单项离开焦点数据验证
搜索框提示文字下拉列表

1.2 ajax的运行环境：

Ajax 技术需要运行在网站环境中才能生效，一般使用Node创建的服务器作为网站服务器；

2.Ajax实现步骤：

创建Ajax对象：
```
let xhr = new XMLHttpRequest();
```

告诉Ajax请求地址以及请求方式：

// 2.告诉Ajax对象要向哪里发送请求，以什么方式发送请求
// 1)请求方式 2)请求地址
xhr.open('get','http://localhost:3000/first');

发送请求：
```
// 3.发送请求
xhr.send();
```

获取服务器端响应到客户端的数据

// 注意：发送请求之后数据不是一下子就能够接收的，
// 需要时间才能够接收完毕，接收完毕后使用xhr.onload进行响应
// 4.获取服务器端响应到客户端的数据
xhr.onload = function(){
console.log(xhr.responseText);
}

客户端完整(test.html)：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 1.创建ajax对象
let xhr = new XMLHttpRequest();
// 2.告诉Ajax对象要向哪里发送请求，以什么方式发送请求
// 1)请求方式 2)请求地址
xhr.open('get','http://localhost:3000/first');
// 3.发送请求
xhr.send();
// 注意：发送请求之后数据不是一下子就能够接收的，
// 需要时间才能够接收完毕，接收完毕后使用xhr.onload进行响应
// 4.获取服务器端响应到客户端的数据
xhr.onload = function(){
console.log(xhr.responseText);
}

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

创建服务器(app.js)：

// 引入express框架
const express = require("express");
// 路径处理模块
const path = require("path");
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, "public")));

// 01ajax入门
app.get("/first", (req, res) => {
  res.send("Hello Ajax!");
});
// 监听端口
app.listen(3000);
// 控制台提示输出
console.log("服务器启动成功");

在浏览器中输入：http://localhost:3000/first 进行ajax请求访问

3.服务器端响应数据的格式

在真实的项目中，服务器端大多数情况下会以 JSON 对象作为响应数据的格式。当客户端拿到响应数据时，要将 JSON 数据和 HTML 字符串进行拼接，然后将拼接的结果展示在页面中；
在 http 请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输；

 JSON.parse() // 将 json 字符串转换为json对象

服务器端：

// 02处理服务器端返回的json数据
app.get("/responseData", (req, res) => {
  res.send({ name: "张三" });
});

处理返回的数据：

// 4.获取服务器端响应到客户端的数据
xhr.onload = function(){
  // 将JSON字符串转换成JSON对象
  let responseText = JSON.parse(xhr.responseText);
  console.log(responseText);
  // 对服务器返回的数据进行使用
  let str = '<h2>'+responseText.name+'</h2>';
  document.body.innerHTML=str;
}

3.1向服务器中传递get请求参数

客户端：

<!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>Document</title>
</head>
<body>
  <p>
    <input id="username" name type="text">
  </p>
  <p>
    <input id="age" name type="text">
  </p>
  <p>
    <input id="btn" name type="button" value="提交">
  </p>
  <script>
    // 获取按钮元素
    let btn = document.getElementById('btn');
    let username = document.getElementById('username');
    let age = document.getElementById('age');
    // 为按钮添加点击事件
    btn.onclick=function(){
      // 创建ajax对象
      let xhr = new XMLHttpRequest();
      let nameValue = username.value;
      let ageValue = age.value;
      // 拼接请求参数
      let params = 'username='+nameValue+'&age='+ageValue;
      // 配置ajax对象
      xhr.open('get','http://localhost:3000/get?'+params);
      // 发送请求
      xhr.send();
      // 获取服务器端响应的数据
      xhr.onload = function(){
        // console.log(xhr.responseText);
        console.log(JSON.parse(xhr.responseText));  
      }
    }
  </script>
</body>
</html>

服务器端

// 对应03
app.get("/get", (req, res) => {
  res.send(req.query);
});

3.2向服务器传递post请求参数

客户端

<!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>Document</title>
</head>
<body>
  <p>
    <input id="username" name type="text">
  </p>
  <p>
    <input id="age" name type="text">
  </p>
  <p>
    <input id="btn" name type="button" value="提交">
  </p>
  <script>
    // 获取按钮元素
    let btn = document.getElementById('btn');
    let username = document.getElementById('username');
    let age = document.getElementById('age');
    // 为按钮添加点击事件
    btn.onclick=function(){
      // 创建ajax对象
      let xhr = new XMLHttpRequest();
      let nameValue = username.value;
      let ageValue = age.value;
      // 拼接请求参数
      let params = 'username='+nameValue+'&age='+ageValue;
      // 配置ajax对象
      xhr.open('post','http://localhost:3000/post');
      // 设置请求参数格式的类型(post请求必须要设置)(如是拼接字符串的形式则是下面的类型)
      xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
      // 发送请求
      xhr.send(params);
      // 获取服务器端响应的数据
      xhr.onload = function(){
        console.log(xhr.responseText);
        // console.log(JSON.parse(xhr.responseText));  
      }
    }
  </script>
</body>
</html>

服务器端：

// 对应04
app.post("/post", (req, res) => {
  // 需要借助第三方模块body-parser才能够成功接受到
  res.send(req.body);
});

3.4请求报文

在 HTTP 请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，这些数据和信息要遵守规定好的格式；

3.5请求参数的格式

application/x-www-form-urlencoded
```
 name=zhangsan&age=20&sex=男
```

application/json

 {name: 'zhangsan', age: '20', sex: '男'}

在请求头中指定 Content-Type 属性的值是 application/json，告诉服务器端当前请求参数的格式是 json。

JSON.stringify() // 将json对象转换为json字符串

注意：get 请求是不能提交 json 对象数据格式的，传统网站的表单提交也是不支持 json 对象数据格式的。

3.6向服务器传递json格式参数

客户端

<!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>Document</title>
</head>
<body>
  <script>
    // 创建ajax对象
      let xhr = new XMLHttpRequest();
      // 配置ajax对象
      xhr.open('post','http://localhost:3000/json');
      // 设置请求参数格式的类型(post请求必须要设置)(如是拼接字符串的形式则是下面的类型)
      xhr.setRequestHeader('Content-Type','application/json');
      // JSON.stringify()将JSON对象转换成json字符串
      // 发送请求
      xhr.send(JSON.stringify({name:'lisi',age:50}));
      // 获取服务器端响应的数据
      xhr.onload = function(){
        console.log(xhr.responseText);
      }
  </script>
</body>
</html>

服务器端

// 解析传递过来的请求参数
app.use(bodyParser.json());
app.post("/json", (req, res) => {
  // 需要借助第三方模块body-parser才能够成功接受到
  res.send(req.body);
});

3.7Ajax状态码

在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态码；

0：请求未初始化(还没有调用open())1：请求已经建立，但是还没有发送(还没有调用send())2：请求已经发送3：请求正在处理中，通常响应中已经有部分数据可以用了4：响应已经完成，可以获取并使用服务器的响应了
```
xhr.readyState // 获取Ajax状态码
```

onreadystatechange 事件,当 Ajax 状态码发生变化时将自动触发该事件

在事件处理函数中可以获取 Ajax 状态码并对其进行判断，当状态码为 4 时就可以通过 xhr.responseText 获取服务器端的响应数据了;

<script>
    let xhr = new XMLHttpRequest();
    // 0已经创建ajax对象，但是还没有对ajax对象进行配置
    console.log(xhr.readyState);
    xhr.open('get','http://localhost:3000/readystate')
    // 1已经对ajax对象进行配置，但是还没有发送数据
    console.log(xhr.readyState);
    // 当ajax状态发生改变时触发
    xhr.onreadystatechange = function(){
      // 2请求已经发送了
      // 3已经接收到服务器的部分数据了
      // 4服务器端的响应数据已经接收完成
      console.log(xhr.readyState);
      if(xhr.readyState==4){
        console.log(xhr.responseText);                                      
      }
    }
    xhr.send();
  </script>

4.Ajax错误处理

网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。可以判断服务器端返回的状态码，分别进行处理。xhr.status 获取http状态码
网络畅通，服务器端没有接收到请求，返回404状态码。检查请求地址是否错误。
网络畅通，服务器端能接收到请求，服务器端返回500状态码。服务器端错误，找后端程序员进行沟通。
网络中断，请求无法发送到服务器端。会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理。

客户端：

<button id="btn">提交ajax数据</button>
  <script>
    let btn = document.getElementById('btn');
    btn.onclick=function(){
      // 1.创建ajax对象
      let xhr = new XMLHttpRequest();
      // 2.告诉Ajax对象要向哪里发送请求，以什么方式发送请求
      // 1)请求方式 2)请求地址
      xhr.open('get','http://localhost:3000/error');
      // 3.发送请求
      xhr.send();
      // 4.获取服务器端响应到客户端的数据
      xhr.onload = function(){
        console.log(xhr.responseText);
        // 获取http状态码 xhr.status
        console.log(xhr.status);
        if(xhr.status==400){
          alert('请求发生错误');
        }
		  }
      // 当网络中断时,不会触发onload事件，会触发onerror事件
      xhr.onerror = function(){
        alert('网络中断，无法发送ajax请求！');
      }
      // Ajax状态码：表示Ajax请求的过程状态 ajax对象返回的
      // Http状态码：表示请求的处理结果 是服务器返回
    }
  </script>

服务器端：

// 对应07
app.get("/error", (req, res) => {
  // console.log(asdfa);
  res.status(400).send("not ok");
});

5.Ajax函数封装

发送一次请求代码过多，发送多次请求代码冗余且重复时，将请求代码封装到函数中，发请求时调用函数即可;

客户端

<!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>Document</title>
</head>
<body>
  <button id="btn">提交ajax数据</button>
  <script>
    let btn = document.getElementById('btn');
    btn.onclick=function(){
      // 1.创建ajax对象
      let xhr = new XMLHttpRequest();
      // 2.告诉Ajax对象要向哪里发送请求，以什么方式发送请求
      // 1)请求方式 2)请求地址
      xhr.open('get','http://localhost:3000/error');
      // 3.发送请求
      xhr.send();
      // 4.获取服务器端响应到客户端的数据
      xhr.onload = function(){
        console.log(xhr.responseText);
        // 获取http状态码 xhr.status
        console.log(xhr.status);
        if(xhr.status==400){
          alert('请求发生错误');
        }
		  }
      // 当网络中断时,不会触发onload事件，会触发onerror事件
      xhr.onerror = function(){
        alert('网络中断，无法发送ajax请求！');
      }
      // Ajax状态码：表示Ajax请求的过程状态 ajax对象返回的
      // Http状态码：表示请求的处理结果 是服务器返回
    }
  </script>
</body>
</html>

6.服务器端总代码：

// 引入express框架
const express = require("express");
// 路径处理模块
const path = require("path");
const bodyParser = require("body-parser");
const { parse } = require("path");
const { fstat } = require("fs");
// 创建web服务器
const app = express();
// 解析传递过来的请求参数
app.use(bodyParser.json());
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, "public")));

// 01ajax入门
app.get("/first", (req, res) => {
  res.send("Hello Ajax!");
});

// 02处理服务器端返回的json数据
app.get("/responseData", (req, res) => {
  // 将JSON字符串转换成JSON对象
  res.send({ name: "张三" });
});

// 对应03
app.get("/get", (req, res) => {
  res.send(req.query);
});

// 对应04
app.post("/post", (req, res) => {
  // 需要借助第三方模块body-parser才能够成功接受到
  res.send(req.body);
});

// 对应05
app.post("/json", (req, res) => {
  // 需要借助第三方模块body-parser才能够成功接受到
  res.send(req.body);
});

// 对应06
app.get("/readystate", (req, res) => {
  // 需要借助第三方模块body-parser才能够成功接受到
  res.send("hello world");
});

// 对应07
app.get("/error", (req, res) => {
  // console.log(asdfa);
  res.status(400).send("not ok");
});

//08 当前的路由意思是，当访问的是cache时，要将读取到的内容返回到浏览器中
app.get("/cache", (req, res) => {
  fs.readFile("./test.txt", (err, result) => {
    res.send(result);
  });
});

// 监听端口
app.listen(3000);
// 控制台提示输出
console.log("服务器启动成功");