ajax的原理及实现方式

Ajax：Asynchronous javascript and xml，实现了客户端与服务器进行数据交流过程同时是异步发送请求。
使用技术的好处是：不用页面刷新，并且在等待页面传输数据的同时可以进行其他操作。

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

那如何使用Ajax技术？

首先，有客户端事件触发Ajax事件。

然后，创建xmlHttpRequest对象，根据浏览器不同，创建的xmlHttpRequest对象不同。用open调用，用send发送请求给Ajax引擎。

最后，执行完毕后，把结果返回给客户端。

测试代码如下：

 创建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?userId=" + trim(field.value)+"&timestampt="+new Date().getTime();

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);

}

}

}