也谈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异步传输的局部刷新，非常简单。。。