也谈Ajax技术

        时下流行的Ajax并不是新技术，它只是一些老技术的组合，这一点你可以从它的英文全称上了解到，Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的缩写，也即异步JavaScript和XML。

        要了解Ajax的工作原理，下列技术必须掌握：

• （1）HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。
• （2）JavaScript 代码是运行 Ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。
• （3）DHTML 或 Dynamic HTML，用于动态更新表单。我们将使用 div、span 和其他动态 HTML 元素来标记 HTML。
• （4）文档对象模型 DOM 用于（通过 JavaScript 代码）处理 HTML 结构和（某些情况下）服务器返回的 XML。

        

        1，Ajax中要用到的最主要的JavaScript对象是XMLHttpRequest对象，这个对象是一切应用Ajax技术编写代码的最基本对象，也是最重要的对象，不同的浏览器下创建该对象的方法是不一样的，所以在做网页开发的时候必须创建能在通用浏览器上运行的XMLHttpRequest对象，下面是创建该对象的代码

< script language = " javascript "  type = " text/javascript " >
var  request  =   false ;
try  {
  request  =   new  XMLHttpRequest();
}  catch  (trymicrosoft) {
   try  {
    request  =   new  ActiveXObject( " Msxml2.XMLHTTP " );
  }  catch  (othermicrosoft) {
     try  {
      request  =   new  ActiveXObject( " Microsoft.XMLHTTP " );
    }  catch  (failed) {
      request  =   false ;
    }
  }
}
if  ( ! request)
  alert( " Error initializing XMLHttpRequest! " );
< / script>

        2，创建对象后，需要打开请求，一般采用get方式

var  phone  =  document.getElementById( " phone " ).value;
var  url  =   " /cgi-local/lookupCustomer.php?phone= "   +  escape(phone);
request.open( " GET " , url,  true );

        3，指定回调方法

request.onreadystatechange  =  updatePage;

        4，发送请求

request.send( null );

        

        5，回调方法，处理服务器响应

function  updatePage() {
      if  (request.readyState  ==   4 ) {
        if  (request.status  ==   200 ) {
          var  response  =  request.responseText.split( " | " );
         document.getElementById( " order " ).value  =  response[ 0 ];
         document.getElementById( " address " ).innerHTML  =  response[ 1 ].replace( / \n / g,  " " );
       }  else
         alert( " status is  "   +  request.status);
     }
   }

最后汇总一下上面写的JavaScript代码

< script language = " javascript "  type = " text/javascript " >
    var  request  =   false ;
    try  {
     request  =   new  XMLHttpRequest();
   }  catch  (trymicrosoft) {
      try  {
       request  =   new  ActiveXObject( " Msxml2.XMLHTTP " );
     }  catch  (othermicrosoft) {
        try  {
         request  =   new  ActiveXObject( " Microsoft.XMLHTTP " );
       }  catch  (failed) {
         request  =   false ;
       }  
     }
   }
    if  ( ! request)
     alert( " Error initializing XMLHttpRequest! " );

    function  getCustomerInfo() {
      var  phone  =  document.getElementById( " phone " ).value;
      var  url  =   " /cgi-local/lookupCustomer.php?phone= "   +  escape(phone);
     request.open( " GET " , url,  true );
     request.onreadystatechange  =  updatePage;
     request.send( null );
   }

    function  updatePage() {
      if  (request.readyState  ==   4 ) {
        if  (request.status  ==   200 ) {
          var  response  =  request.responseText.split( " | " );
         document.getElementById( " order " ).value  =  response[ 0 ];
         document.getElementById( " address " ).innerHTML  =  response[ 1 ].replace( / \n / g,  "  " );
       }  else
         alert( " status is  "   +  request.status);
     }
   }
< / script>

按照上述五个步骤，就可以实现ajax异步传输的局部刷新，非常简单。。。