Ajax 是Asynchronous JavaScript And XML的简写，它是一种能够向服务器请求额外数据而不需要卸载页面的技术。通俗来说，Ajax是一种可以使客户端和服务器进行异步交互，在不刷新整个页面的情况下，对页面进行局部更新的技术。
Ajax最早是在2005年2月,由Adaptive Path公司的Jesse James Garrett提出的概念,它出现在Garrett的文章"Ajax:A new approach to Web Applications"中。在这篇文章描述了混合使用XHTML,CSS,javascript,DOM,XMLHttpRequst进行Web开发将会成为一种新的趋势。
Ajax并不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。Ajax的核心是JavaScript对象 XmlHttpRequest 。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。之后，Ajax被Google发扬光大，成为WEB前端最热门的技术之一。
一个完整的Ajax请求的过程应该分为以下3个步骤：
1、创建XMLHttpRequest对象 2、检测XMLHttpRequest对象的状态，在合适的时候处理 3、发送请求Ajax的核心是JavaScript的XmlHttpRequest对象。不同的浏览器创建XMLHttpRequest对象的方法是不一样的。这一区别主要体现在IE5和IE6浏览器和其它浏览器上。在其它的现代浏览器中，创建XMLHttpRequest对象的方法是使用JavaScript的内置对象 XMLHttpRequest ：
// 非IE5和IE6浏览器
xhr = new XMLHttpRequest();
对于IE6浏览器，要使用 ActiveXObject("Msxml2.XMLHTTP") 来获取。
// IE6+浏览器
xhr = new XMLHttpRequest(ActiveXObject("Msxml2.XMLHTTP"));
对于IE5浏览器，要使用 ActiveXObject("Microsoft.XMLHTTP") 来获取。
// IE5+浏览器
xhr = new XMLHttpRequest(ActiveXObject("Microsoft.XMLHTTP"));
为了屏蔽浏览器之间的差异，我们可以使用工厂方法来创建 XMLHttpRequest 对象。
function createXMLHttpRequest(){
var xhr;
//IE5和IE6
if(window.ActiveXObject){
try{
xhr = new ActiveXObject(Microsoft.XMLHTTP)
}catch(e){
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
}else if(window.XMLHttpRequest){
//其它主流浏览器
xhr = new XMLHttpRequest();
}else{
alert("你使用的浏览器不支持XMLHttpRequest！");
return false;
}
return xhr;
}
然后可以通过下面的方法来获取 XMLHttpRequest 对象。
var xhr = createXMLHttpRequest();
在获取了 XMLHttpRequest 对象之后向服务器发送信息之前，我们需要了解一下 XMLHttpRequest 对象的三个重要属性。
1、 onreadystatechange 属性
onreadystatechange 属性存有处理服务器响应的函数，我们可以在 onreadystatechange 事件中处理请求。例如下面是一个空的 onreadystatechange 函数。
xhr.onreadystatechange=function(){
// 我们需要在这里写一些代码
}
2、 readyState 属性
readyState 属性存有服务器响应的状态信息。每当 readyState 改变时， onreadystatechange 函数就会被执行。 readyState 的可能取值有：
readyState的状态 描述 0 请求未初始化（在调用open()之前） 1 请求已提出（调用send()之前） 2 请求已发送（这里通常可以从响应得到内容头部） 3 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应） 4 请求已完成（可以访问服务器响应并使用它）
例如下面的代码：
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
// 进行相应的处理
}
}
onreadystatechange 会在每一个步骤都进行响应，一般我们仅仅只在状态为4（请求结束）并且 status=200 （请求没有出错）时才进行处理。
3、 responseText 属性
我们可以通过 responseText 属性来取回由服务器返回的数据。例如下面的代码：
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
//获取相应的文本：通过xhr的responseText可以获取文本信息，包括xml的标签
alert(xhr.responseText);
}
}
如果需要获取XML的信息，可以使用 responseXML 方法。
在完成上的工作之后，我们就可以向服务器发送AJAX请求了。要想把请求发送到服务器，我们就需要使用 open() 方法和 send() 方法。
open() 方法有三个参数。它的语法如下：
open(method,url,async)
三个参数的含义如下：
method ：请求的类型，可以是GET或POST。 url ：文件在服务器上的位置。 async ：true(异步)或false（同步）。例如我们向服务器发出一个AJAX请求可以如下书写代码：
xhr.open("GET","test1.html",true);
send() 方法是向服务器发送请求。
一个完整的Ajax请求的代码如下所示：下面的代码是在服务器的同一个文件夹中有a.html和b.html两个文件。下面是a.html中执行的JavaScript脚本文件。它通过Ajax请求获取b.html的文本内容（包括HTML标签）。
/***** a.html文件中的JavaScript脚本 ******/
// 获取XMLHttpRequest对象
function createXMLHttpRequest(){
var xhr;
//IE5和IE6
if(window.ActiveXObject){
try{
xhr = new ActiveXObject(Microsoft.XMLHTTP)
}catch(e){
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
}else if(window.XMLHttpRequest){
//其它主流浏览器
xhr = new XMLHttpRequest();
}else{
alert("你使用的浏览器不支持XMLHttpRequest！");
return false;
}
return xhr;
}
// 创建XMLHttpRequest对象
var xhr = createXMLHttpRequest();
// 处理Ajax请求
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
//获取相应的文本：通过xhr的responseText可以获取文本信息，包括xml的标签
alert(xhr.responseText);
}
}
// 发送Ajax请求
xhr.open("GET","b.html",true);
xhr.send();
查看更多关于Ajax - Ajax的基本实现的详细内容...