js 等待ajax执行完毕

在JavaScript中，等待AJAX请求执行完毕通常涉及到异步操作的处理。AJAX（Asynchronous JavaScript and XML）允许网页与服务器进行少量的数据交换，从而避免整个页面的重新加载。以下是一些基础概念和相关解决方案：

基础概念

异步操作：AJAX请求是异步的，这意味着它们不会阻塞代码的执行。当一个AJAX请求被发送时，浏览器会继续执行后续的代码，而不是等待请求完成。
回调函数：一种常见的处理异步操作的方式是使用回调函数。当AJAX请求完成时，回调函数会被调用。
Promise：ES6引入了Promise对象，它提供了一种更优雅的方式来处理异步操作。Promise对象代表一个异步操作的最终完成（或失败）及其结果值。
async/await：这是基于Promise的语法糖，使得异步代码看起来更像同步代码，从而提高代码的可读性和可维护性。

类型

GET请求：用于从服务器获取数据。
POST请求：用于向服务器发送数据。
PUT请求：用于更新服务器上的资源。
DELETE请求：用于删除服务器上的资源。

应用场景

动态内容加载：例如新闻网站的最新文章。
表单提交：用户填写表单后，数据被异步发送到服务器。
实时搜索：用户在搜索框中输入时，实时显示搜索结果。

示例代码

以下是几种等待AJAX执行完毕的方法：

使用回调函数

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

fetchData(function(data) {
    console.log('Data received:', data);
});

使用Promise

function fetchData() {
    return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    resolve(xhr.responseText);
                } else {
                    reject(new Error('Error fetching data'));
                }
            }
        };
        xhr.open('GET', 'https://api.example.com/data', true);
        xhr.send();
    });
}

fetchData()
    .then(data => console.log('Data received:', data))
    .catch(error => console.error('Error:', error));

使用async/await

async function fetchData() {
    return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    resolve(xhr.responseText);
                } else {
                    reject(new Error('Error fetching data'));
                }
            }
        };
        xhr.open('GET', 'https://api.example.com/data', true);
        xhr.send();
    });
}

(async () => {
    try {
        const data = await fetchData();
        console.log('Data received:', data);
    } catch (error) {
        console.error('Error:', error);
    }
})();