AJAX及其工作原理

AJAX的全称是Asynchronous JavaScript and XML（异步的JavaScript和XML）

AJAX不是一种编程语言，而是一种技术。AJAX能够在不重新加载整个页面的情况下，与服务器交换数据并更新网页部分信息。

在那些需要频繁刷新的web应用中，使用AJAX技术，能够有效提升用户体验。我们使用的很多应用都采用了AJAX技术，包括：谷歌地图、新浪微博、腾讯微博、开心网、人人网等。

工作原理

AJAX的基础是XMLHttpRequest。现代的所有浏览器几乎都支持XMLHttpRequest对象。XMLHttpRequest用于在后台与服务器交换数据，这是在不重新加载整个网页，只更新其中部分的关键。

1、创建XMLHttpRequest对象

所有的现代浏览器（IE7+、Firefox、Chrome、Safari以及Opera）均内建XMLHttpRequest对象。创建XMLHttpRequest的语法如下：

var xmlhttp = new XMLHttpRequest();

2、向服务器发送请求

使用XMLHttpRequest对象的open()和send()方法来实现将请求发送到服务器， 

xmlhttp.open("GET", test1.txt, true);

xmlhttp.send();

GET、POST的选择

与POST相比，GET更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，一般使用POST请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST没有数据量限制）
• 发送包含未知字符的用户输入时，POST比GET更稳定也更可靠

这里open()中的第三个参数必须为true，这样才能体现出AJAX的特点。

3、服务器响应

使用XMLHttpRequest对象的responseText或responseXML属性来获取服务器的响应。

补充——onreadystatechange事件

当请求被发送到服务器时，需要执行一些基于响应的任务。每当readyState改变时，就会触发onreadystatechange事件。readyState属性存有XMLHttpRequest的状态信息。下面是XMLHttpRequest对象的三个重要属性：

在 onreadystatechange 事件中，规定当服务器响应已做好被处理的准备时所执行的任务。当readyState等于4且状态为200时，表示响应已就绪：

xmlhttp.onreadystatechange = function()

{

if (xmlhttp.readyState == 4 && xmlhttp.status == 200)

{

document.getElementById("myDiv").innerHTML = xmlhttp.responseText;

}

}