javascript中ajax用法

随着Web应用越来越复杂，异步JavaScript和XML (Ajax) 技术被越来越多地用来实现动态Web页面。Ajax允许你通过在后台发送异步请求来动态更新Web页面，而不必刷新整个页面。在这篇文章中，我们将探讨一下JavaScript中Ajax的使用方法。

1. 创建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");
}

2. 发送 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()方法发送请求。

3. 发送表单数据

如果你需要发送表单数据，可以使用 FormData 对象。

var formData = new FormData();
formData.append('username', 'john');
formData.append('password', 'secret');

xhr.open('POST', 'http://example.com/login');
xhr.send(formData);

在上面的代码中，我们使用 FormData 对象来发送表单数据，然后使用发送方法来发送请求。

4. 处理服务器响应

在触发 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 属性包含服务器响应的文本。

5. 处理错误

如果服务器响应的 HTTP 状态代码不是200，则认为请求失败。发生错误时，可以在给出提示后重试操作。

xhr.onerror = function() {
  alert('请求失败，请重试');
};

在上面的代码中，我们使用 xhr.onerror 属性以及 alert() 方法来给出一个错误提示。

6. 取消请求

如果需要取消 Ajax 请求，可以使用 xhr.abort() 方法。

xhr.abort();

在上面的代码中，我们使用 xhr.abort() 方法来取消请求。

总结

以上是 Javascript 中 Ajax 的基本用法。Ajax 允许你动态更新 Web 页面，使得 Web 应用变得更加易于使用和响应。当使用 Ajax 时，请记住使用异步请求。