Ajax
一、什么是 Ajax？
Ajax (Asynchronous JavaScript and XML) 是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。
主要特性：
-
异步性 (Asynchronous): 可以在不阻塞用户界面的情况下与服务器进行通信。
-
局部更新 (Partial Updates): 只更新网页的一部分，而不是整个页面，提高了用户体验。
-
基于标准： Ajax 不是一种新技术，而是几种现有技术的组合，包括JavaScript, XML, HTML, CSS。
二、Ajax 的核心对象：XMLHttpRequest
XMLHttpRequest (XHR) 对象是 Ajax 的核心。它允许浏览器在后台与服务器进行通信。
三、基本语法和步骤 (XMLHttpRequest)
1.创建 XMLHttpRequest 对象：
let xhr;if (window.XMLHttpRequest) { // 现代浏览器xhr = new XMLHttpRequest();
} else { // IE6, IE5xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
2.配置请求 (open 方法)：
xhr.open(method, url, async, username, password);
-
method: HTTP 请求方法 (GET, POST, PUT, DELETE 等)。通常使用 GET 或 POST。 -
url: 服务器端脚本的 URL。 -
async: (可选) 布尔值，指示请求是否异步执行。 默认为true（异步）。 -
username: (可选) 用于身份验证的用户名。 -
password: (可选) 用于身份验证的密码。
xhr.open('GET', 'data.txt', true); // 异步 GET 请求
xhr.open('POST', 'submit.php', true); // 异步 POST 请求
3.设置请求头 (可选)：
xhr.setRequestHeader(header, value);
-
header: 请求头的名称。 -
value: 请求头的值。
重要： 对于 POST 请求，通常需要设置 Content-Type 请求头。
示例：
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 常用于 POST
xhr.setRequestHeader('Content-Type', 'application/json'); // POST 发送 JSON 数据
4.发送请求 (send 方法)：
xhr.send(body); // body 是要发送的数据
body: (可选) 要发送到服务器的数据。
-
对于
GET请求，通常body为null。 数据应该附加到 URL 上（例如：url?param1=value1¶m2=value2）。 -
对于
POST请求，body可以是：-
null(如果没有数据要发送) -
URL 编码的字符串 (例如：
param1=value1¶m2=value2) -
JSON 字符串 (需要设置
Content-Type为application/json) -
FormData对象
-
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 的变化。
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 请求例子
<!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 请求例子
<!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$name = $_POST["name"];echo "你好, " . htmlspecialchars($name) . "!"; // 使用 htmlspecialchars 防止 XSS 攻击
?>
五、使用 FormData 上传文件
FormData 对象提供了一种表示表单数据的键/值对的简单方式，也可以用于上传文件。
<!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); // 添加文件到 FormDataxhr.open("POST", "upload.php", true);xhr.send(formData); // 不需要手动设置 Content-Type，浏览器会自动设置
}
</script></body>
</html>
创建一个名为upload.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 对象会全局可用。
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
2. 在 Node.js 或前端项目 (npm/yarn)：
npm install axios
# 或者
yarn add axios
import axios from 'axios'; // ES6 模块
// 或者
const axios = require('axios'); // CommonJS 模块
三、Axios 的基本用法和语法
Axios 提供多种方式来发起 HTTP 请求：
1. axios(config) 方法 (通用请求)
这是最通用的方式，通过传入一个配置对象来定义请求。
axios({method: 'post', // 请求方法url: '/user/12345', // 请求 URLdata: { // 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])
// 获取用户数据
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])
// 删除用户数据
axios.delete('/user/12345').then(response => console.log(response.data)).catch(error => console.error(error));
POST 请求：axios.post(url, data, [config])
// 创建新用户
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])
// 更新用户数据
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() 中收到)：
{data: {}, // 服务器提供的响应数据status: 200, // HTTP 状态码statusText: 'OK', // HTTP 状态信息headers: {}, // 响应头config: {}, // 请求配置对象request: {} // 发出请求的 XMLHttpRequest 对象或 http.ClientRequest 实例
}
错误响应 (在 .catch() 中收到)：
// 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() 块。你可以在配置中修改这一行为：
axios.get('/some-data', {validateStatus: function (status) {return status >= 200 && status < 300 || status === 404; // 允许 2xx 或 404 状态码进入 .then()}
})
.then(response => { /* ... */ })
.catch(error => { /* ... */ });
五、Axios 实例 (创建自定义配置的实例)
当你的应用有多个不同配置的 API 地址或请求需求时，创建 Axios 实例非常有用。
const instance = axios.create({baseURL: 'https://some-domain.com/api/', // 基础 URLtimeout: 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 的配置。
