Ajax学习（一）

一、概述

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

顺便说一下，Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的缩写。这个短语是 Adaptive Path 的 Jesse James Garrett 发明的（请参阅 参考资料），按照 Jesse 的解释，这不是 个首字母缩写词。

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

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

二、创建对象

/**//* 以支持多种浏览器的方式创建 XMLHttpRequest 对象*/
/**//* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/**//*@cc_on @*/
/**//*@if (@_jscript_version >= 5)
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
}

<script language="javascript" type="text/javascript">
var request;
function createRequest() {
  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>

三、发送请求

所有 Ajax 应用程序中基本都雷同的流程：
1.从 Web 表单中获取需要的数据。 
2.建立要连接的 URL。 
3.打开到服务器的连接。 
4.设置服务器在完成后要运行的函数。 
5.发送请求。 

function callServer() {
  // 从表单中获取城市和地区
  var city = document.getElementById("city").value;
  var state = document.getElementById("state").value;
  // 两者都有内容时提交
  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);
  // 打开服务器连接
  xmlHttp.open("GET", url, true);
  // 当服务器返回后调用此函数
  xmlHttp.onreadystatechange = updatePage;
  // 发送请求
  xmlHttp.send(null);
}

四、处理响应

1.什么也不要做，直到 xmlHttp.readyState 属性的值等于 4。 
2.服务器将把响应填充到 xmlHttp.responseText 属性中。 

function updatePage() {
  if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
    document.getElementById("zipCode").value = response;
  }
}

   function updatePage() {
     if (request.readyState == 4)
       if (request.status == 200)
         alert("Server is done!");
       else if (request.status == 404)
         alert("Request URL does not exist");
       else
         alert("Error: status code is " + request.status);
   }

五、连接web表单

<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>

附一、XMLHttpRequest 简介

要真正实现这种绚丽的奇迹，必须非常熟悉一个 JavaScript 对象，即 XMLHttpRequest。这个小小的对象实际上已经在几种浏览器中存在一段时间了，它是本专栏今后几个月中要介绍的 Web 2.0、Ajax 和大部分其他内容的核心。为了让您快速地大体了解它，下面给出将要用于该对象的很少的几个 方法和属性。

• open()：建立到服务器的新请求。
• send()：向服务器发送请求。
• abort()：退出当前请求。
• readyState：提供当前 HTML 的就绪状态。
• responseText：服务器返回的请求响应文本。

现在应该 了解的是，明确用 XMLHttpRequest 做什么。要注意这些方法和属性都与发送请求及处理响应有关。事实上，如果看到 XMLHttpRequest 的所有方法和属性，就会发现它们都 与非常简单的请求/响应模型有关。显然，我们不会遇到特别新的 GUI 对象或者创建用户交互的某种超极神秘的方法，我们将使用非常简单的请求和非常简单的响应。听起来似乎没有多少吸引力，但是用好该对象可以彻底改变您的应用程序。
附二、深入了解 HTTP 就绪状态

0：请求未初始化（还没有调用 open()）。

1：请求已经建立，但是还没有发送（还没有调用 send()）。

2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。

3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。

4：响应已完成；您可以获取并使用服务器的响应了。