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");}

1. 发送 HTTP 请求

当创建完 XMLHttpRequest 对象后，可以设置请求的 URL 和方法，然后发送该请求。

xhr.open('GET', 'http://example.com/data', true);xhr.send();

在上面的代码中，我们使用xhr.open()方法来以GET方式打开一个URL。第三个参数标示异步请求。

立即学习“Java免费学习笔记（深入）”；

要标示以 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()方法发送请求。

1. 发送表单数据

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

var formData = new FormData();formData.append('username', 'john');formData.append('password', 'secret');xhr.open('POST', 'http://example.com/login');xhr.send(formData);

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

1. 处理服务器响应

在触发 XMLHttpRequest 的 readyStateChange 事件时，可以通过检查 HTTP 响应代码和响应文本来判断请求是否成功。下面是一些常见状态代码：

以下是一个简单的处理函数：

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

1. 处理错误

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

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

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

1. 取消请求

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

xhr.abort();

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

总结

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