//定义XMLHttp实例
var xmlHttp;
function
createXMLHttpRequest(){
//开始初始化XMLHttpRequest对象
if(window.ActiveXObject){
//IE浏览器
xmlHttp
= new ActiveXObject("Microsoft.XMLHTTP");
}else
if(window.XMLHttpRequest){
//Mozilla浏览器
xmlHttp = new
XMLHttpRequest();
}
if(xmlHttp){
xmlHttp.open("GET",url,false);
xmlHttp.onreadystatechange=function(){setState(greens,reds,contains)};
xmlHttp.send(null);
}
}
//回调函数举例
//返回的4种状态
function
setState(greens,reds,contains){
var contains =
document.getElementById("contain");
if(xmlHttp.readyState ==
0){
contains.innerHTML = "正在初始化";
}
if(xmlHttp.readyState ==
1){
contains.innerHTML = "正在准备发送请求";
}
if(xmlHttp.readyState ==
2){
contains.innerHTML = "正在发送请求";
}
if(xmlHttp.readyState ==
3){
contains.innerHTML = "正在接收数据";
}
if(xmlHttp.readyState ==
4){
//信息已经成功返回，开始处理信息
if(xmlHttp.status == 200){
contains.innerHTML =
xmlHttp.responstText;
//返回值
}
}
}
(1)设置
在从服务器返回数据的同时，还要进行设置，使浏览器不会在本地缓存结果，response.setHeader("Cache-Control","no-cache");response.setHeader("pragma","no-cache");
XMLHttpRequest对象提供２个可以用来访问服务器响应的属性，一个是responseText将响应提供一个串，结合HTML元素的
innerHTML属性，非常有用．
(document.getElementById("results").innerHTML=xmlHttp.responseText).一个是
responseXML将响应提供为一个XML对象．
(2)DOM元素的一些有用的属性
childNodes--------------------------------------返回当前元素所有子元素的数组
firstChild
--------------------------------------返回当前元素的第一个下级子元素
lastChild
---------------------------------------返回当前元素的最后一个子元素
nextSibling---------------------------------------返回紧跟在当前元素后面的元素
nodeValue----------------------------------------指定表示元素值的读／写属性
parentNode
--------------------------------------返回元素的父节点
previousSibling----------------------------------返回紧邻当前元素之前的元素
(3)用于遍历XML文档的DOM元素方法(document)
getElementById(id)-----------------------------获取有指定唯一ID属性值文档中的元素
getElementsByTagName(name)--------------返回当前元素中有指定标记名的子元素的数组
hasChildNodes()--------------------------------返回一个布尔值，指定元素是否有子元素
getAttribute(name)------------------------------返回元素的属性值，属性由name指定
(4)动态创建内容时所用的W3C
DOM属性和方法
document.createElement(tagName)----------文档对象上的createElement方法可以创建由tagName指定的元素
document.createTextNode(text)--------------文档对象的createTextNode方法会创建一个包含静态文本的节点．
<element>.appendChild(childNode)---------该方法将指定的节点增加到当前元素的子节点列表．
<element>.getAttribute(name)|.setAttribute(name,value)-----------------获得和设置元素中name属性的值
<element>.insertBefore(newNode,targetNode)-----这个方法将节点newNode作为当前元素的子节点插到targetNode元素前面。
<element>.removeAttribute(name)-----这个方法从元素中删除属性name
<element>.removeChild(childNode)-----这个方法从元素中删除子元素childNode
<element>.replaceChild(newNode,oldNode)-----这个方法将节点oldNode替换为节点newNode
<element>.hasChildNodes()这个方法返回一个布尔值，指示元素是否有子元素
XMLHttpRequest对象的一些典型方法：
(1)、void
open(String method,String url,boolean
asynch);这个方法会建立对服务器的调用。
第一个参数表示要提供调用的特定方法(get,post,put)
第二个参数表示要提供所调用资源的url
第三个参数表示是异步(true)还是同步(false)
(2)、void
send(content):这个方法会向具体服务器发出请求。可选参数会作为请求体的一部分发送。
(3)、void
setRequestHeader(String header ,String
value):这个方法为HTTP请求中一个给定的首部设置值
第一个参数表示要设置的首部。
第二个参数表示要
在首部中放置的值。这个方法必须在调用open()之后才能调用。
XMLHttpRequest对象的一些典型属性：
(1)、onreadystatechange:每个状态改变时都会触发这个事件处理器，通常会调用一个javascript函数，用来处理返回时要调用的函数。
(2)、readyState:请求的状态。有5个值：0=未初始化，1=正在加载，2=已经加载，3=交互中，4=完成。
(3)、responseText:服务器的响应，表示为一个串
(4)、responseXML:服务器的响应，表示为一个XML，这个对象可以解析为一个DOM对象。
(5)、status:服务器的Http状态码(200对应ok，404对应Not
Found(未找到))
以上为转载：http://hi.baidu.com/dreamsun2008/blog/item/c997835587360f1a3a293593.html
如上所述，Ajax
的核心是JavaScript对象XmlHttpRequest。下面的示例文章评价系统将带您熟悉Ajax的底层基本知识：http://tearesolutions.com/ajax-demo/raw-ajax.html。注：如果您已经在本地WebLogic容器中安装了ajax-demo.war，可以导航到http://localhost:7001/ajax-demo/raw-ajax.html，
浏览应用程序，参与投票，并亲眼看它如何运转。熟悉了该应用程序之后，继续阅读，进一步了解其工作原理细节。
首先，您拥有一些简单的定位点标记，它连接到一个JavaScriptcastVote(rank)函数。
function
castVote(rank) { var url = "/ajax-demo/static-article-ranking.html"; var
callback = processAjaxResponse; executeXhr(callback,
url);}
该函数为您想要与之通信的服务器资源创建一个URL并调用内部函数executeXhr，提供一个回调JavaScript函数，一旦服务器响应可用，该函数就被执行。由于我希望它运行在一个简单的Apache环境中，“cast
vote
URL”只是一个简单的HTML页面。在实际情况中，被调用的URL将记录票数并动态地呈现包含投票总数的响应。
下一步是发出一个XmlHttpRequest请求：
function
executeXhr(callback, url) { // branch for native XMLHttpRequest object if
(window.XMLHttpRequest)
{ req = new XMLHttpRequest(); req.onreadystatechange
= callback; req.open("GET", url, true); req.send(null); }
// branch for
IE/Windows ActiveX version else if (window.ActiveXObject) { req = new
ActiveXObject("Microsoft.XMLHTTP");
if (req) { req.onreadystatechange =
callback; req.open("GET", url, true); req.send(); }
}}
如您所见，执行一个XmlHttpRequest并不简单，但非常直观。和平常一样，在JavaScript领域，大部分的工作量都花在确保浏览器兼容方面。在这种情况下，首先要确定XmlHttpRequest是否可用。如果不能用，很可能要使用Internet
Explorer，这样就要使用所提供的ActiveX实现。
executeXhr()方法中最关键的部分是这两行：
req.onreadystatechange
= callback;req.open("GET", url,
true);
第一行定义了JavaScript回调函数，您希望一旦响应就绪它就自动执行，而req.open()方法中所指定的“true”标志说明您想要异步执行该请求。
一旦服务器处理完XmlHttpRequest并返回给浏览器，使用req.onreadystatechange指派所设置的回调方法将被自动调用。
function
processAjaxResponse()
{ // only if req shows "loaded" if (req.readyState ==
4)
{ // only if "OK" if (req.status == 200) { 502 502'votes').innerHTML =
req.responseText; }
else { alert("There was a problem retrieving the XML
data:" + req.statusText); }
}}
该代码相当简洁，并且使用了几个幻数，这使得难以一下子看出发生了什么。为了弄清楚这一点，下面的表格（引用自
http://developer.apple.com/internet/webcontent/xmlhttpreq.html）列举了常用的
XmlHttpRequest对象属性。
属性
描述
onreadystatechange
每次状态改变所触发事件的事件处理程序
readyState
对象状态值：
*
0 = 未初始化（uninitialized）
* 1 = 正在加载（loading）
* 2 = 加载完毕（loaded）
* 3 =
交互（interactive）
* 4 =
完成（complete）
responseText
从服务器进程返回的数据的字符串形式
responseXML
从服务器进程返回的DOM兼容的文档数据对象
status
从服务器返回的数字代码，比如404（未找到）或200（就绪）
statusText
伴随状态码的字符串信息
现在processVoteResponse()函数开始显示出其意义了。它首先检查XmlHttpRequest的整体状态以保证它已经完成（readyStatus
== 4），然后根据服务器的设定询问请求状态。如果一切正常（status ==
200）,就使用innerHTML属性重写DOM的“votes”节点的内容。
既然您亲眼看到了XmlHttpRequest对象是如何工作的，就让我们利用一个旨在简化JavaScript与Java应用程序之间的异步通信的框架来对具体的细节进行抽象。