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的魅力！
<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> 原文链接：https://www.f2er.com/ajax/166582.html