AJAX

来源：互联网发布：程序员又叫什么码农编辑：程序博客网时间：2024/05/17 02:01

Ajax 定义：

Ajax (Asynchronous JavaScript and XML)不是一个新的技术，事实上，它是一些旧有的成熟的技术以一种全新的更加强大的方式整合在一起
Ajax的关键技术：
使用XHTML(HTML)和CSS构建标准化的展示层
使用DOM进行动态显示和交互
使用XML和XSLT进行数据交换和操纵
使用XMLHttpRequest异步获取数据
使用JavaScript将所有元素绑定在一起

同步请求和异步请求：

在传统的Web应用模型下，客户机（浏览器或者本地机器上运行的代码）向服务器发出请求。该请求是同步的，
当服务器处理请求时，用户能够做什么呢？只有等待！而异步请求不等待服务器响应。发送请求后应用程序继续运行。用户仍然可以在 Web 表单中输入数据，甚至离开表单。没有旋转的皮球或者沙漏，应用程序也没有明显的冻结。服务器悄悄地响应请求，完成后告诉原来的请求者工作已经结束（具体的办法很快就会看到）。结果是，应用程序感觉不那么迟钝或者缓慢，而是响应迅速、交互性强，感觉快多了。这仅仅是 Web 2.0 的一部分，但它是很重要的一部分。所有老套的 GUI 组件和 Web 设计范型都不能克服缓慢、同步的请求/响应模型。

DOM简介:

DOM是”Document Object Model”（文档对象模型）的首字母缩写。当创建了一个网页并把它加载到Web浏览器中时，就会在幕后创建一个文档对象模型DOM表示被加载到浏览器窗口里的当前页面：浏览器向我们提供了当前页面的模型，而我们可以通过JavaScript访问这个模型DOM把一份文档表示为一棵树,DOM文档是由节点构成的集合，此时的节点是文档树上的树枝或者树叶。如果浏览器收到了不是格式良好的文档，它只会尽力而为。得到的树结构在最好情况下将是作者希望的原始页面的近似，最坏情况下将面目全非。

DOM 树是对象的树，但更具体地说，它是节点对象的树。在 Ajax 应用程序中或任何其他 JavaScript 中，可以使用这些节点产生下列效果，比如移除元素及其内容，突出显示特定文本，或添加新图像元素。因为都发生在客户端（运行在 Web 浏览器中的代码），所以这些效果立即发生，而不与服务器通信。最终结果通常是应用程序感觉起来响应更快，因为当请求转向服务器时以及解释响应时，Web 页面上的内容更改不会出现长时间的停顿。非常清楚当 Web 浏览器显示网页时幕后发生的一切了。前面已经提到，当 HTML 或为页面定义的 CSS 发送给 Web 浏览器时，网页被从文本转化成对象模型。无论代码简单或复杂，集中到一个文件还是分散到多个文件，都是如此。然后浏览器直接使用对象模型而不是您提供的文本文件。浏览器使用的模型称为文档对象模型（Document Object Model，DOM）。它连接表示文档中元素、属性和文本的对象。HTML 和 CSS 中所有的样式、值、甚至大部分空格都合并到该对象模型中。给定网页的具体模型称为该页面的 DOM 树。

了解什么是 DOM 树，以及知道它如何表示 HTML 和 CSS 仅仅是控制 Web 页面的第一步。接下来还需要了解如何处理 Web 页面的 DOM 树。比方说，如果向 DOM 树中增加一个元素，这个元素就会立即出现在用户的 Web 浏览器中 —— 不需要重新加载页面。从 DOM 树中删除一些文本，那些文本就会从用户屏幕上消失。可以通过 DOM 修改用户界面或者与用户界面交互，这样就提供了很强的编程能力和灵活性。一旦学会了如何处理 DOM 树，您就向实现丰富的、交互式动态网站迈出了一大步。

DOM中节点的类型：

1. 元素节点（element node），诸如<head>、<p>、<div>等。元素节点可以包含其它的元素，唯一没有被包含在其它元素里的元素是<html>，它是根元素

2.属性节点（attribute node），元素或多或少地有一些属性，属性可以对元素做出一些具体的描述。因为属性总是被放到起始标签里，所以属性节点总是被包含在元素节点中

3.文本节点（text node），<h1>元素中包含着文本节点“Trees, trees, everywhere”

DOM属性和方法

getElementById(id)返回一个给定id属性的元素节点相对应的对象。这个方法是与document对象相关联的函数。其中document对象代表着整个HTML文档并可以用来访问所有页面中的元素
getElementsByTagName(tagname)返回一个对象数组，它们分别对应着文档里的一个特定的元素节点
getAttribute()返回对象的属性值
setAttribute()修改对象的属性值
childNodes可以将节点树中任何一个元素的所有子元素检索出来，这个属性返回一个数组，包含了给定元素节点的全体子元素
nodeName返回元素节点的名称。注意，返回的结果全部是大写
nodeType用来区分节点的类型，元素节点的nodeType属性值是1，属性节点的nodeType属性值是2，文本节点的nodeType属性值是3
nodeValue可以用来存取文本节点的值。对于元素节点或属性节点这个属性返回空
firstChild和lastChild第一个和最后一个孩子节点。
node.firstChild等价于node.childNodes[0]，
node.lastChild等价于 node.childNodes[node.childNodes.length – 1]
parentNode返回元素的父节点
nextSibling返回下一个兄弟节点
createElement(tagname)创建新的元素节点，此方法与document对象相关联。新建的元素节点并未与节点树相连
appendChild(node)把新建的节点插入到节点树的某个节点下，成为这个节点的子节点
createTextNode(text)创建文本节点
insertBefore(newNode, targetNode)把一个新元素插入到一个现有元素的前面
replaceChild(newChild, oldChild)替换一个孩子节点
removeChild(node)删除一个孩子节点

实例：修改图片，麻烦的办法

完成所需修改有两种方法：一种简单，一种麻烦。和所有的好程序员一样，我也喜欢简单的办法；但是运用较麻烦的办法是一次很好的 DOM 练习，值得您花点时间。首先看看换图片比较麻烦的办法；后面再重新分析一下看看有没有更简单的办法。

用带兔子的新照片替换原有图片的办法如下：

创建新的 img 元素。
访问当前 img 元素的父元素，也就是它的容器。
在已有 img 元素之前插入新的 img 元素作为该容器的子级。
删除原来的 img 元素。
结合起来以便在用户单击 Hocus Pocus! 按钮时调用刚刚创建的 JavaScript 函数。
创建新的 img 元素

<html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
      var newImage = document.createElement("img");
      newImage.setAttribute("src", "rabbit-hat.gif");
      var imgParent = hatImage.parentNode;
      imgParent.insertBefore(newImage, hatImage);
      imgParent.removeChild(hatImage);
    }
</script>
</head>

替换图片，简单的办法

如果回顾替换图片的步骤，再看看节点的各种方法，可能会注意到方法 replaceNode()。该方法可用于把一个节点替换为另一个节点。再考虑一下前面的步骤：

创建新的 img 元素。
访问当前 img 元素的父元素，也就是它的容器。
在已有 img 元素之前插入新的 img 元素作为该容器的子元素。
删除原来的 img 元素。
连接起来以便在用户点击 Hocus Pocus! 的时候调用刚刚创建的 JavaScript 函数。
使用 replaceNode() 可以减少需要的步骤数。可以将第 3 步和第 4 步合并在一起：

创建新的 img 元素。
访问当前 img 元素的父元素，也就是它的容器。
用创建的新元素替换旧的 img 元素。
连接起来以便在用户点击 Hocus Pocus! 的时候调用刚刚创建的 JavaScript 函数。
这看起来不是什么大事，但确实能够简化代码。清单 6 说明了这种修改：去掉了 insertBefore() 和 removeChild() 方法调用。
<html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
      var newImage = document.createElement("img");
      newImage.setAttribute("src", "rabbit-hat.gif");
      var imgParent = hatImage.parentNode;
      imgParent.replaceChild(newImage, hatImage);
    }
</script>
</head>

要记住，图片元素很大程度上是由其 src 属性控制的，他引用了某个地方的文件（不论是本地 URI 还是外部 URL）。到目前为止，我们一直用新图片替换图片节点，但是直接修改已有图片的 src 属性要简单得多！这样就避免了创建新节点、寻找父节点和替换旧节点的所有工作，只要一步就能完成了：

<html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
      hatImage.setAttribute("src", "rabbit-hat.gif");
    }
</script>
</head>

<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
   <p align="center">
    <img src="topHat.gif" id="topHat" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" onClick="showRabbit();" />
   </p>
</form>
</body>
</html>
这是 DOM 最棒的一点：更新属性的时候网页马上就会改变。只要图片指向新的文件，浏览器就加载该文件，页面就更新了。不需要重新加载，甚至不需要创建新的图片元素！结果仍然和图 3 相同，只不过代码简单得多了。

改变按钮的 onClick 函数
<html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
      hatImage.setAttribute("src", "rabbit-hat.gif");
      var button = document.getElementById("hocusPocus");
      button.setAttribute("value", "Get back in that hat!");
      button.onclick = hideRabbit;
    }

    function hideRabbit() {
      var hatImage = document.getElementById("topHat");
      hatImage.setAttribute("src", "topHat.gif");
      var button = document.getElementById("hocusPocus");
      button.setAttribute("value", "Hocus Pocus!");
      button.onclick = showRabbit;
    }
</script>
</head>

使用Ajax发送异步请求：

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

open()：建立到服务器的新请求。

send()：向服务器发送请求。

abort()：退出当前请求。

readyState：提供当前 HTML 的就绪状态。

status：服务器响应的状态代码

responseText：服务器返回的请求响应文本。
创建跨浏览器的XMLHttpRequest对象：

如果以前没用见过 escape() 方法，它用于转义不能用明文正确发送的任何字符。比如，电话号码中的空格将被转换成字符 %20，从而能够在 URL 中传递这些字符。

可以根据需要添加任意多个参数。比如，如果需要增加另一个参数，只需要将其附加到 URL 中并用 “与”（&）字符分开 [第一个参数用问号（?）和脚本名分开]。

有了要连接的 URL 后就可以配置请求了。可以用 XMLHttpRequest 对象的 open() 方法来完成。该方法有五个参数：

request-type：发送请求的类型。典型的值是 GET 或 POST，但也可以发送 HEAD 请求。

url：要连接的 URL。

asynch：如果希望使用异步连接则为 true，否则为 false。该参数是可选的，默认为 true。

username：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值。

password：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值。

通常使用其中的前三个参数。事实上，即使需要异步连接，也应该指定第三个参数为 “true”。这是默认值，但坚持明确指定请求是异步的还是同步的更容易理解。

一旦用 open() 配置好之后，就可以发送请求了。幸运的是，发送请求的方法的名称要比 open() 适当，它就是 send()。

send() 只有一个参数，就是要发送的内容。但是在考虑这个方法之前，回想一下前面已经通过 URL 本身发送过数据了：

如果不需要通过 send() 传递数据，则只要传递 null 作为该方法的参数即可。

回调方法：

现在我们所做的只有很少一点是新的、革命性的或异步的。必须承认，open() 方法中 “true” 这个小小的关键字建立了异步请求。但是除此之外，这些代码与用 Java servlet 及 JSP、PHP 或 Perl 编程没有什么两样。那么 Ajax 和 Web 2.0 最大的秘密是什么呢？秘密就在于 XMLHttpRequest 的一个简单属性 onreadystatechange。因此服务器在完成通过 XMLHttpRequest 发送给它的请求处理之后需要某种指示说明怎么做。之所以称为回调是因为服务器向网页发起调用，无论网页本身在做什么。比方说，可能在用户坐在椅子上手没有碰键盘的时候调用该方法，但是也可能在用户输入、移动鼠标、滚动屏幕或者点击按钮时调用该方法。它并不关心用户在做什么。

HTTP就绪状态和状态码：

HTTP就绪状态（readyState）表示请求的状态或情形。它用于确定该请求是否已经开始、是否得到了响应或者请求/响应模型是否已经完成。它还可以帮助确定读取服务器提供的响应文本或数据是否安全。在Ajax应用程序中需要了解五种就绪状态：
0：请求没有发出（在调用 open() 之前）
1：请求已经建立但还没有发出（调用 send() 之前）
2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）
3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应

与大多数跨浏览器问题一样，这些就绪状态的使用也不尽一致。实际上很少出现就绪状态从0到1、2、3再到4，一些浏览器从不报告0或1而直接从2开始，然后是3和4，其他浏览器则报告所有的状态。还有一些则多次报告就绪状态1
对于Ajax编程，需要直接处理的惟一状态就是就绪状态4，它表示服务器响应已经完成，可以安全地使用响应数据了。

如果服务器响应请求并完成了处理但是报告了一个错误怎么办？要知道，服务器端代码应该明白它是由 Ajax、JSP、普通 HTML 表单或其他类型的代码调用的，但只能使用传统的 Web 专用方法报告信息。而在 Web 世界中，HTTP 代码可以处理请求中可能发生的各种问题。

比方说，您肯定遇到过输入了错误的 URL 请求而得到 404 错误码的情形，它表示该页面不存在。这仅仅是 HTTP 请求能够收到的众多错误码中的一种（完整的状态码列表请参阅参考资料中的链接）。表示所访问数据受到保护或者禁止访问的 403 和 401 也很常见。无论哪种情况，这些错误码都是从完成的响应 得到的。换句话说，服务器履行了请求（即 HTTP 就绪状态是 4）但是没有返回客户机预期的数据。

因此除了就绪状态外，还需要检查 HTTP 状态。我们期望的状态码是 200，它表示一切顺利。如果就绪状态是 4 而且状态码是 200，就可以处理服务器的数据了，而且这些数据应该就是要求的数据（而不是错误或者其他有问题的信息）
4：响应已完成，可以访问服务器响应并使用它

在请求和响应中使用XML

XMLHttpRequest，它是Ajax 应用程序中使用的基本对象。听起来它似乎是为通过 HTTP 请求发送 XML 或者以某种 XML 格式发出 HTTP 请求而设计的。但不论这个对象的名称听起来像什么，实际上它要做的只不过是为客户机代码（在网页中通常是 JavaScript）提供一种发送 HTTP 请求的方式。仅此而已，别无其他。

在异步应用程序中 XML 有两种基本的用法：

（1）以 XML 格式从网页向服务器发送请求

（2）以 XML 格式在网页中从服务器接收请求

function callServer() {  // Get the city and state from the Web form  var firstName = document.getElementById("firstName").value;  var lastName = document.getElementById("lastName").value;  var street = document.getElementById("street").value;  var city = document.getElementById("city").value;  var state = document.getElementById("state").value;  var zipCode = document.getElementById("zipCode").value;  var xmlString = "<profile>" +    "  <firstName>" + escape(firstName) + "</firstName>" +    "  <lastName>" + escape(lastName) + "</lastName>" +    "  <street>" + escape(street) + "</street>" +    "  <city>" + escape(city) + "</city>" +    "  <state>" + escape(state) + "</state>" +    "  <zip-code>" + escape(zipCode) + "</zip-code>" +    "</profile>";  // Build the URL to connect to  var url = "/scripts/saveAddress.php";  // Open a connection to the server  xmlHttp.open("POST", url, true);  // Tell the server you're sending it XML  xmlHttp.setRequestHeader("Content-Type", "text/xml");  // Set up a function for the server to run when it's done  xmlHttp.onreadystatechange = confirmUpdate;  // Send the request  xmlHttp.send(xmlString);}

建立 XML 之后，按照和发送文本基本相同的方式打开连接。对于 XML 最好使用 POST 请求，因为有些浏览器限制了 GET 请求字符串的长度，而 XML 可能很长。此外，XML 通过 send() 方法发送，而不是附加在请求 URL 最后的参数。这些都是非常细微的区别，很容易修改。

但是必须编写一行新的代码：xmlHttp.setRequestHeader("Content-Type", "text/xml");看起来很难理解，它只不过是告诉服务器要发送的是 XML 而不是一般的名/值对。无论哪种情况，发送的数据都是文本，但这里使用 text/xml 或者 XML 作为普通文本发送。如果使用名/值对，对应的行应该是：xmlHttp.setRequestHeader("Content-Type", "text/plain");

在大多数情况下，客户机不需要使用 XML，因为他们会使用名称/值对发送请求。这是因为实际上没有任何东西可用 XML 而不能用普通文本发送。因此，您可能会发送一个这样的名称：name=jennifer。只需简单地在连续的名称/值对之间添加一个 “与” 符号（&），即可将其放在一起，就像这样：name=jennifer&job=president。使用简单的文本和这些名称值对，客户机即可轻松向服务器请求多个值。很少需要用到 XML 提供的额外结构（及其带来的额外开销）。
实际上，需要向服务器发送 XML 的所有理由都差不多可以归入以下两个基本的类别中：
（1）服务器仅接受 XML 请求。在这类情况下，您别无选择。

（2）您正在调用一个仅接受 XML 或 SOAP 请求的远程 API。这实际上就是上一种情况的特例，但值得单独拿出来提一下。如果您希望在一个异步请求中使用来自 Google 或 Amazon 的 API，就会有一些特殊的考虑事项。在下一期的文章中，我将介绍这些考虑事项，还会给出一些向 API 发送此类请求的示例。
服务器响应：

在您发送名称/值对时，Web 浏览器会发送请求，平台会响应该请求，并承载一个服务器程序，配合它将那些名称/值对转换成服务器程序可以轻松处理的数据。实际上，每一种服务器端技术 —— 从 Java™ servlet 到 PHP、再到 Perl、Ruby on Rails —— 都允许您调用多种方法来根据名称获取值。因此，获取 name 属性只是小事一桩。

这种情况并不会将我们引向另外一个方向。如果服务器使用字符串 name=jennifer&job=president 应答一个应用程序，客户机没有任何标准化的简便方法来将每个对拆分成名称和值。您必须手动解析所返回的数据。如果服务器返回一个由名称/值对构成的响应，这样的响应的解释难度与使用分号、竖线或其他任何非标准格式化字符相同。

对于您来说，这就意味没有任何简单的方法在响应中使用纯文本、使客户机以一种标准的方法获取并解释响应，至少在响应包含多个值时是如此。假设您的服务器只是要发回数字 42，那么纯文本是很好的选择

解析XML:假设xml如下：

<ratings>
<show>
<title>Alias</title>
<rating>6.5</rating>
</show>
<show>
<title>Lost</title>
<rating>14.2</rating>
</show>
<show>
<title>Six Degrees</title>
<rating>9.1</rating>
</show>
</ratings>

function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
var xmlDoc = request.responseXML;

      var showElements = xmlDoc.getElementsByTagName("show");
      for (var x=0; x<showElements.length; x++) {
        // We know that the first child of show is title, and the second is rating
        var title = showElements[x].childNodes[0].value;
        var rating = showElements[x].childNodes[1].value;

        // Now do whatever you want with the show title and ratings
      }
    }
}
}

通过这段非常简单的代码，您正是将 XML 响应作为 XML 而不是无格式的纯文本进行了处理，还使用了一点 DOM 和简单的 JavaScript 来处理服务器响应。更重要的是，您使用了标准化的格式 —— XML，而不是以逗号分隔的值或以竖线分隔的名称/值对。换句话说，您将 XML 用在了最适合它的地方，避免了在不适合的地方使用它（比如说向服务器发送请求时）。

解释 XML 的其他可选方法：

除将 XML 作为无格式文本处理或使用 DOM 处理之外，还有一种非常流行的选择很重要，值得一提。那就是 JSON（JavaScript Object Notation），这是一种绑定在 JavaScript 内的自由文本格式。这篇文章中没有足够的空间介绍 JSON，在后续文章中将探讨相关内容；只要提起 XML 和 Ajax 应用程序，您就很可能会听到有人谈论 JSON，因此现在我将告诉您，您的工作伙伴们在谈论的究竟是什么。大体上，可以用 JSON 做的事，用 DOM 都可以完成，反之亦然；选择主要取决于偏好，当然也要为特定的应用程序选择正确的方法。就现在而言，您应坚持使用 DOM，在接收服务器响应的过程中熟悉 DOM。