在现代 web 开发中，AJAX（Asynchronous JavaScript and XML）技术已经成为了不可或缺的一部分。它使我们能够在不刷新整个页面的情况下，与后端服务器进行异步通信，从而提升了用户体验和页面性能。AJAX 的一个重要特性是可以设定超时时间（timeout），以便在请求时间过长时终止请求并执行相应的操作。本文将介绍 AJAX 中的 async 属性和 timeout 属性，并通过举例说明它们的使用方式和作用。

async 属性

AJAX 中的 async 属性用于指定是否采用异步请求。当 async 属性为 true 时，表示采用异步请求，即发送请求后会继续执行后续代码而不会等待服务器响应。当 async 属性为 false 时，表示采用同步请求，即发送请求后会等待服务器响应后再继续执行后续代码。

function makeAsyncRequest() {
var request = new XMLHttpRequest();
request.open('GET', 'https://api.example.com/data', true); // 异步请求
request.send();
console.log('发送异步请求');
}
function makeSyncRequest() {
var request = new XMLHttpRequest();
request.open('GET', 'https://api.example.com/data', false); // 同步请求
request.send();
console.log('发送同步请求');
}
makeAsyncRequest(); // 输出：发送异步请求
makeSyncRequest(); // 输出：发送同步请求

在上面的例子中，我们通过 XMLHttpRequest 对象发送了两个 GET 请求，一个采用了异步请求，一个采用了同步请求。当执行 makeAsyncRequest() 时，会立即发送异步请求并继续执行后续代码，输出 "发送异步请求"。而当执行 makeSyncRequest() 时，会等待同步请求完成后再执行后续代码，输出 "发送同步请求"。

timeout 属性

AJAX 中的 timeout 属性用于设定超时时间，即在规定的时间内未收到服务器响应时终止请求并执行相应的操作。timeout 属性的单位是毫秒，默认值为 0，表示不设定超时时间。

function makeRequestWithTimeout() {
var request = new XMLHttpRequest();
request.timeout = 2000; // 设置超时时间为 2000 毫秒
request.ontimeout = function() {
console.log('请求超时');
};
request.open('GET', 'https://api.example.com/data', true);
request.send();
}
makeRequestWithTimeout(); // 如果在 2000 毫秒内未收到服务器响应，则输出 "请求超时"

上面的例子中，我们通过 XMLHttpRequest 对象发送了一个 GET 请求，并设置了超时时间为 2000 毫秒。如果在 2000 毫秒内未收到服务器响应，则会触发 ontimeout 事件，输出 "请求超时"。

async 和 timeout 的组合使用

在实际开发中，我们常常需要根据具体的场景来决定是否采用异步请求，并设置合适的超时时间。例如，当用户提交一个表单时，我们可以采用异步请求来发送表单数据，并设置一个适当的超时时间以确保用户不会等待太长时间。

var form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
event.preventDefault();
var request = new XMLHttpRequest();
request.timeout = 5000; // 设置超时时间为 5000 毫秒
request.ontimeout = function() {
console.log('请求超时');
};
request.open('POST', 'https://api.example.com/submit', true);
request.send(new FormData(form));
});

在上面的例子中，我们通过 addEventListener() 方法为表单的 submit 事件绑定了一个事件处理程序。当用户提交表单时，会触发 submit 事件，并发送一个 POST 请求。我们设置了超时时间为 5000 毫秒，如果在 5000 毫秒内未收到服务器响应，则输出 "请求超时"。

结论

通过设置 async 属性和 timeout 属性，我们可以灵活地控制 AJAX 请求的方式和超时时间，从而提升用户体验和页面性能。在实际开发中，要根据具体的场景来选择是否采用异步请求，并合理设置超时时间，以确保请求能够在合理的时间内得到响应。