前端-AJAX

已于 2024-02-28 18:00:27 修改
阅读量1.2k 收藏 20
点赞数 26
文章标签： ajax 前端
于 2024-02-28 15:34:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52265298/article/details/136261841
版权

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

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="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 对该表单进行序列化，那么空值的输入框也会被包括在序列化后的数据中。

汓㸓
关注
  • 26
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端项目-fdaciuk-ajax.zip
09-02
前端项目-fdaciuk-ajax,Ajax module in Vanilla JS
前端-JavaScript-ajax (axios、 promise、git...)
11-19
ajax--ajax原生写法。axios发送请求。promise概念。git版本管理器使用。具体：请求与相应、浏览器和服务器、接口、回调函数、事件循环、宏任务与微任务、form表单提交、serialize插件、JSON、async，await、git仓库...
前端学习--Ajax(2) form表单
Michelle209的博客
04-22 1323
get 在请求的url会体现数据，Query String Parameters中会解析url中的数据。application/x-www-form-urlencoded 默认值，表示发送前编码所有字符。点击submit按钮触发表单提交的操作，使页面跳转到action URL的行为。-- 向何处发送表单数据 如果不写默认是当前页面url。-- 以何种方式把表单提交到action的url。解决：表单只采集数据，ajax将数据提交到服务器。-- 在何处打开action的url。-- 发送数据前如何对数据编码。
看这一篇就够了！-Ajax详解
热门推荐
Oriental_的博客
03-15 16万+
今天来聊一聊前后端交互的重要工具Ajax 结合上次跟大家分享的前后端交互基础，如果还没有看过的童鞋，以下是传送门 前后端交互详解 AJAX - 到底什么是Ajax? ajax 全名 async javascript and XML 是前后台交互的能⼒ 也就是我们`客户端给服务端发送消息的⼯具，以及接受响应的⼯具 是⼀个 默认异步执⾏机制的功能AJAX分为同步（async = false...
前端-ajax的各种写法及应用
qq_45891136的博客
08-25 4801
原生AJAX 名称： 异步的javascript and xml 原理： 通过XMLHttpRequest与服务器交换数据 服务器数据通过json或者xml格式返回 浏览器通过js+css渲染展示数据 GET 创建xhr open打开连接 监听readystate readyState 4准备状态完毕 status 状态码200 响应成功 send 发送 <button id="btn">点击</button> <p id="content"></p
木子-前端-ajax传值与接收最简单的方式
紅塵的博客
12-17 7304
之前写过一篇，结果过了这么1年多，我发现我自己都用着不太对劲，所以特地重新写一份 前台： 首先我们需要引入jquery.js或者ajax.js 但是两个不可以兼容，因为jquery中本身包含了ajax的方法，所以我个人习惯直接引入jquery。html和jsp的引入方式略有区别jsp因为是在html的基础上做了改进所以引入可以</>标签自己结束。而htm了引入j...
前端项目-jasmine-ajax.zip
09-02
前端项目-jasmine-ajax,A library for faking Ajax responses in your Jasmine suite
前端项目-eldarion-ajax.zip
09-03
前端项目-eldarion-ajax,a library for adding declarative ajax functionality to your website
使用dynatrace-ajax跟踪JavaScript的性能
10-29
DynaTrace 致力于分析后台应用性能的表现已经好几年了，最近，他们通过发布dynaTrace Ajax Edition进入了前端性能分析领域. 它是一个运行在IE下的BHO免费工具. 虽然我喜欢Firefox和它下面的所有插件，但我知道基于IE...
前端学习19 - Ajax
m0_46896340的博客
04-10 967
Ajax的请求响应
Niucode的博客
04-23 482
Ajax的全称是Asynchronous JavaScript and XML，即异步的JavaScript和XML（传输储存数据）。它是一种在不重新加载整个页面的情况下更新部分页面的技术。
2024-04-22(AJAX)
cxr的博客
04-22 954
使用浏览器的XMLHttpRequest对象和服务器进行通信浏览器网页中，使用Ajax技术（XMLHttpRequest对象）发起获取服务器数据的请求，服务器将数据给前端，前端拿到数据后，展示到网页。事件委托，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，而不是目标元素。当事件响应到目标元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。
AJAX——案例
weixin_48719464的博客
04-23 319
需求：尽可能同时展示所有商品分类到页面上index.html代码index.css代码。
Ajax和axios基础
最新发布
qq_55630615的博客
04-24 277
异步的JavaScript和XML。
前端工程化01-复习jQuery当中的AJAX
沉睡的猫的博客
04-21 367
AJAX全称（Asynchronous JavaScript And XML）是异步的 JavaScript 和 XML，它描述了一组用于构建网站和Web应用程序的开发技术。简单点说，就是使用对象与服务器通信。它可以使用JSON，XML，HTML 和 text 文本等格式发送和接收数据。AJAX最吸引人的就是它的“异步”特性。也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。
【前端】数组的常用处理函数
lcukyNwa的博客
04-22 401
item------->每个元素值 (必)index----->索引（可选）arr-------- >当前数组（可选）推荐vscode的一款插件来写以下的demo，该插件可以直接在js文件中显示结果，搜 Quokka.js用这个插件去新建一个js文件，直接就运行在node上了forEach不会返回一个新的数组，里面改值会影响原数组，其他方法不影响原数组map可以返回新数组 用于映射，如每个元素都加倍或执行其他转换操作every返回一布尔值，需数组中全部满足。
C++ WebServer的细节理解
我的博客
04-22 594
在非阻塞模式下，如果 I/O 操作不能立即完成（例如，因为没有数据可读 或 写缓冲区满），系统不会让调用进程阻塞等待，而是立即返回一个错误（通常为 EAGAIN 或 EWOULDBLOCK）。先查询文件描述符 fd 当前的标志，然后将 O_NONBLOCK 标志加入其中，并通过 F_SETFL 来更新文件描述符，最终实现将该文件描述符切换为非阻塞模式。这意味着，如果没有待处理的连接请求（即没有客户端尝试连接到服务器），accept() 会一直阻塞，直到有新的连接请求到达或发生其他特定条件（如超时）为止。
SpringBoot项目打包分离高阶操作
Record Little
04-23 585
虽然传输jar包 比较大，但是安全性、稳定性比较高，不需要关注pom.xml 添加了新的依赖、更新了版本号等等影响版本功能的操作。关注maven的特性， profiles即可满足， 根据不同的activation 状态，激活不同的build操作。每次修改一小部分代码或仅仅更新某个依赖jar包时，都需要重新进行整个项目的构建、打包、上传和部署。但是当你的项目趋于稳定，只有业务上的逻辑变更时，如果使用分离版本，可以加快迭代、更新的速度。弊端： 需要配置IDE命令，修改依赖时需要同时修改2处。
webman 事务回滚失效问题记录
juan9872的博客
04-21 743
webman是一款基于workerman开发的高性能HTTP服务框架。webman用于替代传统的php-fpm架构，提供超高性能可扩展的HTTP服务。你可以用webman开发网站，也可以开发HTTP接口或者微服务。除此之外，webman还支持自定义进程，可以做workerman能做的任何事情，例如websocket服务、物联网、游戏、TCP服务、UDP服务、unix socket服务等等。
管理系统前端js ajax
09-22
管理系统前端是一个重要的任务，它可以通过使用JavaScript和AJAX技术来实现。在前端开发中，JavaScript是一种用于在网页上添加动态功能和交互性的编程语言，而AJAX是一种用于在不刷新整个网页的情况下向服务器发送和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值