引言

在现代Web开发中，异步请求（Ajax）是一项不可或缺的技术。它允许我们在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。本文将详细介绍JavaScript中的异步请求技术，包括XMLHttpRequest和Fetch API的使用，并附有案例讲解。

XMLHttpRequest

XMLHttpRequest（XHR）是一种在无需重新加载整个页面的情况下，能够请求从服务器获取数据、发送数据的技术。

基本用法

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();
        

案例讲解：获取用户信息

假设我们有一个API，可以通过GET请求获取用户信息。以下是一个完整的示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/user/123', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var user = JSON.parse(xhr.responseText);
        console.log('User Name:', user.name);
        console.log('User Email:', user.email);
    }
};
xhr.send();
        

Fetch API

Fetch API提供了一个JavaScript接口，用于访问和操纵HTTP管道的各个部分，如请求和响应。它是XMLHttpRequest的现代替代方案。

基本用法

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
        

案例讲解：获取用户列表

假设我们有一个API，可以通过GET请求获取用户列表。以下是一个完整的示例：

fetch('https://api.example.com/users')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.json();
    })
    .then(users => {
        users.forEach(user => {
            console.log('User ID:', user.id);
            console.log('User Name:', user.name);
        });
    })
    .catch(error => console.error('Error:', error));
        

总结

本文介绍了JavaScript中的两种主要异步请求技术：XMLHttpRequest和Fetch API。通过案例讲解，我们了解了如何使用这些技术来与服务器进行通信并更新网页内容。在实际开发中，你可以根据需求选择适合的技术。