如果您曾经在网页中使用过无需刷新页面即可获取数据的功能，那么您就已经接触过AJAX了。AJAX（Asynchronous JavaScript and XML, 异步JavaScript和XML）可以实现在不刷新页面的情况下，与服务器进行异步数据交互，从而改善了用户的体验。本文将为您讲解AJAX实例，以及如何使用AJAX来实现异步数据交互。

　　一、AJAX实例介绍

　　1.1 GET方式和POST方式

　　使用AJAX的第一步就是创建XMLHttpRequest对象，这是AJAX最基本的对象之一。然后，通过该对象来实现异步交互。以GET方式和POST方式提交请求是AJAX中经常使用的两种方式，如下所示：

　　```javascript

　　var xhr = new XMLHttpRequest();

　　xhr.open(”GET”, “XXX.php?name=ajax&id=001”, true);

　　xhr.send();

　　```

　　GET方式是最简单的一种方式，通过URL携带参数发送请求，所以在发送请求的URL中，需要明确携带参数。POST方式相对复杂一些，POST请求需要通过send()方法手工设置请求体的参数，示例如下：

　　```javascript

　　var xhr = new XMLHttpRequest();

　　xhr.open("POST", "XXX.php", true);

　　xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

　　xhr.send("name=ajax&id=001");

　　```

　　当然，还有其它发送方式，如：

　　var xhr = new XMLHttpRequest();

　　xhr.open(“PUT”, “XXX.php”, true);

　　xhr.send(“name=ajax&id=001”);

　　但是，这里不作太多的介绍了。

　　1.2 XMLHttpRequest对象的readyState和status参数

　　当使用XMLHttpRequest发送请求时，它的readyState和status参数具有非常重要的作用。readyState表示XMLHttpRequest对象状态的变化情况，值有0、1、2、3、4五个，它们的含义如下：

　　- 0：请求还未初始化

　　- 1：服务器连接已建立

　　- 2：请求已接收

　　- 3：请求处理中

　　- 4：请求已完成，且响应已准备好

　　status表示服务器的响应状态码。200表示OK，404表示“未找到”，这些在web开发中是比较常见的状态码。如果服务器没有正确地响应请求，那么status的返回值就无法为200，它的值在这种情况下就会显示错误状态码。

　　很容易想到，readyState和status对于实现AJAX实例非常重要，那么用如下示例来直观地“看”一下这两个参数：

　　```javascript

　　var xhr=new XMLHttpRequest();

　　xhr.onreadystatechange=function(){

　　 if(xhr.readyState==4&&xhr.status==200){

　　 document.getElementById("test").innerHTML=xhr.responseText;

　　 }

　　}

　　xhr.open("GET","xxx.php",true);

　　xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

　　xhr.send();

　　```

　　当请求完成时（readyState变化到4），如果服务器正确响应（status为200），那么我们就可以处理服务器的响应了——在HTML页面中显示从服务器返回的数据。

　　1.3 AJAX实例-简单示例解析

　　能够理解AJAX，我们便可以很轻松地实现一个AJAX实例。下面是一个简单的AJAX实例，它可以获取数据并更新同一页面上的一些内容。

　　```html