Ajax介绍

 

     Ajax即异步（Asynchronous）JavaScript And XML。Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

   

    Ajax请求原理

  Ajax即在浏览器客户端与服务器之间建立了一个引擎。它割断了客户端与服务器之间的直接关系。客户端发送的消息由引擎接收，然后由引擎去和服务器进行交互，直至处理完成。引擎收到结果返回给客户端。在处理期间，客户端可以等待处理，知道处理完成。即同步。也可以不等待处理，进行其他操作。即异步。如右图所示：

 

    Ajax的对象

    如果需要提起多个请求，需要创建多个XMLHttpRequest对象，XMLHttpRequest 类首先由Internet Explorer以ActiveX对象引入，被称为XMLHTTP。后来Mozilla﹑Netscape﹑Safari 和其他浏览器也提供了XMLHttpRequest类，不过它们创建XMLHttpRequest类的方法不同。

•     对于Internet Explorer浏览器：

    xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0,5.0

    xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");

    xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP"); //5.0以上版本，不包括5.0

•     对于Mozilla﹑Netscape﹑Safari等浏览器

    xmlhttp_request = new XMLHttpRequest();

    如果服务器的响应没有XML mime-type header，某些Mozilla浏览器可能无法正常工作。为了解决这个问题，如果服务器响应的header不是text/xml，可以调用其它方法修改该header。

    xmlhttp_request = new XMLHttpRequest();

    xmlhttp_request.overrideMimeType('text/xml');

•    创建通用的XMLHttpRequest方法

   

try{

    if( window.ActiveXObject )
    { 
         for( var i = 5; i; i-- ){
         try{ 
             if( i == 2 ){ 
                 xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );
             }else{
                   xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
             } 
             xmlhttp_request.setRequestHeader("Content-Type","text/xml");
             xmlhttp_request.setRequestHeader("Content-Type","gb2312"); 
             break;
           }
        catch(e){
            xmlhttp_request = false;
           }
        }
   }else if( window.XMLHttpRequest ){
       xmlhttp_request = new XMLHttpRequest();
       if (xmlhttp_request.overrideMimeType) {
       xmlhttp_request.overrideMimeType('text/xml');
   }
}
}catch(e){ xmlhttp_request = false; } 

            

              引擎的5中状态

         readyState的取值如下：

              0 (未初始化)

              1 (正在装载)

              2 (装载完毕)

              3 (交互中)

              4 (完成) 

        所以只有当readyState=4时，一个完整的服务器响应已经收到了，函数才可以处理该响应。具体代码如下：

 

if (http_request.readyState == 4) {

// 收到完整的服务器响应 

} else {

// 没有收到完整的服务器响应 

}

 

     使用Ajax技术需要清除缓存

     具体有两种方法：

     1、采用URl后跟上时间戳来防止浏览器缓存，如user_validate.jsp?userId="+userId+"&timestampt="+new Date().getTime()

     2、加入清除缓存代码，如：

         response.setContentType("text/xml");

         response.setHeader("Cache-Control","no-store");  //HTTP1.1

         response.setHeader("Pragma","no-cache"); //HTTP1.0

         response.setDateHeader("Expires",0);

 

     一个完整例子

var req; //定义变量，用来创建xmlhttprequest对象
function creatReq() // 创建xmlhttprequest,ajax开始
{
    var url="ajaxServer.aspx"; //要请求的服务端地址
     if(window.XMLHttpRequest) //非IE浏览器及IE7(7.0及以上版本)，用xmlhttprequest对象创建
     {
       req=new XMLHttpRequest();
    }
    else if(window.ActiveXObject) //IE(6.0及以下版本)浏览器用activexobject对象创建,如果用户浏览器禁用了ActiveX,可能会失败.
    {
       req=new ActiveXObject("Microsoft.XMLHttp");
    }
    if(req) //成功创建xmlhttprequest
    {
       req.open("GET",url,true); //与服务端建立连接(请求方式post或get，地址,true表示异步)
       req.onreadystatechange = callback; //指定回调函数
        req.send(null); //发送请求
     }
}

function callback() //回调函数，对服务端的响应处理，监视response状态
{
    if(req.readystate==4) //请求状态为4表示成功
    {
      if(req.status==200) //http状态200表示OK
      {
         Dispaly(); //所有状态成功，执行此函数，显示数据
       }
      else //http返回状态失败
      {
         alert("服务端返回状态" + req.statusText);
     }
  }
  else //请求状态还没有成功，页面等待
  {
     document .getElementById ("myTime").innerHTML ="数据加载中";
  }
}
function Dispaly() //接受服务端返回的数据，对其进行显示
{
   document .getElementById ("myTime").innerHTML =req.responseText;
}