AJAX与HTTP协议详解及实战应用

ys指风不买醉
182 阅读2分钟

深夜不是刷短视频的时候，是睡觉或是刷课的时间。看了下黑马关于axios相关视频讲解，写一篇知识点回顾。本文详细介绍了AJAX的基本概念、HTTP协议的关键组成部分以及如何使用axios库来简化AJAX请求，还有错误处理技巧

一、引言

AJAX（Asynchronous JavaScript And XML）是一种在不重新加载整个网页的情况下更新部分网页的技术。它允许Web应用程序异步地从服务器检索数据，并使用JavaScript处理这些数据以更新页面的部分内容。

image.png

二、AJAX定义与优势

定义： AJAX是异步的JavaScript和XML技术的结合，利用XMLHttpRequest对象与服务器通信。它可以使用JSON、XML、HTML和文本等格式发送和接收数据。

优势：

  1. 无需刷新即可获得数据：用户可以在不离开当前页面的情况下完成操作。
  2. 提高用户体验：减少了用户的等待时间，增强了交互性。
  3. 减轻服务器负担：只传输必要的数据，减少带宽消耗。

三、URL组成与HTTP协议

URL组成：

  • 协议：如http或https。
  • 域名：如www.example.com。
  • 资源路径：指定要访问的具体资源。
image.png

HTTP协议： HTTP协议规定了浏览器发送及服务器返回内容的格式。响应报文包括：

  1. 状态行：包含协议版本、状态码和描述状态的文字。
  2. 响应头：携带附加信息，如Content-Type。
  3. 空行：分隔响应头和响应体。
  4. 响应体：实际的数据内容。

image.png

四、请求方法与axios配置

请求方法： POST用于提交数据，GET用于查询数据。

axios核心配置：

  • url：请求URL地址。
  • method：请求方法，默认为GET。
  • params：查询参数。
  • data：提交数据。
axios({
  url: '目标资源地址',
  method: 'get/post',
  params: { 参数名: 值 },
  data: { 参数名: 值 }
})

image.png

五、错误处理与实战案例

错误处理： 当请求失败时，可以通过 Axios 的 .catch() 方法捕获并处理错误。

实战案例： 假设有一个注册功能，如果尝试用已存在的用户名再次注册，服务器将返回一个错误消息。客户端应能正确解析并显示该错误信息。

axios.post('/register', {
  username: 'it007',
  password: '123456'
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  if (error.response) {
    // 请求已发出，但服务器响应状态码不在 2xx 范围内
    console.error(error.response.data.message);
  } else {
    // 处理其他类型的错误，如网络问题等
    console.error('Error:', error.message);
  }
});

在这个示例中，通过检查 error.response 是否存在来区分不同的错误类型，并正确处理服务器返回的错误信息。

Day1结课~~~

avatar
文章
阅读
粉丝