AJAX实现局部内容刷新

AJAX是Asynchronous Javasript and XML的简写，表示用Javasript异步地和服务器交换以XML格式封装的信息。所谓异步，就是信息发送出去后无需等待反回，可以继续做别的事情，当有信息返回时再通知处理。
普通的提交表单动作有两个弱点，一是提交后有一段刷新时间，二是提交后所有的信息都要重新从服务器端取回。AJAX由于是在后台异步提交i，不会影响前台的操作界面，客户提交信息后可以继续下面的操作，没有必要花费时间等待页面的刷新。
在当前流行的浏览器（如IE/NetScape、Mozilla）中都提供了一个叫XMLHttpRequest的组件，它可以在不刷新页面的情况下提交数据并获取响应信息。下面是需要发送HTTP请求的时候，可以直接通过getHttpRequest函数创建XMLHttpRequest对象：

<script type="text/javascript">
   function getHttpRequest(){
      var req = null;
    if(window.XMLHttpRequest)  //Mozilla、NetScape浏览器
      req = new XMLHttpRequest();
    else if(window.ActiveXObject) //IE浏览器
       {
         try { req = new ActiveXObject("Msxml2.XMLHTTP");}
         catch(e1)  //异常处理
           {try {req = new ActiveXObject("Microsoft.XMLHTTP");}
             catch(e2){}
            }          
       }
      return req;
}
</script>

创建好XMLHttpRequest对象后，再将onreadystatechange属性绑定到一个回调函数上，当请求的数据到达时，XMLHttpRequest对象会自动执行回调函数中的程序。下面的AJAX技术实现局部刷新案例介绍了AJAX技术的应用方法。
AJAX技术实现局部刷新
首先要在展示产品的表格单元中放置一个id属性为“infoArea”的div标签，然后编写如下代码，从服务器端取得数据，并显示在div标签中。
左侧导航栏中的代码：

<a href="pageRequest('gx100.html');">GX100</a>
<a href="pageRequest('gx101.html');">GX101</a>
<a href="pageRequest('gx102.html');">GX102</a>
<a href="pageRequest('gx103.html');">GX103</a>

对应的pageRequest函数在javascript中定义为：

<script type="text/javascript">
  function pageRequest(url){
      var obj=document.getElementById("infoArea");
      var xmlhttp=getHttpRequest();
      xmlhttp.open("GET",url);
 
      xmlhttp.onreadystatechange=function()
   {
         if(xmlhttp.onreadyState == 4&&xmlhttp.staus==200)
             obj.innerHTML=xmlhttp.responseText;
    }
}
</script>

该任务中主要调用pageRequest函数实现从服务器端获取数据的功能，函数中先创建HTTP通信对象，再向指定的URL发送HTTP请求，并等待响应数据到达，最后对响应的数据进行处理（这里直接将responseText赋给div标签的innerHTML属性）。