Ajax学习笔记

    Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。
  
Ajax 的定义

    顺便说一下，Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的缩写。

下面是 Ajax 应用程序所用到的基本技术：

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

下列为一个简单例子：

     1.根据浏览器的不同 建立XMLHttpRequest对象，以支持多种浏览器的方式创建 XMLHttpRequest 对象
<script language="JavaScript" type="text/javascript">
    var request = false;
    try{
     request = new XMLHttpRequest();//除MS的浏览器产生的对象。
    }catch(microsoftIE){
     try{
      request = new ActiveXObject("Msxml2.XMLHTTP");
     }catch(microsoftOldIE){
      try{
       request = new ActiveXObject("Microsoft.XMLHTTP");
      }catch(failed){
       request = false;
      }
     }
    }
    2.编写HTML，最大的特点是不用提交，当INPUT中输入数据时JAVASCRIPT可以动态捕获反应.
连接 Web 表单，启动一个 Ajax 过程。
<form>
<p>City: <input type="text" name="city" id="city" size="25"
       onChange="callServer();" /></p>
<p>State: <input type="text" name="state" id="state" size="25"
       onChange="callServer();" /></p>
<p>Zip Code: <input type="text" name="zipCode" id="city" size="5" /></p>
</form>


3.如下为发出 Ajax 请求
   function callServer() {
  // Get the city and state from the web form
  var city = document.getElementById("city").value;//表单中的值
  var state = document.getElementById("state").value;//表单中的值
  // Only go on if there are values for both fields
  if ((city == null) || (city == "")) return;
  if ((state == null) || (state == "")) return;
  // Build the URL to connect to
  var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);//向服务器发送请求
  // Open a connection to the server
  xmlHttp.open("GET", url, true);//true表示是采用了异步的方法。
  // Setup a function for the server to run when it's done
  xmlHttp.onreadystatechange = updatePage;//xmlHttp的 onreadystatechange 属性可以告诉客户端在 ”服务器处理完请求后“要做什么。
  // Send the request
  xmlHttp.send(null);//请求已经发送，不再发了。
}

4.服务器处理完毕。

5.处理服务器响应
function updatePage() {
  if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
    document.getElementById("zipCode").value = response;//把服务器返回的值放入zipCode
  }
}       
6.服务器返回结果。
   当用户在 city 或 state 字段中输入新的值时，callServer() 方法就被触发，于是 Ajax 开始运行了。有点儿明白怎么回事了吧？好，就是如此！

摘自：http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html#code1