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

            }                

 }

 }