随着web应用越来越复杂，异步javascript和xml (ajax) 技术被越来越多地用来实现动态web页面。ajax允许你通过在后台发送异步请求来动态更新web页面，而不必刷新整个页面。在这篇文章中，我们将探讨一下javascript中ajax的使用方法。
- 创建XMLHttpRequest对象
XMLHttpRequest对象是Ajax的核心。它负责发送HTTP请求和接收服务器响应。在 JavaScript 中，你可以通过创建 XMLHttpRequest 对象来启动一个 Ajax 请求。
var xhr = new XMLHttpRequest();
如果浏览器不支持 XMLHttpRequest，可以考虑使用 ActiveXObject，如下所示：
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
- 发送 HTTP 请求
当创建完 XMLHttpRequest 对象后，可以设置请求的 URL 和方法，然后发送该请求。
xhr.open('GET', 'http://example.com/data', true);
xhr.send();
在上面的代码中，我们使用xhr.open()方法来以GET方式打开一个URL。第三个参数标示异步请求。
要标示以 POST 方式发送请求，可以使用以下代码：
xhr.open('POST', 'http://example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('name1=value1&name2=value2');
在上面的代码中，我们使用 xhr.setRequestHeader() 方法设置 HTTP 头信息，并使用send()方法发送请求。
- 发送表单数据
如果你需要发送表单数据，可以使用 FormData 对象。
var formData = new FormData();
formData.append('username', 'john');
formData.append('password', 'secret');
xhr.open('POST', 'http://example.com/login');
xhr.send(formData);
在上面的代码中，我们使用 FormData 对象来发送表单数据，然后使用发送方法来发送请求。
- 处理服务器响应
在触发 XMLHttpRequest 的 readyStateChange 事件时，可以通过检查 HTTP 响应代码和响应文本来判断请求是否成功。下面是一些常见状态代码：
- 200：OK
- 404：找不到页面
- 500：服务器错误
以下是一个简单的处理函数：
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
在上面的代码中，我们使用 xhr.readyState 属性，该属性返回 XMLHttpRequest 对象的状态。如果 readyState 为 4，响应已完成。
xhr.status 属性返回 HTTP 状态代码。如果状态代码为 200，则表示成功。
xhr.responseText 属性包含服务器响应的文本。
- 处理错误
如果服务器响应的 HTTP 状态代码不是200，则认为请求失败。发生错误时，可以在给出提示后重试操作。
xhr.onerror = function() {
alert('请求失败，请重试');
};
在上面的代码中，我们使用 xhr.onerror 属性以及 alert() 方法来给出一个错误提示。
- 取消请求
如果需要取消 Ajax 请求，可以使用 xhr.abort() 方法。
xhr.abort();
在上面的代码中，我们使用 xhr.abort() 方法来取消请求。
总结
以上是 Javascript 中 Ajax 的基本用法。Ajax 允许你动态更新 Web 页面，使得 Web 应用变得更加易于使用和响应。当使用 Ajax 时，请记住使用异步请求。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
