JavaScript的异步ajax详解

异步请求的概念

异步请求指的是客户端提交请求给后台服务器后，不会一直等待直到服务器响应。而是可以在等待响应的过程中继续进行其他操作。当服务器响应完成后，客户端会立即收到响应并采取相应措施。这样可以有效提升用户体验，提高网站的性能。

ajax简介

ajax（Asynchronous JavaScript and XML），是浏览器提供的一种用于异步请求的技术。通过使用ajax，可以在不刷新网页的情况下向服务器请求数据，并通过JavaScript来更新页面内容。

javascript中的ajax请求

// 创建xhr对象
let xhr = new XMLHttpRequest();

// 设置请求方式和请求接口地址
xhr.open('GET', 'http://127.0.0.1:8000/api/users');

// 发送请求
xhr.send();

// 监听状态改变事件
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
}

以上是JavaScript实现ajax请求的基本代码。首先创建XMLHttpRequest对象，并通过open()方法设置请求方式和请求地址，然后通过send()方法发送请求。然后监听onreadystatechange事件，当状态发生改变时，判断状态是否为4，表示请求完成，同时判断状态码是否为200，表示请求成功。如果是，则服务器返回的响应数据通过responseText属性获取。

jquery中的ajax请求

// 使用get请求方式获取http://127.0.0.1:8000/api/users接口的数据
$.get('http://127.0.0.1:8000/api/users', function(data, status) {
    console.log(data);
    console.log(status);
});

jquery是一个非常流行的JavaScript框架，它提供了非常方便的ajax方法，如上所示。通过$.get()方法设置请求类型和请求地址，并传递回调函数。当服务器响应完成后，回调函数会被调用，并传递响应数据和状态码两个参数。

示例1

// 创建xhr对象
let xhr = new XMLHttpRequest();

// 设置请求方式和请求接口地址
xhr.open('POST', 'http://127.0.0.1:8000/api/login');

// 设置请求头信息
xhr.setRequestHeader('content-type', 'application/json');

// 发送请求
xhr.send(JSON.stringify({
    username: 'admin',
    password: '123456'
}));

// 监听状态改变事件
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
}

以上是一个示例，在提交登录信息时，通过ajax异步请求提交登录信息给服务器。设置请求方式为POST，并设置请求头信息为application/json。给请求内容传递JSON字符串参数。

示例2

// 使用post请求方式获取http://127.0.0.1:8000/api/users接口的数据
$.post('http://127.0.0.1:8000/api/users', {
    name: 'test',
    gender: 'male',
    age: 20
}, function(data, status) {
    console.log(data);
    console.log(status);
});

以上是另一个示例，通过jquery异步请求提交添加用户信息给服务器。设置请求类型为POST，并通过传递JSON格式的数据参数。

以上是JavaScript中异步ajax请求的一个详细攻略，包含两个示例的说明。