Ajax技术

Ajax 简介

AJAX 全称为：Asynchronous js And XML，就是异步的 JS 和 XML，通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

扩展内容：XML

XML 是可扩展标的记语言，XML 被设计用来传输和存储数据。XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据。

比如一个学生数据可以这存储：

<student>
  <name>张三</name>
  <age>18</age>
  <gender>男</gender>
</student>

注意

现在很多的前后端数据，都不采用 XML 格式了，而是采用 JSON 格式。

AJAX 的特点

优势

• 可以无需刷新页面而与服务器端进行通信。
• 允许你根据用户事件来更新部分页面内容。

劣势

• 没有浏览历史，不能回退，且存在跨域问题。
• SEO 不友好。

基本使用

我们以一个 get 请求为例，具体编码如下

// 创建XMLHttpRequest实例（xhr）
let xhr = new XMLHttpRequest();

// 配置请求信息
xhr.open("GET", "http://localhost:8090/students");

// 发送请求
xhr.send();

// 给xhr绑定监听获取数据
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.response);
  }
};

携带参数

query 参数（查询字符串参数）

手动拼接参数到 url 中：

xhr.open("GET", "http://localhost:8090/students?age=18&gender=male");

借助 URLSearchParams 配置参数：

// 创建URLSearchParams实例
let p = new URLSearchParams();
// 添加参数
p.append("age", 18);
p.append("gender", "male");
// 配置请求信息
xhr.open("GET", "http://localhost:8090/students?" + p);

params 参数

// 配置请求信息
xhr.open("GET", "http://localhost:8090/students/male/18");

提示

携带 parmas 参数的前提是服务端已经配置好了对应的路由

请求体参数

携带 json 格式的请求体参数

// 设置请求头
xhr.setRequestHeader("Content-Type", "application/json");
// 准备参数
let student = { gender: "male", age: 18 };
// 携带请求体参数
xhr.send(JSON.stringify(student));

携带 urlencoded 格式的参数

// 设置请求头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

// 创建URLSearchParams实例
let p = new URLSearchParams();
// 添加参数
p.append("age", 18);
p.append("gender", "male");

//发送请求
xhr.send(p);

备注

express 解析请求体参数。要用到：express.urlencoded()、express.json()中间件。

解析好的请求体参数，自动添加到了 request.body 中。