Ajax和Axios的初步学习

The_cute_cat2025-07-07 11:13

Ajax

一、什么是 Ajax？

Ajax (Asynchronous JavaScript and XML) 是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。

主要特性：

  • 异步性 (Asynchronous): 可以在不阻塞用户界面的情况下与服务器进行通信。

  • 局部更新 (Partial Updates): 只更新网页的一部分，而不是整个页面，提高了用户体验。

  • 基于标准： Ajax 不是一种新技术，而是几种现有技术的组合，包括JavaScript, XML, HTML, CSS。

二、Ajax 的核心对象：XMLHttpRequest

XMLHttpRequest (XHR) 对象是 Ajax 的核心。它允许浏览器在后台与服务器进行通信。

三、基本语法和步骤 (XMLHttpRequest)

1.创建 XMLHttpRequest 对象：

javascript 复制代码 
let xhr;

if (window.XMLHttpRequest) {  // 现代浏览器
  xhr = new XMLHttpRequest();
} else {  // IE6, IE5
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2.配置请求 (open 方法)：

javascript 复制代码 
xhr.open(method, url, async, username, password);

  • method: HTTP 请求方法 (GET, POST, PUT, DELETE 等)。通常使用 GET 或 POST。

  • url: 服务器端脚本的 URL。

  • async: (可选) 布尔值，指示请求是否异步执行。 默认为 true（异步）。

  • username: (可选) 用于身份验证的用户名。

  • password: (可选) 用于身份验证的密码。

javascript 复制代码 
xhr.open('GET', 'data.txt', true); // 异步 GET 请求
xhr.open('POST', 'submit.php', true); // 异步 POST 请求

3.设置请求头 (可选)：

javascript 复制代码 
xhr.setRequestHeader(header, value);

  • header: 请求头的名称。

  • value: 请求头的值。

重要： 对于 POST 请求，通常需要设置 Content-Type 请求头。

示例：

javascript 复制代码 
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 常用于 POST
xhr.setRequestHeader('Content-Type', 'application/json'); //  POST 发送 JSON 数据

4.发送请求 (send 方法)：

javascript 复制代码 
xhr.send(body); // body 是要发送的数据

body: (可选) 要发送到服务器的数据。

  • 对于 GET 请求，通常 body 为 null。 数据应该附加到 URL 上（例如：url**?**param1=value1&param2=value2）。

  • 对于 POST 请求，body 可以是：

    • null (如果没有数据要发送)

    • URL 编码的字符串 (例如：param1=value1&param2=value2)

    • JSON 字符串 (需要设置 Content-Type 为 application/json)

    • **FormData**对象

javascript 复制代码 
xhr.send();  // GET 请求，没有数据
xhr.send('name=John&age=30'); // POST 请求，URL 编码的数据
xhr.send(JSON.stringify({name: "John", age: 30}));  // POST 请求，JSON 数据

5.处理服务器响应：

使用 onreadystatechange 事件监听 xhr.readyState 的变化。

javascript 复制代码 
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {  // 请求完成
    if (xhr.status === 200) { // 请求成功
      // 处理响应数据
      let responseText = xhr.responseText; // 字符串形式的响应数据
      let responseXML = xhr.responseXML;  // 如果服务器返回 XML，可以作为 XML 文档访问

      // 根据你的需求更新页面等
      console.log("Response: " + responseText);
    } else {
      // 处理错误
      console.error("请求失败，状态码：" + xhr.status);
    }
  }
};

  • xhr.readyState: 表示请求的状态。

    • 0: 请求未初始化

    • 1: 服务器连接已建立

    • 2: 请求已接收

    • 3: 请求处理中

    • 4: 请求已完成，且响应已就绪

  • xhr.status: HTTP 状态码。

    • 200: "OK" (成功)

    • 404: "Not Found" (未找到)

    • 500: "Internal Server Error" (服务器内部错误) 等等。

四、示例

1.完整的 GET 请求例子

html 复制代码 
<!DOCTYPE html>
<html>
<head>
<title>简单的 Ajax GET 请求</title>
</head>
<body>

<button onclick="loadData()">加载数据</button>
<div id="result"></div>

<script>
function loadData() {
  let xhr;
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        document.getElementById("result").innerHTML = xhr.responseText;
      } else {
        document.getElementById("result").innerHTML = "Error: " + xhr.status;
      }
    }
  };

  xhr.open("GET", "data.txt", true);
  xhr.send();
}
</script>

</body>
</html>

创建一个名为**data.txt** 的文件，内容例如：Hello, Ajax! This is data loaded from the server.

2.完整的 POST 请求例子

html 复制代码 
<!DOCTYPE html>
<html>
<head>
<title>简单的 Ajax GET 请求</title>
</head>
<body>

<button onclick="loadData()">加载数据</button>
<div id="result"></div>

<script>
function loadData() {
  let xhr;
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        document.getElementById("result").innerHTML = xhr.responseText;
      } else {
        document.getElementById("result").innerHTML = "Error: " + xhr.status;
      }
    }
  };

  xhr.open("GET", "data.txt", true);
  xhr.send();
}
</script>

</body>
</html>

创建一个名为**submit.php**的PHP文件（或者其他服务器端语言的文件），例如：

php 复制代码 
<?php
  $name = $_POST["name"];
  echo "你好, " . htmlspecialchars($name) . "!"; // 使用 htmlspecialchars 防止 XSS 攻击
?>

五、使用 FormData 上传文件

FormData 对象提供了一种表示表单数据的键/值对的简单方式，也可以用于上传文件。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
<title>Ajax 上传文件</title>
</head>
<body>

<input type="file" id="fileInput"><br><br>
<button onclick="uploadFile()">上传文件</button>
<div id="result"></div>

<script>
function uploadFile() {
  let xhr;
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        document.getElementById("result").innerHTML = xhr.responseText;
      } else {
        document.getElementById("result").innerHTML = "Error: " + xhr.status;
      }
    }
  };

  const fileInput = document.getElementById("fileInput");
  const file = fileInput.files[0];

  const formData = new FormData();
  formData.append("file", file); // 添加文件到 FormData

  xhr.open("POST", "upload.php", true);
  xhr.send(formData); // 不需要手动设置 Content-Type，浏览器会自动设置
}
</script>

</body>
</html>

创建一个名为**upload.php**的PHP文件（或者其他服务器端语言的文件），例如：

php 复制代码 
<?php
if (isset($_FILES["file"])) {
  $file = $_FILES["file"];

  // 安全起见，你应该进行各种检查，例如文件类型、大小等
  // 示例：
  $allowed_types = array("image/jpeg", "image/png", "application/pdf");
  if (!in_array($file["type"], $allowed_types)) {
    echo "Error: Invalid file type.";
    exit;
  }

  $upload_dir = "uploads/"; // 确保该目录存在，并且有写入权限
  $filename = basename($file["name"]); // 获取文件名
  $target_path = $upload_dir . $filename;

  if (move_uploaded_file($file["tmp_name"], $target_path)) {
    echo "文件上传成功！文件名： " . htmlspecialchars($filename);
  } else {
    echo "文件上传失败。";
  }

} else {
  echo "没有文件上传。";
}
?>

Axios

一、什么是 Axios？

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它允许开发者轻松地发送 HTTP 请求（GET、POST、PUT、DELETE 等），并处理服务器返回的响应。

为什么选择 Axios？

  • 基于 Promise： 可以使用 async/await，使异步代码更易于编写和理解。

  • 浏览器和 Node.js 通用： 同样的代码可以在前后端运行。

  • 自动转换 JSON 数据： 自动将请求数据序列化为 JSON，并自动将响应数据反序列化为 JSON。

  • 拦截器： 可以在请求发送前或响应接收后对数据进行处理（例如，添加认证 Token，处理通用错误）。

  • 取消请求： 可以取消正在进行的请求。

  • 客户端支持防止 CSRF： （通过 XSRF-TOKEN）。

  • 文件上传进度： 支持上传和下载进度的监听。

二、如何安装和引入 Axios？

1. 在浏览器环境 (CDN)：

直接在 HTML 文件中引入，引入后，axios 对象会全局可用。

html 复制代码 
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2. 在 Node.js 或前端项目 (npm/yarn)：

html 复制代码 
npm install axios
# 或者
yarn add axios
javascript 复制代码 
import axios from 'axios'; // ES6 模块
// 或者
const axios = require('axios'); // CommonJS 模块

三、Axios 的基本用法和语法

Axios 提供多种方式来发起 HTTP 请求：

1. axios(config) 方法 (通用请求)

这是最通用的方式，通过传入一个配置对象来定义请求。

javascript 复制代码 
axios({
  method: 'post', // 请求方法
  url: '/user/12345', // 请求 URL
  data: { // POST 请求体数据 (会被自动序列化为 JSON)
    firstName: 'Fred',
    lastName: 'Flintstone'
  },
  headers: { // 请求头
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_TOKEN'
  },
  timeout: 1000, // 请求超时时间，单位毫秒
  params: { // GET 请求参数 (会附加到 URL 后)
    ID: 12345
  }
})
.then(function (response) {
  console.log(response.data); // 服务器响应数据
  console.log(response.status); // HTTP 状态码
  console.log(response.headers); // 响应头
})
.catch(function (error) {
  console.error(error); // 请求失败或服务器返回非 2xx 状态码
});

2. 请求方法别名 (GET, POST, PUT, DELETE 等)

Axios 为常见的 HTTP 方法提供了便捷的别名方法。这些方法接受 URL 作为第一个参数，数据作为第二个参数（POST/PUT等），配置作为第三个参数。

GET 请求：axios.get(url, [config])

javascript 复制代码 
// 获取用户数据
axios.get('/user?ID=12345')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

// 或者通过 params 配置
axios.get('/user', {
  params: {
    ID: 12345
  },
  headers: {'X-Custom-Header': 'foobar'}
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

DELETE 请求：axios.delete(url, [config])

javascript 复制代码 
// 删除用户数据
axios.delete('/user/12345')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

POST 请求：axios.post(url, data, [config])

javascript 复制代码 
// 创建新用户
axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

// 例如上传 FormData
const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('name', 'My Document');

axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data' // 对于 FormData，通常浏览器会自动设置，但显式写明也没错
  }
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

PUT 请求：axios.put(url, data, [config])

javascript 复制代码 
// 更新用户数据
axios.put('/user/12345', {
  age: 30
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

其他方法：**axios.head(url, [config])， axios.options(url, [config])，axios.patch(url, data, [config])**用法与上述类似。

四、Axios 响应结构

无论请求成功与否，Axios 返回的 Promise 都会解析为一个响应对象。

成功响应 (在 .then() 中收到)：

javascript 复制代码 
{
  data: {}, // 服务器提供的响应数据
  status: 200, // HTTP 状态码
  statusText: 'OK', // HTTP 状态信息
  headers: {}, // 响应头
  config: {}, // 请求配置对象
  request: {} // 发出请求的 XMLHttpRequest 对象或 http.ClientRequest 实例
}

错误响应 (在 .catch() 中收到)：

javascript 复制代码 
// error 对象通常包含以下属性：
{
  message: 'Error message', // 错误消息，例如 "Network Error"
  name: 'AxiosError', // 错误名称
  code: 'ERR_BAD_REQUEST', // 错误码，例如 ECONNABORTED (请求超时)
  config: {}, // 请求配置对象
  request: {}, // 发出请求的 XMLHttpRequest 或 http.ClientRequest 实例
  response: { // 如果服务器有响应 (即使是 4xx/5xx 状态码)
    data: {},
    status: 404,
    statusText: 'Not Found',
    headers: {},
    config: {},
    request: {}
  }
}

区分请求成功和服务器错误：

Axios 默认只将 HTTP 状态码为 2xx 的响应视为成功。其他状态码 (如 4xx, 5xx) 都会被视为错误，进入 .catch() 块。你可以在配置中修改这一行为：

javascript 复制代码 
axios.get('/some-data', {
  validateStatus: function (status) {
    return status >= 200 && status < 300 || status === 404; // 允许 2xx 或 404 状态码进入 .then()
  }
})
.then(response => { /* ... */ })
.catch(error => { /* ... */ });

五、Axios 实例 (创建自定义配置的实例)

当你的应用有多个不同配置的 API 地址或请求需求时，创建 Axios 实例非常有用。

javascript 复制代码 
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/', // 基础 URL
  timeout: 5000,
  headers: {'X-Custom-Header': 'foobar'}
});

// 使用实例发送请求
instance.get('/user/12345')
  .then(response => console.log(response.data));

instance.post('/another-endpoint', {
  message: 'Hello'
})
.then(response => console.log(response.data));

所有通过 instance 发送的请求都会继承 instance 的配置。

相关推荐
江城开朗的豌豆9 分钟前
Vue+JSX真香现场：告别模板语法，解锁新姿势！
前端·javascript·vue.js
这里有鱼汤17 分钟前
首个支持A股的AI多智能体金融系统，来了
前端·python
袁煦丞17 分钟前
5分钟搭建高颜值后台！SoybeanAdmin：cpolar内网穿透实验室第648个成功挑战
前端·程序员·远程工作
摸鱼仙人~18 分钟前
Vue.js 指令系统完全指南：深入理解 v- 指令
前端·javascript·vue.js
前端进阶者19 分钟前
支持TypeScript并打包为ESM/CommonJS/UMD三种格式的脚手架项目
前端
星空下的曙光20 分钟前
pnpm vs npm区别对比
前端·npm·node.js
啃火龙果的兔子21 分钟前
React 图标库发布到 npm 仓库
前端·react.js·npm
江城开朗的豌豆22 分钟前
Vue列表渲染的坑：为什么不能用index当key？血泪教训总结！
前端·javascript·vue.js
JiaLin_Denny23 分钟前
如何在在NPM发布一个React组件
前端·react.js·npm·npm组件·npm发布·npm发布组件·npm如何发布组件
第六页第七页序23 分钟前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1，因为在此系统上禁止运行脚本
前端·npm·node.js
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02全球最强模型Grok4，国内已可免费使用！（附教程）03Coze 开源了，送上保姆级私有化部署方案【建议收藏】04扣子开源本地部署教程 丨Coze智能体小白喂饭级指南05KGG转MP3工具|非KGM文件|解密音频06腾讯还是太全面了，限时免费！超全CodeBuddy IDE保姆级教程！（附案例）07【手把手攻略】国家育儿补贴正式开领！一键算清你能拿多少钱？附补贴领取计算器0801-开源版COZE-字节 Coze Studio 重磅开源！保姆级本地安装教程，手把手带你体验09干翻 Typora！MilkUp：完全免费的桌面端 Markdown 编辑器！10coze 开源版本地部署及踩过的坑【喂饭级教程】