前端-AJAX

汓㸓2024-02-29 12:39

之前在文章里写过一点，这里就接着写喽

jQuery怎样获得内容和属性？-CSDN博客

一、Axios 库

1.引入axios.js: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

2.使用 axios 函数

1）传入配置对象

2）再用 .then 回调函数接收结果，并做后续处理

html 复制代码 
axios({
url:'目标资源地址'
}).then((result)=>{
/对服务器返回的数据做后续处理
})

二、认识Url

URL（统一资源定位器）通常由以下几个部分组成：

  1. 协议（Protocol） ：URL的第一部分指定要用来访问资源的协议，例如 HTTP、HTTPS、FTP、SMTP等。例如，在 "https://www.example.com" 中，"https://" 就是指定了使用 HTTPS 协议。

  2. 域名（Domain Name） ：域名指定了要访问的主机或服务器的名称。在 "https://www.example.com" 中，"www.example.com" 就是域名部分。

  3. 端口号（Port）：端口号是可选的，用于指定连接到服务器时使用的端口。如果未指定端口号，则使用默认端口。例如，常见的 HTTP 端口是 80，HTTPS 是 443。

  4. 路径（Path） ：路径指定服务器上资源的位置。例如，在 "https://www.example.com/page.html" 中，"/page.html" 就是路径。

  5. 查询参数（Query Parameters） ：查询参数是可选的，用于向服务器传递额外的参数。查询参数以问号 "?" 开头，多个参数之间使用 "&" 分隔。例如，在 "https://www.example.com/search?q=url" 中，"?q=url" 就是查询参数。

  6. 片段标识（Fragment Identifier） ：片段标识也是可选的，用于指定页面内的特定部分。片段标识以井号 "#" 开头。例如，在 "https://www.example.com/page.html#section1" 中，"#section1" 就是片段标识。

1）axios-查询参数

在使用 Axios 发起 HTTP 请求时，可以使用 params 选项来添加查询参数到 URL 中。这样可以方便地向服务器传递额外的信息。

以下是使用 Axios 的 params 选项的基本示例：

html 复制代码 
axios.get('https://www.example.com/api/data', {
  params: {
    key1: 'value1',
    key2: 'value2'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

在上面的示例中，我们向 'https://www.example.com/api/data' 发起了一个 GET 请求，并通过 params 选项传递了两个查询参数：key1 和 key2。Axios 会自动将这些参数添加到 URL 中，生成类似 'https://www.example.com/api/data?key1=value1&key2=value2' 的请求地址。

三、常用的请求方法和数据提交

在网络请求中，常用的请求方法（HTTP Methods）包括：

  1. GET ：用于从服务器获取资源，通常用于获取数据。GET 请求通过 URL 发送参数，对应于浏览器中的页面链接或者地址栏输入。

  2. POST ：用于向服务器提交数据，通常用于创建新资源或者提交表单数据。POST 请求通过请求体发送数据，对应于表单的提交操作。

  3. PUT ：用于向服务器更新资源，通常用于修改 已存在的资源（全部）。PUT 请求通过请求体发送数据，对应于更新数据库记录等操作。

  4. DELETE ：用于从服务器删除资源，通常用于删除指定的资源。DELETE 请求通过 URL 或请求体发送数据，对应于删除数据库记录等操作。

  5. PATCH ：用于部分更新服务器上的资源，通常用于更新资源的部分属性。PATCH 请求通过请求体发送数据，对应于更新数据库记录的部分字段。

除了请求方法，数据的提交方式也有几种常见的方式：

  1. URL 参数 ：通过将参数附加在 URL 的查询字符串中来传递数据。这种方式通常在 GET 请求中使用，例如 https://www.example.com/search?q=keyword。

  2. 请求体：通过在请求的消息主体中发送数据，通常在 POST、PUT、DELETE 和 PATCH 请求中使用。数据可以以多种格式进行编码，包括 JSON、表单数据、XML 等。

常见的数据提交格式包括：

  • JSON：将数据编码为 JSON 格式，在请求体中以字符串的形式传递。这种格式适合传递结构化数据，常见于 API 的请求和响应。

  • 表单数据 ：将数据编码为 URL 编码格式（application/x-www-form-urlencoded）或者多部分表单数据格式（multipart/form-data），在请求体中传递。这种格式适合模拟 HTML 表单的提交操作。

  • XML：将数据编码为 XML 格式，在请求体中以字符串的形式传递。这种格式适合与特定的 XML Web 服务进行交互。

根据具体的需求和后端接口的要求，选择合适的请求方法和数据提交方式。一般来说，GET 请求用于获取数据，POST 请求用于提交数据，PUT 和 DELETE 请求用于更新和删除数据，PATCH 请求用于部分更新数据。数据提交方式则根据后端接口的要求进行选择。

1）axios请求配置

在使用 Axios 发起 HTTP 请求时，可以配置多种参数来满足不同的需求。以下是一些常用的 Axios 请求配置选项：

  1. url：要请求的地址。

  2. method ：请求的方法，例如 GET、POST、PUT、DELETE 等（默认值是get，所以获取数据时可以省略，但是提交数据时不可以省略）。

  3. params：作为查询字符串附加到 URL 的参数对象，用于 GET 请求。

  4. data：作为请求体发送的数据，用于 POST、PUT 和 PATCH 请求。

  5. headers：要添加到请求中的自定义 headers。

  6. timeout：请求超时时间，单位是毫秒。

  7. responseType：响应的数据类型，例如 'json'、'text' 等。

  8. withCredentials：指示跨域请求时是否携带用户凭据，如 Cookie、HTTP 认证信息等。

  9. onUploadProgress：上传进度回调函数，在文件上传时使用。

  10. onDownloadProgress：下载进度回调函数，在接收响应数据时使用。

  11. validateStatus：用于确定是否解析或拒绝给定的 Promise。

这些配置选项可以通过传递一个包含这些属性的 JavaScript 对象来配置 Axios 请求。例如：

html 复制代码 
axios({
  url: 'https://www.example.com/api/data',
  method: 'post',
  data: {
    name: 'John Doe',
    age: 30
  },
  headers: {
    'Content-Type': 'application/json'
  },
  timeout: 5000
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

上述代码展示了一个 Axios 请求的基本配置，包括请求的地址、方法、数据、headers 和超时时间。根据实际需求，可以灵活地配置其他选项来满足不同的请求需求。

四、axios错误处理

在使用 Axios 发起 HTTP 请求时，通常需要处理可能出现的错误情况。因为错误信息存在在控制台，用户一般不会查看，所以要拿到错误信息并使用弹框反馈给用户。错误信息包含：浏览器没有返回信息产生的错误和axios产生的错误信息。以下是一些关于 Axios 错误处理的常用方法：

1、捕获异常 ：可以使用 .catch() 方法来捕获请求过程中发生的任何错误，包括网络错误、超时错误、服务器错误等。

html 复制代码 
axios.get('https://www.example.com/api/data')
  .then(response => {
    // 请求成功时的处理逻辑
  })
  .catch(error => {
    // 捕获和处理错误
    console.error('An error occurred:', error);
  });

2、获取错误信息 ：在捕获到错误后，可以通过访问 error.response 属性来获取有关错误响应的详细信息，包括状态码、响应数据等。

html 复制代码 
axios.get('https://www.example.com/api/data')
  .then(response => {
    // 请求成功时的处理逻辑
  })
  .catch(error => {
    if (error.response) {
      // 服务器返回了错误响应
      console.error('Server Error:', error.response.status);
    } else if (error.request) {
      // 请求发出但没有收到响应
      console.error('No response received:', error.request);
    } else {
      // 发生了错误
      console.error('Error:', error.message);
    }
  });

3、全局错误处理：可以设置 Axios 的全局错误处理器，在所有请求中统一处理错误。

html 复制代码 
axios.interceptors.response.use(response => {
  return response;
}, error => {
  // 全局错误处理逻辑
  console.error('Global Error Handler:', error);
  return Promise.reject(error);
});

五、HTTP协议和请求报文

HTTP（Hypertext Transfer Protocol，超文本传输协议）是用于传输超文本文档（例如 HTML）的应用层协议。它是 Web 上数据传输的基础，通常用于从 Web 服务器向浏览器传输网页，并允许用户在浏览器中请求和接收 Web 页面。

HTTP 协议的基本工作原理如下：

  1. 客户端发送请求：客户端（例如浏览器）向服务器发送 HTTP 请求，请求可以包括请求的资源地址、请求方法（GET、POST 等）、请求头部（Headers）和请求体（Body）等信息。

  2. 服务器处理请求：服务器接收到客户端的请求后，根据请求的内容进行处理，可能涉及到查找资源、执行特定的操作等。

  3. 服务器发送响应：服务器将处理结果封装成 HTTP 响应，包括响应状态码、响应头部和响应体等信息，然后发送给客户端。

  4. 客户端处理响应：客户端接收到服务器的响应后，根据响应的内容进行处理，可能涉及到解析 HTML 内容、执行 JavaScript 代码等。

HTTP 请求报文通常由两部分组成：请求行（Request Line）、请求头部（Headers）和请求体（Body）。具体结构如下：

1、请求行：包括请求方法（GET、POST 等）、请求的 URL 地址和使用的 HTTP 版本。

2、请求头部：包括多个键值对，用来描述请求的各种属性和要求，例如 Host、User-Agent、Content-Type 等。

  1. Host：指定请求的主机名。
  2. User-Agent：标识了发起请求的客户端信息。
  3. Accept：指定客户端能够接受的响应内容类型。
  4. Content-Type：指定请求体的数据类型。
  5. Content-Length：指定请求体的长度。

3、请求体（Body）：请求体通常用于向服务器传递数据，比如在 POST 请求中传递表单数据或者 JSON 数据。请求体并不是所有请求都会包含，比如 GET 请求通常不包含请求体。

六、请求报文------错误排查

当处理 HTTP 请求报文时，有时候会遇到一些错误，需要进行排查和解决。以下是一些常见的 HTTP 请求报文错误和对应的排查方法：

  1. 请求方法错误：如果使用了不正确的请求方法（比如将 GET 用于提交表单数据），服务器可能会返回 405 Method Not Allowed 错误。请确保选择正确的请求方法来访问资源。

  2. URI 格式错误：如果请求行中的 URI 格式不正确，服务器可能会返回 400 Bad Request 错误。检查 URI 是否符合规范，并确保路径正确。

  3. 缺少必要的请求头：有些情况下，服务器要求包含特定的请求头信息，如果缺少这些信息，可能会导致请求失败。请检查请求头部是否完整并包含了必要的信息。

  4. 请求体格式错误：如果请求需要包含请求体而未提供，或者请求体格式错误，服务器可能返回 400 Bad Request 错误。确保请求体内容格式正确且完整。

  5. 请求超时：如果请求处理时间过长，可能会导致超时错误。可以尝试优化请求处理逻辑，减少响应时间。

  6. 网络连接问题：有时候请求失败是由于网络连接问题引起的。检查网络连接是否正常，尝试重新发送请求。

  7. 服务器端错误：如果以上排查方法无效，并且出现了 5xx 级别的错误码，可能是服务器端出现了问题。联系服务器管理员以获取更多信息。

七、HTTP协议------响应报文

HTTP 响应报文是服务器端向客户端返回数据的格式化结构，通常由三部分组成：状态行（Status Line）、响应头部（Headers）和响应体（Body）。

1、状态行（Status Line）：状态行包含了响应的 HTTP 协议版本、状态码（Status Code）和状态消息（Status Message），格式如下：

html 复制代码 
HTTP/1.1 200 OK

2、响应头部（Headers）：响应头部包含了关于响应的元信息，格式为键值对，每个键值对占据一行，常见的响应头包括：

  • Content-Type：指定响应体的数据类型及字符集。
  • Content-Length：指定响应体的长度。
  • Server：表示服务器软件信息。
  • Date：表示响应生成的日期时间。
html 复制代码 
Content-Type: text/html; charset=UTF-8
Content-Length: 1024
Server: Apache/2.4.41 (Unix)
Date: Mon, 28 Feb 2024 07:30:00 GMT

3、响应体（Body） ：响应体包含了服务器返回给客户端的实际数据，比如 HTML 内容、JSON 数据等。响应体的内容取决于服务器端的处理结果和请求的类型。

1）常见的状态码及其含义

HTTP 协议定义了一系列状态码（Status Code），用于表示服务器对请求的处理结果。状态码主要分为五大类，每类又包含若干具体的状态码，以下是常见的状态码及其含义：

  1. 信息性状态码（Informational Status Codes）（100-199）：指示请求已被接受，继续处理。

    • 100 Continue：服务器已经收到请求的初始部分，客户端应该继续请求。
    • 101 Switching Protocols：服务器将遵从客户的请求转换到另外一种协议。

  2. 成功状态码（Success Status Codes）（200-299）：表示请求被成功处理。

    • 200 OK：请求成功。一般用于 GET、POST 请求。
    • 201 Created：请求已经被实现，并且创建了一个新的资源。
    • 204 No Content：服务器成功处理了请求，但不需要返回任何内容。

  3. 重定向状态码（Redirection Status Codes）（300-399）：表示需要进行进一步操作以完成请求。

    • 301 Moved Permanently：请求的资源已被永久移动到新位置。
    • 302 Found：请求的资源临时从不同的 URI 响应请求。
    • 304 Not Modified：客户端发送条件请求时，服务器端允许访问但未改变内容。

  4. 客户端错误状态码（Client Error Status Codes）（400-499）：表示客户端提交的请求有错误。

    • 400 Bad Request：请求无效，例如请求中包含无效的参数。
    • 403 Forbidden：服务器拒绝请求。
    • 404 Not Found：请求的资源未找到。

  5. 服务器错误状态码（Server Error Status Codes）（500-599）：表示服务器在处理请求时发生错误。

    • 500 Internal Server Error：服务器遇到了一个未曾预料的状况，导致无法完成请求。
    • 502 Bad Gateway：充当网关或代理的服务器，从远端服务器接收到了一个无效的响应。
    • 503 Service Unavailable：服务器暂时过载或维护，无法处理请求。

通过状态码，可以快速了解服务器对请求的处理结果，便于进行错误排查和调试。

**八、**form-serialize插件

1、form-serialize 是一个 JavaScript 库，用于将表单数据序列化为对象或 URL 编码的字符串。通过 form-serialize，可以轻松地获取表单中的数据并以所需的格式进行处理。

2、引入 form-serialize：在需要使用的页面中引入 form-serialize 库：

html 复制代码 
​
<script src="path/to/form-serialize/dist/form-serialize.min.js"></script>

​

示例：

html 复制代码 
<form id="myForm">
    <input type="text" name="username" value="john_doe">
    <input type="email" name="email" value="john.doe@example.com">
</form>

<script>
    var form = document.getElementById('myForm');
    var formData = serialize(form, { hash: true });
    console.log(formData);
</script>
  • 上述示例中，我们首先获取了 ID 为 myForm 的表单元素，并使用 form-serialize 库的 serialize 函数将表单数据序列化为对象，并设置 hash: true 表示返回哈希对象(hash: false表示返回查询字符串)。
  • 最后，我们将序列化后的表单数据打印输出到控制台。

empty: true 这个参数通常用于表单序列化插件或库中，表示在序列化表单数据时，是否包括那些值为空（empty）的表单字段。

当设置 empty: true 时，序列化过程将包括所有表单字段，包括那些值为空的字段。这意味着即使表单字段的值为空，也会被序列化并包含在最终的表单数据中。

举个例子，假设有一个表单包含两个输入框，其中一个输入框的值为空。如果使用 empty: true 对该表单进行序列化，那么空值的输入框也会被包括在序列化后的数据中。

相关推荐
敲啊敲95278 分钟前
5.npm包
前端·npm·node.js
brrdg_sefg22 分钟前
Rust 在前端基建中的使用
前端·rust·状态模式
m0_748230941 小时前
Rust赋能前端： 纯血前端将 Table 导出 Excel
前端·rust·excel
qq_589568101 小时前
Echarts的高级使用，动画，交互api
前端·javascript·echarts
黑客老陈2 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞（利用xss钓鱼）
运维·服务器·前端·网络·安全·web3·xss
正小安2 小时前
Vite系列课程 | 11. Vite 配置文件中 CSS 配置（Modules 模块化篇）
前端·vite
暴富的Tdy2 小时前
【CryptoJS库AES加密】
前端·javascript·vue.js
neeef_se2 小时前
Vue中使用a标签下载静态资源文件（比如excel、pdf等），纯前端操作
前端·vue.js·excel
m0_748235613 小时前
web 渗透学习指南——初学者防入狱篇
前端
热门推荐
01【一文读懂】NTN（非地面网络）技术介绍02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Cube-Studio：开源大模型全链路一站式中台05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07组基轨迹建模 GBTM的介绍与实现（Stata 或 R）08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10RAG 实践- Ollama+RagFlow 部署本地知识库