Ajax学习笔记(1)

学习时觉得以后还要用到的，就摘了一些,不过只是一些参考的概念和方法。

原教程地址：

http://www.ibm.com/developerworks/cn/web/wa-ajaxintro/

 

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

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

 

Ajax 世界中的请求/响应

发出请求
1.从 Web 表单中获取需要的数据。
2.建立要连接的 URL。
3.打开到服务器的连接。
4.设置服务器在完成后要运行的函数。
5.发送请求。

 

处理响应

现在要面对服务器的响应了。现在只要知道两点：

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

 

Web 2.0 一瞥

Web 1.0 是什么？
 虽然很少听人提到 Web 1.0，实际上它指的就是具有完全不同的请求和响应模型的传统 Web。比如，到 Amazon.com 网站上点击一个按钮或者输入搜索项。就会对服务器发送一个

请求，然后响应再返回到浏览器。该请求不仅仅是图书和书目列表，而是另一个完整的 HTML 页面。因此当 Web 浏览器用新的 HTML 页面重绘时，可能会看到闪烁或抖动。事实上

，通过看到的每个新页面可以清晰地看到请求和响应。

Web 2.0（在很大程度上）消除了这种看得见的往复交互。

需要关心的是如何使这些新的交互成为可能。显然，仍然需要发出请求和接收响应，但正是针对每次请求/响应交互的 HTML 重绘造成了缓慢、笨拙的 Web 交互的感受。因此很清

楚，我们需要一种方法使发送的请求和接收的响应只 包含需要的数据而不是整个 HTML 页面。惟一需要获得整个新 HTML 页面的时候就是希望用户看到 新页面的时候。

但多数交互都是在已有页面上增加细节、修改主体文本或者覆盖原有数据。这些情况下，Ajax 和 Web 2.0 方法允许在不 更新整个 HTML 页面的情况下发送和接收数据。

XMLHttpRequest 简介

 

JavaScript 对象，即 XMLHttpRequest的很少的几个 方法和属性。

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

不放到方法或函数体中的 JavaScript 代码称为静态 JavaScript。就是说代码是在页面显示给用户之前的某个时候运行。

用 XMLHttpRequest 发送请求

 

Ajax 采用一种沙箱安全模型。因此，Ajax 代码（具体来说就是 XMLHttpRequest 对象）只能对所在的同一个域发送请求。

 

设置服务器 URL

 

首先要确定连接的服务器的 URL。这并不是 Ajax 的特殊要求，但仍然是建立连接所必需的，显然现在您应该知道如何构造 URL 了。多数应用程序中都会结合一些静态数据和用户

处理的表单中的数据来构造该 URL。

GET 请求中，用 URL 发送数据要容易得多。如果需要发送安全信息或 XML，可能要考虑使用 send() 发送内容。
escape() 方法，它用于转义不能用明文正确发送的任何字符。比如，电话号码中的空格将被转换成字符 %20，从而能够在 URL 中传递这些字符。
可以根据需要添加任意多个参数。比如，如果需要增加另一个参数，只需要将其附加到 URL 中并用 “与”（&）字符分开 [第一个参数用问号（?）和脚本名分开]。

 

打开请求

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

1.request-type：发送请求的类型。典型的值是 GET 或 POST，但也可以发送 HEAD 请求。
2.url：要连接的 URL。
3.asynch：如果希望使用异步连接则为 true，否则为 false。该参数是可选的，默认为 true。
4.username：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值。
5.password：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值。

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

发送请求

 

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

send() 只有一个参数，就是要发送的内容。
可以使用 send() 发送数据，但也能通过 URL 本身发送数据。事实上，GET 请求中，用 URL 发送数据要容易得多。如果需要发送安全信息或 XML，可能要考虑使用 send() 发送

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

 

指定回调方法

 

服务器在完成通过 XMLHttpRequest 发送给它的请求处理之后需要某种指示说明怎么做。XMLHttpRequest 的一个简单属性 onreadystatechange允许指定一个回调函数。回调允许

服务器反向调用 Web 页面中的代码。它也给了服务器一定程度的控制权，当服务器完成请求之后，会查看 XMLHttpRequest 对象，特别是 onreadystatechange 属性。然后调用该

属性指定的任何方法。之所以称为回调是因为服务器向网页发起调用，无论网页本身在做什么。

这就是称之为异步的原因：用户在一层上操作表单，而在另一层上服务器响应请求并触发 onreadystatechange 属性指定的回调方法。

需要特别注意的是该属性在代码中设置的位置 —— 它是在调用 send() 之前 设置的。发送请求之前必须设置该属性，这样服务器在回答完成请求之后才能查看该属性。

 

处理服务器响应

HTTP 就绪状态

 

服务器在完成请求之后会在 XMLHttpRequest 的 onreadystatechange 属性中查找要调用的方法,每当 HTTP 就绪状态改变时它都会调用该方法。

HTTP 就绪状态表示请求的状态或情形。它用于确定该请求是否已经开始、是否得到了响应或者请求/响应模型是否已经完成。它还可以帮助确定读取服务器提供的响应文本或数据

是否安全。在 Ajax 应用程序中需要了解五种就绪状态：

0：请求没有发出（在调用 open() 之前）。
1：请求已经建立但还没有发出（调用 send() 之前）。
2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。
3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。
4：响应已完成，可以访问服务器响应并使用它。

因此除了就绪状态外，还需要检查 HTTP 状态。我们期望的状态码是 200，它表示一切顺利。如果就绪状态是 4 而且状态码是 200，就可以处理服务器的数据了，而且这些数据应该就是要求的数据（而不是错误或者其他有问题的信息）。因此还要在回调方法中增加状态检查。

 

读取响应文本

 

请求处理完成（通过就绪状态），服务器给出了正常的响应（通过状态码），最后可以处理服务器返回的数据了。返回的数据保存在 XMLHttpRequest 对象的 responseText 属性中。

关于 responseText 中的文本内容，比如格式和长度，有意保持含糊。这样服务器就可以将文本设置成任何内容。

 XMLHttpRequest 的另一个重要属性 responseXML。如果服务器选择使用 XML 响应则该属性包含（也许您已经猜到）XML 响应。处理 XML 响应和处理普通文本有很大不同，涉及到解析、文档对象模型（DOM）和其他一些问题。

 

DOM 简介

 

浏览器将 Web 页面转换为对象表示,DOM 表示 Document Object Model，是一个规范。
DOM 定义了对象的类型和属性，从而允许浏览器表示标记。

 

文档对象

运行于 Web 页面上的任何 JavaScript 代码中使用内置 document 变量访问对象模型本身。

 

节点的概念

 

节点是 DOM 中最基本的对象类型。
标记的每个部分都由一个对象表示，但它不只是一个任意的对象，它是特定类型的对象，一个 DOM 节点。更特定的类型，比如文本、元素和属性，都继承自这个基本的节点类型。

所以可以有文本节点、元素节点和属性节点。
DOM 树是对象的树，它是节点 对象的树。

 

节点的属性

 

使用 DOM 节点时需要一些属性和方法，因此我们首先来讨论节点的属性和方法。DOM 节点的属性主要有：

nodeName 报告节点的名称。
nodeValue 提供节点的 “值”。
parentNode 返回节点的父节点。记住，每个元素、属性和文本都有一个父节点。
childNodes 是节点的孩子节点列表。对于 HTML，该列表仅对元素有意义，文本节点和属性节点都没有孩子。
firstChild 仅仅是 childNodes 列表中第一个节点的快捷方式。
lastChild 是另一种快捷方式，表示 childNodes 列表中的最后一个节点。
previousSibling 返回当前节点之前 的节点。换句话说，它返回当前节点的父节点的 childNodes 列表中位于该节点前面的那个节点。
nextSibling 类似于 previousSibling 属性，返回父节点的 childNodes 列表中的下一个节点。
attributes 仅用于元素节点，返回元素的属性列表。
其他少数几种属性实际上仅用于更一般的 XML 文档，在处理基于 HTML 的网页时没有多少用处。

节点方法

 

 

接下来看看所有节点都具有的方法（省略了不适用于多数 HTML DOM 操作的少数方法）：

insertBefore(newChild, referenceNode) 将 newChild 节点插入到 referenceNode 之前。记住，应该对 newChild 的目标父节点调用该方法。
replaceChild(newChild, oldChild) 用 newChild 节点替换 oldChild 节点。
removeChild(oldChild) 从运行该方法的节点中删除 oldChild 节点。
appendChild(newChild) 将 newChild 添加到运行该函数的节点之中。newChild 被添加到目标节点孩子列表中的末端。
hasChildNodes() 在调用该方法的节点有孩子时则返回 true，否则返回 false。
hasAttributes() 在调用该方法的节点有属性时则返回 true，否则返回 false。
注意，大部分情况下所有这些方法处理的都是节点的孩子。这是它们的主要用途。如果仅仅想获取文本节点值或者元素名，则不需要调用这些方法，使用节点属性就可以了。

API 设计问题

 

DOM 有意识地避开了方法重载和其他 OO 编程技术。这是为了保证该 API 能够用于多种语言，包括那些不支持 OO 编程技术的语言。后果不过是要求您多记住一些方法名而已。好

处是可以在任何语言中学习 DOM,并清楚同样的方法名和编码结构也能用于具有 DOM 实现的其他语言。

 

通用节点类型

 

DOM 节点的一些特殊节点类型。多数 Web 应用程序中只用到四种节点类型：

1.文档节点表示整个 HTML 文档。
2.元素节点表示 HTML 元素，如 a 或 img。
3.属性节点表示 HTML 元素的属性，如 href（a 元素）或 src（img 元素）。
4.文本节点表示 HTML 文档中的文本，如 “Click on the link below for a complete set list”。这是出现在 p、a 或 h2 这些元素中的文字。

 

文档节点

 

基本上所有基于 DOM 的代码中都要用到的第一个节点类型是文档节点。文档节点 实际上并不是 HTML（或 XML）页面中的一个元素而是页面本身。因此在 HTML Web 页面中，文档

节点就是整个 DOM 树。在 JavaScript 中，可以使用关键字 document 访问文档节点。

JavaScript 中的 document 关键字返回当前网页的 DOM 树。从这里可以开始处理树中的所有节点。

也可使用 document 对象创建新节点，如下所示：

1.createElement(elementName) 使用给定的名称创建一个元素。
2.createTextNode(text) 使用提供的文本创建一个新的文本节点。
3.createAttribute(attributeName) 用提供的名称创建一个新属性。

这些方法创建节点，但是并没有将其附加或者插入到特定的文档中。因此，必须使用前面所述的方法如 insertBefore() 或 appendChild() 来完成这一步。
一旦使用 document 元素获得对 Web 页面 DOM 树的访问，就可以直接使用元素、属性和文本了。

 

元素节点

虽然会大量使用元素节点，但很多需要对元素执行的操作都是所有节点共有的方法和属性，而不是元素特有的方法和属性。元素只有两组专有的方法：

与属性处理有关的方法：
getAttribute(name) 返回名为 name 的属性值。
removeAttribute(name) 删除名为 name 的属性。
setAttribute(name, value) 创建一个名为 name 的属性并将其值设为 value。
getAttributeNode(name) 返回名为 name 的属性节点（属性节点在 下一节 介绍）。
removeAttributeNode(node) 删除与指定节点匹配的属性节点。
与查找嵌套元素有关的方法：
getElementsByTagName(elementName) 返回具有指定名称的元素节点列表。

属性节点

 

DOM 将属性表示成节点，可以通过元素的 attributes 来访问元素的属性。
attributes 属性实际上是对节点类型而非局限于元素类型来说的。
虽然也能使用属性节点，但通常使用元素类的方法处理属性更简单。其中包括：

getAttribute(name) 返回名为 name 的属性值。
removeAttribute(name) 删除名为 name 的属性。
setAttribute(name, value) 创建一个名为 name 的属性并将其值设为 value。
这三个方法不需要直接处理属性节点。但允许使用简单的字符串属性设置和删除属性及其值。

文本节点

基本上通常用于处理文本节点的所有属性都属于节点对象。一般使用 nodeValue 属性来访问文本节点的文本。
下面几种方法是专门用于文本节点的。这些方法用于增加或分解节点中的数据：

appendData(text) 将提供的文本追加到文本节点的已有内容之后。
insertData(position, text) 允许在文本节点的中间插入数据。在指定的位置插入提供的文本。
replaceData(position, length, text) 从指定位置开始删除指定长度的字符，用提供的文本代替删除的文本。

什么节点类型？

 

多数代码都知道处理的节点是什么类型，但情况并非总是如此。比方说，如果在 DOM 树中导航并处理一般的节点类型，可能就不知道您遇到了元素还是文本。也许获得了 p 元素

的所有孩子，但是不能确定处理的是文本、b 元素还是 img 元素。这种情况下，在进一步的处理之前需要确定是什么类型的节点。

所幸的是很容易就能做到。DOM 节点类型定义了一些常量，比如：

1.Node.ELEMENT_NODE 是表示元素节点类型的常量。
2.Node.ATTRIBUTE_NODE 是表示属性节点类型的常量。
3.Node.TEXT_NODE 是表示文本节点类型的常量。
4.Node.DOCUMENT_NODE 是表示文档节点类型的常量。