原生Ajax技术详解与使用教程

一、什么是Ajax？

Ajax（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术。它允许网页在不重新加载整个页面的情况下，与服务器进行异步通信，从而更新部分页面内容。Ajax的核心是通过XMLHttpRequest对象或fetch API与服务器交换数据。

二、Ajax的核心原理

异步通信：Ajax通过异步方式发送请求，不会阻塞用户操作。
局部更新：只更新页面需要变化的部分，而不是整个页面。
数据格式：虽然名字中包含XML，但现代Ajax更多使用JSON格式传输数据。

三、原生Ajax的实现步骤

1. 创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

2. 配置请求

使用open方法配置请求类型（GET/POST）、URL和是否异步。

xhr.open('GET', 'https://api.example.com/data', true);

3. 发送请求

xhr.send(); // 对于GET请求，send方法不需要参数

4. 监听请求状态变化

通过onreadystatechange事件监听请求状态。

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) { // 请求完成
        if (xhr.status === 200) { // 请求成功
            console.log(xhr.responseText); // 处理响应数据
        } else {
            console.error('请求失败，状态码：' + xhr.status);
        }
    }
};

四、完整示例：GET请求

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            console.log(data);
        } else {
            console.error('请求失败，状态码：' + xhr.status);
        }
    }
};
xhr.send();

五、POST请求的实现

1. 配置请求头（Content-Type）

xhr.open('POST', 'https://api.example.com/submit', true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');

2. 发送数据

var data = JSON.stringify({ name: 'John', age: 30 });
xhr.send(data);

3. 完整POST请求示例

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/submit', true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log('提交成功：', xhr.responseText);
        } else {
            console.error('提交失败，状态码：' + xhr.status);
        }
    }
};
var data = JSON.stringify({ name: 'John', age: 30 });
xhr.send(data);

六、处理响应数据

1. JSON格式

var data = JSON.parse(xhr.responseText);
console.log(data.name); // 假设响应数据为 { "name": "John" }

2. XML格式（较少使用）

var xmlDoc = xhr.responseXML; // 直接获取XML DOM对象
var name = xmlDoc.getElementsByTagName('name')[0].textContent;

七、错误处理

1. 网络错误

通过onerror事件捕获网络错误。

xhr.onerror = function() {
    console.error('网络错误');
};

2. 超时处理

设置超时时间，并通过ontimeout事件处理。

xhr.timeout = 5000; // 5秒超时
xhr.ontimeout = function() {
    console.error('请求超时');
};

八、现代替代方案：fetch API

1. 基本用法

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('请求失败：', error));

2. POST请求

fetch('https://api.example.com/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name: 'John', age: 30 })
})
.then(response => response.json())
.then(data => console.log('提交成功：', data))
.catch(error => console.error('提交失败：', error));

九、原生Ajax与fetch API的对比

| 特性 | 原生Ajax | fetch API |
|---------------------|-----------------------------------|--------------------------------|
| 语法复杂度 | 繁琐，需要处理多种状态 | 简洁，基于Promise |
| 跨域处理 | 需要手动设置CORS头 | 自动处理CORS |
| 超时处理 | 需要手动实现 | 不支持，需通过AbortController |
| 响应流处理 | 支持 | 支持（通过Response对象） |
| 兼容性 | 支持IE7+ | 不支持IE |

十、实践

优先使用fetch API：除非需要兼容旧版浏览器，否则推荐使用fetch API。
处理错误：始终添加错误处理逻辑，避免请求失败时程序崩溃。
安全性：避免在URL中传递敏感信息，使用HTTPS加密通信。
性能优化：合并请求，减少不必要的网络开销。

十一、常见问题解答

1. Ajax请求跨域问题如何解决？

CORS：服务器设置Access-Control-Allow-Origin头。
JSONP（仅限GET请求）：通过<script>标签加载跨域资源。

2. 如何取消Ajax请求？

原生Ajax：使用xhr.abort()方法。
fetch API：使用AbortController。

3. Ajax请求超时怎么办？

设置xhr.timeout属性，并在ontimeout事件中处理。

通过的讲解，你应该已经掌握了原生Ajax的基本原理、实现步骤以及现代替代方案。在实际开发中，建议根据项目需求选择合适的方案，并遵循实践。