谈谈Ajax原理实现过程
(编辑：jimmy 日期: 2024/11/17 浏览：3 次 )
1.什么是AJAX"text-align: center"> 
测试代码如下：
创建xmlHttpRequest对象：
function createXMLHttpRequest() {
//表示当前浏览器不是ie,如ns,firefox
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
客户端事件触发：
function validate(field){
if(trim(field.value).length!=0)
{
//创建XMLHttpRequest
createXMLHttpRequest() ;
var url="user_validate.jsp" + trim(field.value)+"×tampt="+new Date().getTime();
// alert(url);
xmlHttp.open("GET", url, true);
//方法地址。处理完成后自动调用，回调。
xmlHttp.onreadystatechange=callback ;
xmlHttp.send(null);//将参数发送到Ajax引擎
} else{ document.getElementById("userIdSpan").innerHTML = ""; }
}
结果返回操作：
function callback(){
{
alert(xmlHttp.readyState);
if(xmlHttp.readyState==4){ //Ajax引擎初始化
if(xmlHttp.status==200){ //http协议成功
//alert(xmlHttp.responseText);
document.getElementById("userIdSpan").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";
}else
{
alert("请求失败，错误码="+xmlHttp.status);
}
}
}
注意：
onreadyStateChange事件，当readyState状态值发生改变就会触发此事件。
其中，xmlHttpRequest提交http请求的过程中，readyState历经五个状态值（0，1，2，3，4），所以callback函数中的alert(xmlHttp.readyState)则会不断输出1，2，3，4。其中0状态不会输出，因为0状态的时候并不执行此事件。
PS：当时在eslipse默认web 浏览器中输出的readyState状态顺序一直是：1，3，4，2。当时很纠结，因为状态值含义的分析，结果应该是1，2，3，4。后来折腾半天，才发现是浏览器的问题。不同的浏览器，执行的结果是不同的。使用IE浏览器测试，结果是1，2，3，4。哈哈，真的只有想不到，没有搜不到的。
下一篇：非常简单的Ajax请求实例附源码