Ajax允许客户端JavaScript向服务器请求和接收数据，而无需刷新新Web页面。这种技术允许开发人员创建
不中断的应用程序，用新数据重载页面的某些部分。
最流行的Ajax技术合并了所有主流浏览器都有的JavaScript对象XMLHttpRequest
XMLHttpRequest对象与浏览器支持的其他Web标准没有区别，浏览器对该对象的支持可以分为两类：
ActiveX（用于IE5与IE6）和内置支持（用于其他浏览器）。
这两类浏览器仅在创建XMLHttpRequest对象时有区别，创建后其余代码可以通用
创建XMLHttpRequest：
function createXmlHttpRequest()
{
if(window.XMLHttpRequest)//通过检查是否存在来判断是否不是IE5、6
{
var oHttp=new XMLHttpRequest();
return oHttp;
}
else if(window.ActiveXObject)//是IE5、6，则使用ActiveX方式创建
{
var versions=
[
"MSXML2.XmlHttp.6.0","MSXML2.XmlHttp.3.0"
]
for(var i=0;i<versions.length;i++)
{
try
{
var oHttp=new ActiveXObject(versions[i]);
return oHttp;
}
catch(error)
{
}
}
}
return null;
}
使用XMLHttpRequest对象：
//同步请求代码 var oHttp=createXmlHttpRequest(); oHttp.open("GET","http://localhost/myTextFile.txt",false); oHttp.send(null); if(oHttp.status==200) alert(oHttp.responseText); else alert("Failed"); /* 尽管XMLHttpRequest对象名称中包含了XML，但是他也可以用于获取其他类型的数据。 XMLHttpRequest对象中的responseXML属性用来将接收到的数据加载到XML DOM对象中， responseText返回纯文本。 open初始化XMLHttpRequest对象，该方法接收三个参数，第一个参数requestType是一个表示请求 类型的字符串，其值可以是GET或者POST。第二个参数是作为请求发送目标的URL。第三个参数是 true或者false，分别表示请求以异步或者同步模式发出。 注意：以同步模式发出的请求会暂停所有JavaScript代码的执行，知道从服务器获得响应为止。 实际应用程序首选异步模式 send方法发送请求。该方法接收一个参数，它是一个字符串，包含随请求一起发送的请求体。GET 请求不包含任何信息，所以把null传送为参数 每个XMLHttpRequest对象都有status属性，该属性包含了与服务器的响应一起发送的HTTP状态码 服务器返回200表示请求成功，返回404表示找不到请求的文件 */ //异步请求代码 var oHttp=createXmlHttpRequest(); function oHttp_readyStateChange() { if(oHttp.readyState==4) { if(oHttp.status==200) alert(oHttp.responseText); else alert("Failed"); } } oHttp.open("GET",true); oHttp.onreadystatechange=oHttp_readyStateChange; oHttp.send(null); /* 上面是异步请求的代码，异步请求必须处理readystatechange事件。XMLHttpRequest对象提供了 readyState属性，该属性包含一个数值，每个值都代表请求生存期中的特定状态 0——已创建对象，但未调用open 1——已调用open，但未发送 2——请求已发送，标题和状态已接收到，并可用 3——接收来自服务器的响应 4——接受完请求的数据 在使用时，我们一班只关注它是否为4即可 另外，要注意，即使请求成功，也可能得不到需要的信息，在请求的服务器端可能发生了错误，因此还需要检查请求的状态码 */
使用Ajax验证表单字段示例：
从实例代码中领略Ajax的魅力！
@H_301_53@ <html> <head> <title>Form Field Validation</title> <style type="text/css"> .fieldname { text-align:right; } .submit { text-align:right; } </style> <script type="text/javascript" src="httprequest.js"></script> <script type="text/javascript"> function checkUsername() { var userValue=document.getElementById("username").value; if(userValue=="") { alert("Please enter a user name to check"); return; } var url="formvalidator.PHP?username="+userValue; var request=new HttpRequest(url,checkUsername_callback); request.send(); } function checkUsername_callBack(sResponseText) { var userValue=document.getElementById("username").value; if(sResponseText=="available") alert("The username "+userValue+" is available"); else alert("We are sorry,but "+userValue+" is not available"); } function checkEmail() { var emailValue=document.getElementById("email").value; if(emailValue=="") { alert("Please enter an email to check"); return; } var url="formvalidator.PHP?email="+emailValue; var request=new HttpRequest(url,checkEmail_callback); request.send(); } function checkEmail_callBack(sResponseText) { var emailValue=document.getElementById("email").value; if(sResponseText=="available") alert("The email "+emailValue+" is available"); else alert("We are sorry,but "+emailValue+" is not available"); } </script> </head> <body> <form> <table> <tr> <td class="filename"> Username: </td> <td> <input type="text" id="username"/> </td> <td> <a href="javascript:checkUsername()">Check Available</a> </td> </tr> <tr> <td class="fieldname"> Email: </td> <td> <input type="text" id="email"/> </td> <td> <a href="javascript:checkEmail()">Check Available</a> </td> </tr> <tr> <td class="fieldname"> Password: </td> <td> <input type="text" id="password"/> </td> <td /> </tr> <tr> <td class="fieldname"> Verify Password: </td> <td> <input type="text" id="password2"/> </td> <td /> </tr> <tr> <td colspan="2" class="submit"> <input type="submit" value="Submit"/> </td> <td /> </tr> </table> </form> </body> </html>