有关于XMLHttpRequest的详细信息可以参阅XMLHttp参考手册。
1. 创建XMLHttpRequest对象
所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了XMLHttpRequest对象，老版本的Internet Explorer（IE5和IE6）使用ActiveX 对象：
function createXMLHttpRequest() { var xmlhttp=null; if (window.XMLHttpRequest) { // code for all new browsers xmlhttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { // code for IE5 and IE6 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } if (xmlhttp == null) { alert("Your browser does not support XMLHTTP."); } return xmlhttp; }
2. 同步还是异步？
XMLHttpRequest的open语法如下：
oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword)
varAsync是一个布尔型，指定此请求是否为异步方式，默认为true。异步的意思是指脚本会在send() 方法之后继续执行，而不等待来自服务器的响应，当状态改变时会调用onreadystatechange属性指定的回调函数。 同步的意思是指脚本会在send() 方法之后，等待服务器响应返回以后再继续执行。
3. onreadystatechange属性
异步请求时通过onreadystatechange属性指定状态改变时需要回调的函数，通常需要和readyState属性，status属性以及statusText属性一起使用。
readyState属性返回XMLHTTP请求的当前状态，有下面几种值：
0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 (完成) 数据接收完毕，此时可以通过通过responseBody和responseText获取完整的回应数据
status属性和statusText属性是标准的HTTP响应代码和响应信息。
function demoMethod2() { xmlhttp = createXMLHttpRequest(); xmlhttp.onreadystatechange = handleStateChange; xmlhttp.open("GET", "http://localhost/xmlhttp/users.xml", true); xmlhttp.send(); } function handleStateChange() { if (xmlhttp.readyState == 4) { // 4 = "loaded" if (xmlhttp.status == 200) { // 200 = OK alert(xmlhttp.responseXML.xml); } else { alert("Problem retrieving XML data"); } } }
一个简单演示XMLHttpRequest的完整例子：
<script language="javascript"> function createXMLHttpRequest() { var xmlhttp=null; if (window.XMLHttpRequest) { // code for all new browsers xmlhttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { // code for IE5 and IE6 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } if (xmlhttp == null) { alert("Your browser does not support XMLHTTP."); } return xmlhttp; } var xmlhttp = null; function demoMethod1() { xmlhttp = createXMLHttpRequest(); xmlhttp.open("GET", "http://localhost/xmlhttp/users.xml", false); xmlhttp.send(); alert(xmlhttp.responseText); } function demoMethod2() { xmlhttp = createXMLHttpRequest(); xmlhttp.onreadystatechange = handleStateChange; xmlhttp.open("GET", "http://localhost/xmlhttp/users.xml", true); xmlhttp.send(); } function handleStateChange() { appendStatusDiv("readyStatus = " + xmlhttp.readyState); if (xmlhttp.readyState == 4) { // 4 = "loaded" if (xmlhttp.status == 200) { // 200 = OK alert(xmlhttp.responseXML.xml); } else { alert("Problem retrieving XML data"); } } } function clearStatusDiv() { document.getElementById('statusDiv').innerHTML = ""; } function appendStatusDiv(text) { document.getElementById('statusDiv').innerHTML = document.getElementById('statusDiv').innerHTML + "<br />" + text; } </script> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="statusDiv" style="border:1px solid #000000;"> </div><br /> <a href="javascript:clearStatusDiv(); demoMethod1();">同步调用XMLHttp，显示服务器文件users.xml</a><br /> <a href="javascript:clearStatusDiv(); demoMethod2();">异步调用XMLHttp，显示服务器文件users.xml</a><br /> </body> </html>
W3C有关XMLHttpRequest 对象的说明：http://www.w3school.com.cn/xml/xml_http.asp