0


前端-AJAX

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

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

一、Axios 库

1.引入axios.js: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
2.使用 axios 函数
1)传入配置对象
2)再用 .then 回调函数接收结果,并做后续处理

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

选项的基本示例:

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 请求。例如:

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()

方法来捕获请求过程中发生的任何错误,包括网络错误、超时错误、服务器错误等。

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

2、获取错误信息:在捕获到错误后,可以通过访问

error.response

属性来获取有关错误响应的详细信息,包括状态码、响应数据等。

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 的全局错误处理器,在所有请求中统一处理错误。

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),格式如下:

HTTP/1.1 200 OK

2、响应头部(Headers):响应头部包含了关于响应的元信息,格式为键值对,每个键值对占据一行,常见的响应头包括:

  • Content-Type:指定响应体的数据类型及字符集。
  • Content-Length:指定响应体的长度。
  • Server:表示服务器软件信息。
  • Date:表示响应生成的日期时间。
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 库:

​
<script src="path/to/form-serialize/dist/form-serialize.min.js"></script>

​

示例:

<form id="myForm">
    <input type="text" name="username" value="john_doe">
    <input type="email" name="email" value="[email protected]">
</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

对该表单进行序列化,那么空值的输入框也会被包括在序列化后的数据中。

标签: ajax 前端

本文转载自: https://blog.csdn.net/qq_52265298/article/details/136261841
版权归原作者 汓㸓 所有, 如有侵权,请联系我们删除。

“前端-AJAX”的评论:

还没有评论