AJAX 学习
1. AJAX简介
AJAX（Asynchronous JavaScript And XML）是一种用于创建交互式网页的技术，允许在不刷新页面的情况下与服务器进行通信，从而实现页面的局部更新。
1.1 AJAX的优点
- 无需刷新页面：可以与服务器进行异步通信，无需重新加载整个页面。
- 提升用户体验：页面更新更加流畅，用户操作不会被中断。
- 减轻服务器负担：只传输必要的数据，而不是整个页面内容。
1.2 AJAX的缺点
- 无浏览历史：无法通过浏览器的后退按钮回到上一状态。
- 跨域问题：默认情况下，不能从一个域名向另一个域名发送AJAX请求（同源策略）。
- 搜索引擎优化（SEO）不友好：搜索引擎可能无法正确索引动态加载的内容。
2. AJAX的实现方式
AJAX可以通过多种方式实现，包括原生JavaScript、jQuery、fetch函数以及第三方库（如axios）。
2.1 原生AJAX（使用XMLHttpRequest）
原生AJAX通过XMLHttpRequest对象实现，是AJAX功能的基础。
核心步骤
- 创建
XMLHttpRequest对象
var xhr = new XMLHttpRequest();
- 设置请求信息
xhr.open(method, url); // method: 请求方法（GET、POST等），url: 请求地址
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
- 发送请求
xhr.send(body); // GET请求不传body参数，POST请求需要传入请求体
- 接收响应
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var responseText = xhr.responseText; // 获取响应文本
console.log(responseText);
}
};
2.2 jQuery中的AJAX
jQuery提供了简化的AJAX方法，如$.get、$.post和$.ajax。
示例
$.ajax({
url: 'http://127.0.0.1:8000/server',
type: 'GET',
dataType: 'json', // 响应数据类型
success: function(data) {
console.log(data);
},
error: function() {
console.log('请求失败');
}
});
2.3 Fetch API
Fetch是现代浏览器提供的原生API，用于发送HTTP请求。它返回一个Promise对象，支持Promise链式调用。
示例
fetch('http://127.0.0.1:8000/server', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}).then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
2.4 Axios
Axios是一个基于Promise的HTTP客户端，支持浏览器和Node.js环境。它提供了简洁的API和丰富的功能，如拦截请求和响应、自动转换JSON数据等。
示例
axios.get('http://127.0.0.1:8000/server')
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));
3. HTTP相关知识
AJAX的核心是通过HTTP协议与服务器进行通信。了解HTTP请求和响应的基本结构对于使用AJAX非常重要。
3.1 HTTP请求报文
- 请求行：
method URL 协议版本（如：GET /index.html HTTP/1.1） - 请求头：包含各种请求信息（如
Host、Content-Type、Cookie等） - 请求体：用于POST请求，包含要发送给服务器的数据
3.2 HTTP响应报文
- 响应状态行：
status statusText（如：200 OK） - 响应头：包含响应信息（如
Content-Type、Content-Length等） - 响应体：服务器返回的数据（如HTML、JSON、图片等）
3.3 常见的HTTP状态码
- 200 OK：请求成功
- 401 Unauthorized：未授权
- 404 Not Found：资源未找到
- 500 Internal Server Error：服务器内部错误
3.4 请求方法
- GET：用于从服务器获取数据
- POST：用于向服务器提交数据
- PUT：用于更新服务器上的数据
- DELETE：用于删除服务器上的数据
4. 数据传输格式
AJAX的数据传输格式主要有以下几种：
- application/x-www-form-urlencoded：键值对格式（如
name=Tom&age=20） - application/json：JSON格式（如
{"name": "Tom", "age": 20}） - multipart/form-data：用于文件上传
5. 跨域问题
AJAX默认遵守同源策略，即协议、域名和端口号必须完全相同。跨域问题可以通过以下方式解决：
- JSONP：利用