AJAX

是异步的 JavaScript 和 XML。使用 XMLHttpRequest 对象与服务器通信。它可以使用 JSON，XML，HTML 和 text 文本等格式发送和接收数据。

异步：可以在不重新刷新页面的情况下与服务器通信，交换数据或更新页面。

axios 库

与服务器进行数据通信，基于 XMLHttpRequest 封装，代码简单

使用：

• 引入 axios.js：

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
• 使用 axios 函数：

  <script>
    axios({
      // 传入配置对象
      url: "目标资源地址",
      // 用.then回调函数接收结果，并做后续处理
    }).then((result) => {
      // 对服务器返回的数据做后续处理
    });
  </script>

URL

统一资源定位符，简称网址

协议+域名+资源路径

协议

http 协议：超文本传输协议，规定浏览器和服务器之间传输数据的格式

域名

标记服务器在互联网中的方位

资源路径

标记资源在服务器下的具体位置

查询参数

浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据

语法：http://xxx.com/xxx/xxx?参数名1=值1&参数名2=值2

axios - 参数查询

使用 axios 提供的 params 选项

注：axios 运行时会自动拼接url?参数名=值

<script>
  axios({
      // 传入配置对象
      url: '目标资源地址'，
      params: {
          参数名: 值,
      },
      // 用.then回调函数接收结果，并做后续处理
  }).then((result) => {
      // 对服务器返回的数据做后续处理
  })
</script>

请求方法

请求方法	操作
GET	获取数据
POST	提交数据
PUT	修改数据（全部）
DELETE	删除数据
PATCH	修改数据（部分）

数据提交

数据需要在服务器上保存时

axios 请求配置

url：请求的 URL 网址 method：请求的方法，GET 可以忽略 data：提交数据

<script>
  axios({
    url: "目标资源地址",
    method: "请求方法",
    data: {
      参数名: 值,
    },
  }).then((result) => {
    // 对服务器返回的数据进行处理
  });
</script>

axios 错误处理

语法：在 then 方法后面通过调用.catch方法，传入回调函数并定义形参

<script>
  axios({
    url: "目标资源地址",
    method: "请求方法",
    data: {
      参数名: 值,
    },
  })
    .then((result) => {
      // 对服务器返回的数据进行处理
    })
    .catch((error) => {
      // 处理错误
    });
</script>

HTTP 协议-请求报文-响应报文

HTTP 协议：规定了浏览器发送及服务器返回内容的格式

请求报文：浏览器按照 HTTP 协议要求的格式，发送给服务器的内容

• 请求行：请求方法，URL，协议
• 请求头：以键值对的格式携带的附加信息，如：Content-Type
• 空行：分隔请求头，空行之后的是发送给服务器的资源
• 请求体：发送的资源

错误排查：通过请求报文排查错误原因，并修复

响应报文：服务器按照 HTTP 协议要求的格式，返回给浏览器的内容

• 响应行（状态行）：协议、HTTP 响应状态、状态信息
• 响应头：以键值对的格式携带的附加信息，比如：Content-Type
• 空行：分隔响应头，空行之后的是服务器返回的资源
• 响应体：返回的资源

form-serialize 插件

快速收集表单元素

<!-- 需要先获取插件-->
<script src="xx/xx/form-serialize.js"></script>
<script>
  const form = document.querySelector(".example-form");
  // 参数1：获取的表单对象
  // 参数2：配置对象
  //  hash 设置获取数据结构
  //    - true：JS对象（推荐）
  //    - false：查询字符串
  //  empty 设置是否获取空值
  //    - true：获取（推荐）
  //    - false：不获取
  const data = serialize(form, { hash: true, empty: true });
</script>

原理

XMLHttpRequest

XMLHttpRequest 对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。

使用：

<script>
  const xhr = new XMLHttpRequest();
  xhr.open("请求方法", "请求url网址");
  xhr.addEventListener("loadend", () => {
    // 响应结果
    console.log(xhr.response);
    // 字符串转JSON
    JSON.parse(xhr.response);
  });
  xhr.send();
</script>

查询参数： http://xxx.com/xxx/xxx?参数名1=值1

数据提交：

• 请求头设置：Content-Type: application/json

<script>
  const xhr = new XMLHttpRequest()

  const paramsObj = new URLSearchParams('传入的params').toString()

  '请求url网址' += `?${paramsObj}`

  xhr.open('请求方法', '请求url网址')
  xhr.addEventListener('loadend', () => {
      // 响应结果
      console.log(xhr.response)
      // 字符串转JSON
      JSON.parse(xhr.response)
  })
  // 数据提交
  xhr.setRequestHeader('Content-Type', 'application/json')
  // 准备数据转为JSON
  const userStr = JSON.stringify({username: '123'})
  xhr.send(userStr)
</script>

Promise

用于表示一个异步操作的最终完成（或失败）及其结果值

<script>
  // 创建Promise对象
  const p = new Promise((resolve, reject) => {
    // 成功：resolve触发then()执行
    // 失败：reject触发catch()执行
  })
    .then((result) => {
      // 成功
    })
    .catch((error) => {
      // 失败
    });
</script>

三种状态：

• 待定（pending）：初始状态，没有被兑现，也没有被拒绝
• 已兑现（fulfilled）：意味着操作完成
• 已拒绝（rejected）：意味着操作失败

Promise 对象一旦被兑现/拒绝，状态无法改变

链式调用

<script>
  // 创建Promise对象
  const p = new Promise((resolve, reject) => {
    // 成功：resolve触发then()执行
    // 失败：reject触发catch()执行
  });

  const p2 = p.then((result) => {
    return new Promise((resolve, reject) => {});
  });
</script>