网站导航
> 技术文档 > AJAX 概念与 axios 使用_axios 配置thinkphp5 ajax

AJAX 概念与 axios 使用_axios 配置thinkphp5 ajax

网友: 技术文档 2025-07-26 20:18:30

什么是 AJAX？

AJAX（Asynchronous JavaScript and XML）即异步的 JavaScript 和 XML，是一种创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

核心原理：AJAX 通过浏览器内置的 XMLHttpRequest 对象（或 Fetch API）向服务器发送异步请求，获取数据后利用 JavaScript 操作 DOM 更新页面内容。这种技术改变了传统的同步请求方式，大大提升了用户体验。

如何使用 AJAX？

现代前端开发中，我们通常使用封装好的库如 axios 来简化 AJAX 请求。以下是基本使用步骤：

  1. 创建 XMLHttpRequest 对象（或使用 axios/Fetch）
  2. 配置请求方法和 URL
  3. 设置请求头（如果需要）
  4. 发送请求
  5. 处理响应数据

axios 的使用

axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js 环境。它比原生 AJAX 更简单易用，功能更强大。

安装 axios

直接在 HTML 中引入<script src=\"https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js\"></script>

基本使用

// GET 请求axios.get(\'/user?ID=12345\') .then(response => { console.log(response.data); }) .catch(error => { console.log(error); });// POST 请求axios.post(\'/user\', { firstName: \'John\', lastName: \'Doe\' }) .then(response => { console.log(response); }) .catch(error => { console.log(error); });

认识 URL

什么是 URL？

URL（Uniform Resource Locator）即统一资源定位符，是互联网上标准资源的地址。

URL 的组成

一个完整的 URL 通常包括以下几个部分：

https://www.example.com:8080/path/to/resource?query=string#fragment
  1. 协议：https:// - 通信协议（HTTP/HTTPS/FTP 等）
  2. 域名：www.example.com - 服务器的地址
  3. 端口：:8080 - 服务器端口（HTTP 默认 80，HTTPS 默认 443）
  4. 资源路径：/path/to/resource - 服务器上资源的路径
  5. 查询参数：?query=string - 发送给服务器的额外参数
  6. 片段标识：#fragment - 页面内的锚点位置

axios 查询参数

在 axios 中，可以通过 params 配置项添加查询参数：

axios.get(\'/user\', { params: { ID: 12345, name: \'John\' }});

常用请求方法和数据提交

常用请求方法

  1. GET：请求指定的资源（查询）
  2. POST：向指定资源提交数据（创建）
  3. PUT：替换指定的资源（全量更新）
  4. PATCH：部分修改资源（部分更新）
  5. DELETE：删除指定资源

axios 请求配置

axios 请求可以配置多种选项：

axios({ method: \'post\', // 请求方法 url: \'/user/123\', // 请求地址 data: { // 请求体数据 firstName: \'John\', lastName: \'Doe\' }, headers: { // 自定义请求头 \'X-Requested-With\': \'XMLHttpRequest\' }, timeout: 1000, // 超时时间 params: { // URL 参数 ID: 12345 }});

axios 错误处理

axios 提供了完善的错误处理机制：

axios.get(\'/user/12345\') .then(response => { console.log(response.data); }) .catch(error => { if (error.response) { // 服务器返回了响应，但状态码不在 2xx 范围内 console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if (error.request) { // 请求已发出，但没有收到响应 console.log(error.request); } else { // 设置请求时发生错误 console.log(\'Error\', error.message); } console.log(error.config); });

HTTP 协议-报文

请求报文

格式：

请求行（方法 URL 协议版本）请求头（多个键值对）空行请求体（可选）

示例：

POST /login HTTP/1.1Host: example.comContent-Type: application/jsonContent-Length: 42{\"username\":\"admin\",\"password\":\"123456\"}

响应报文

格式：

状态行（协议版本 状态码 状态描述）响应头（多个键值对）空行响应体（可选）

示例：

HTTP/1.1 200 OKContent-Type: application/jsonContent-Length: 30{\"status\":\"success\",\"data\":{}}

HTTP 响应状态码

  1. 1xx：信息性状态码（请求已被接收，继续处理）
  2. 2xx：成功状态码（请求已成功处理）
    • 200 OK
    • 201 Created
    • 204 No Content
  3. 3xx：重定向状态码（需要进一步操作）
    • 301 Moved Permanently
    • 302 Found
    • 304 Not Modified
  4. 4xx：客户端错误状态码（请求有语法错误或无法实现）
    • 400 Bad Request
    • 401 Unauthorized
    • 403 Forbidden
    • 404 Not Found
  5. 5xx：服务器错误状态码（服务器未能实现合法请求）
    • 500 Internal Server Error
    • 502 Bad Gateway
    • 503 Service Unavailable

接口文档

接口文档是前后端协作的重要依据，通常包含：

  • 接口地址
  • 请求方法
  • 请求参数（类型、是否必需、描述）
  • 响应数据格式
  • 可能的错误码

form-serialize 插件

form-serialize 是一个方便的表单序列化工具，可以将表单数据转换为对象或查询字符串。

使用示例：

const form = document.querySelector(\'form\');const data = serialize(form, { hash: true }); // 返回对象// 或const queryString = serialize(form); // 返回查询字符串

与 axios 结合使用：

document.querySelector(\'form\').addEventListener(\'submit\', function(e) { e.preventDefault(); const data = serialize(this, { hash: true }); axios.post(\'/api/submit\', data) .then(response => { console.log(response.data); });});
网络标签：

相关问题