AjaxAjax 完整教程 (转)

 

Ajax 完整教程

第 1 页 Ajax 简介

Ajax 由 HTML、JavaScript™
技术、DHTML 和 DOM 组成,这同一独立的方式可以笨拙的 Web
界面转化成交互性的 Ajax 应用程序。本文的作者是一模一样位 Ajax
专家,他以身作则了这些技巧怎么协同工作 —— 从完整概述到细节之讨论 —— 使高效之
Web 开发成为切实。他还揭露了 Ajax 核心概念的潜在面纱,包括
XMLHttpRequest 对象。

五年前,如果不知底 XML,您便是一致单无人另眼相看的丑小鸭。十八独月前,Ruby
成了关爱之为主,不知晓 Ruby 的程序员只能为冷板凳了。今天,如果想与达到风行的技能时尚,那尔的靶子就是
Ajax。

然,Ajax 不仅仅 是同栽时尚,它是同样种植构建网站的精锐方法,而且免像上一栽全新的语言那样窘迫。

只是在事无巨细探索 Ajax 是呀之前,先叫我们花费几分钟了解 Ajax 做
什么。目前,编写应用程序时有两栽为主的挑:

·桌面应用程序 
·Web 应用程序

双面是相近之,桌面应用程序通常以 CD
为介质(有时候只是打网站下载)并完全安装到你的微机上。桌面应用程序可能行使互联网下载更新,但运行这些应用程序的代码在桌面电脑达。Web 应用程序运行于某处的 Web 服务器上 —— 毫不飞,要经过 Web 浏览器访问这种应用程序。

而是,比这些应用程序的周转代码放在哪儿还着重之凡,应用程序如何运作和怎样跟那个进展交互。桌面应用程序一般迅速(就当公的计算机及运行,不用等互联网连接),具有良好的用户界面(通常与操作系统有关)和超导的动态性。可以单击、选择、输入、打开菜单与子菜单、到处旅游,基本上不需要拭目以待。

一头,Web
应用程序是行的潮流,它们提供了于桌面上不能够兑现的服务(比如 Amazon.com
和 eBay)。但是,伴随着 Web
的雄强使出现的凡等,等待服务器响应,等待屏幕刷新,等待请求返回跟转移新的页面。

阳这样说过度简单了,但中心的概念就是这般。您或许早就猜到,Ajax
尝试建立桌面应用程序的功效跟交互性,与不断更新的 Web
应用程序之间的桥梁。可以下像桌面应用程序中常见的动态用户界面和漂亮的控件,不过大凡于
Web 应用程序中。

尚等啊啊?我们来探 Ajax 如何以笨拙的 Web 界面转化成会高效响应的 Ajax
应用程序吧。

老技术,新技巧

每当谈话到 Ajax
时,实际上干到又技,要活地运用它必须深刻摸底这些不同之技艺(本系列的峰几乎首稿子以独家讨论这些技能)。好信息是你可能早就十分熟悉其中的绝大多数技,更好之是这些技能都坏轻学,并无像完整的编程语言(如
Java 或 Ruby)那样困难。

脚是 Ajax 应用程序所用到之核心技术:

·HTML 用于建 Web 表单并规定应用程序其他组成部分行使的字段。 
·JavaScript 代码是运作 Ajax
应用程序的为主代码,帮助改善和服务器应用程序的通信。 
·DHTML 或 Dynamic HTML,用于动态更新表单。我们用采取 div、span
和另动态 HTML 元素来号 HTML。 
·文档对象模型 DOM 用于(通过 JavaScript 代码)处理 HTML
结构与(某些情况下)服务器返回的 XML。

Ajax 的定义

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

咱俩来一发分析这些技巧的任务。以后的稿子中本人将深入座谈这些技能,目前如熟悉这些零部件和技能就好了。对这些代码越熟悉,就愈轻从对这些技巧的碎了解变化及确实把这些技术(同时为着实开辟了
Web 应用程序开发之大门)。

XMLHttpRequest 对象

如若了解的一个靶或针对君来说呢是太陌生的,即 XMLHttpRequest。这是一个
JavaScript 对象,创建该目标好粗略,如清单 1 所示。

清单 1. 创建新的 XMLHttpRequest 对象

<script language=”javascript”
type=”text/javascript”>
var xmlHttp = new XMLHttpRequest();
</script>
产一致愿意文章中将更讨论这个目标,现在如果了解这是处理所有服务器通信的靶子。继续看之前,先停止下来想同一怀念:通过
XMLHttpRequest 对象同服务器进行对话的是 JavaScript
技术。这不是相似的应用程序流,这刚好是 Ajax 的无敌力量的源于。

于一般的 Web 应用程序中,用户填写说明只字段并单击 Submit
按钮。然后一切表单发送至服务器,服务器将她转化让处理表单的脚本(通常是 PHP 或 Java,也说不定是 CGI
进程或类似的事物),脚本执行好后又发送回新的页面。该页面可能是包含已经填充某些数据的新表单的
HTML,也可能是肯定页面,或者是有着根据本表单中输入数据选择的少数选项的页面。当然,在服务器上之台本或程序处理和归新表单时用户必须待。屏幕变成一片空白,等到服务器返回数据后更还绘制。这就是互相性差的缘由,用户得不顶即上报,因此觉得不同于桌面应用程序。

Ajax 基本上就是将 JavaScript 技术以及 XMLHttpRequest 对象在 Web
表单和服务器之间。当用户填写表单时,数据发送给部分 JavaScript 代码而无是
直接发送给服务器。相反,JavaScript
代码捕获表单数据并通往服务器发送请求。同时用户屏幕及的表单也不见面闪烁、消失或延迟。换句话说,JavaScript
代码在偷偷摸摸发送请求,用户还是无知道要的生。更好的凡,请求是异步发送的,就是说
JavaScript
代码(和用户)不用等服务器的应。因此用户可延续输入数据、滚动屏幕及采用应用程序。

然后,服务器将数据返回 JavaScript 代码(仍然当 Web
表单中),后者决定如何处理这些数据。它可长足更新表单数据,让人口倍感应用程序是立即就的,表单没有交到或刷新而用户得到了初数据。JavaScript
代码甚至足以针对接受的数目实行某种计算,再发送另一个求,完全无需要用户干预!这就算是
XMLHttpRequest
的强硬的处在。它好依据需要活动与服务器进行交互,用户还是可了无亮堂幕后有的全套。结果就是近乎于桌面应用程序的动态、快速响应、高交互性的经验,但是背后又有互联网的全体雄能力。

在一些 JavaScript

博 XMLHttpRequest 的语句柄后,其他的 JavaScript
代码就非常简单了。事实上,我们以动用 JavaScript
代码完成好基本的天职:

·获取表单数据:JavaScript 代码很容易从 HTML
表单中抽取数据并发送至服务器。 
·修改表单上之数据:更新表单也要命粗略,从安字段值到快替换图像。 
·解析 HTML 和 XML:使用 JavaScript 代码操纵 DOM(请参见 下同样节省),处理
HTML 表单服务器返回的 XML 数据的组织。 

对此眼前片沾,需要非常熟悉 getElementById() 方法,如 清单 2 所示。

清单 2. 用 JavaScript 代码捕获和装字段值

// Get the value of the “phone” field and stuff it in a variable called
phone
var phone = document.getElementById(“phone”).value;

// Set some values on a form using an array called response
document.getElementById(“order”).value = response[0];
document.getElementById(“address”).value = response[1];
此处没特别需要小心的地方,真是好极了!您应该认识及这里连没非常复杂的物。只要掌握了
XMLHttpRequest,Ajax 应用程序的其余一些即是如果 清单 2 所出示之简易
JavaScript 代码了,混合有少量之 HTML。同时,还要用简单
DOM,我们便来探望吧。

以 DOM 结束

末还有 DOM,即文档对象模型。可能对小读者来说 DOM
有少数令人生畏,HTML 设计者很少用她,即使 JavaScript
程序员也无大用到其,除非要形成有项高端编程任务。大量使用 DOM 的凡 复杂的
Java 和 C/C++ 程序,这或许就是 DOM 被认为难以学习的故。

碰巧的凡,在 JavaScript 技术中行使 DOM
很易,也十分直观。现在,按照常规也许应该证明如何使
DOM,或者至少要吃来一部分示范代码,但这么做也可能误导而。即使不理睬
DOM,仍然能深入地追 Ajax,这为是自个儿准备用的办法。以后的章以还讨论
DOM,现在一经知道或者用 DOM 就可以了。当需要在 JavaScript
代码和服务器之间传递 XML 和改变 HTML 表单的上,我们再次深刻钻研
DOM。没有其也克做有幽默之办事,因此今即令把 DOM 放到一面吧。

获取 Request 对象

有了方的基础知识后,我们来瞧有具体的例子。XMLHttpRequest 是 Ajax
应用程序的着力,而且对过剩读者来说恐怕还比陌生,我们即便起这边开吧。从
清单 1 足以看,创建与应用此目标非常简单,不是吧?等一等。

尚记几年前的那些倒胃口的浏览器战争吗?没有一样东西在不同的浏览器上博平等的结果。不管而是不是相信,这些战争仍在延续,虽然规模比较小。但让人奇怪的是,XMLHttpRequest
成了立会战争之牺牲品之一。因此获 XMLHttpRequest
对象或需要使用不同之法门。下面我拿详细地展开说明。

使用 Microsoft 浏览器

Microsoft 浏览器 Internet Explorer 使用 MSXML 解析器处理 XML(可以通过
参考资料 进一步询问 MSXML)。因此只要编写的 Ajax 应用程序要和 Internet
Explorer 打交道,那么必须用同一种非常之不二法门创建对象。

而是连无是这么简单。根据 Internet Explorer 中设置的 JavaScript
技术版本不同,MSXML
实际上有个别种不同之版本,因此要对及时片种植情形分别编制代码。请参见 清单
3,其中的代码在 Microsoft 浏览器上创设了一个 XMLHttpRequest。

清单 3. 每当 Microsoft 浏览器上开创 XMLHttpRequest 对象

var xmlHttp = false;
try {
  xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (e) {
  try {
    xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
  } catch (e2) {
    xmlHttp = false;
  }
}
若对这些代码可能还未全明了,但没有涉及。当以系列文章结束之时节,您将本着
JavaScript
编程、错误处理、条件编译等发出双重可怜的打听。现在一旦牢牢记住其中的有数实施代码:

xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”);

xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);。

即简单尽代码基本上就是尝试运用一个版的 MSXML
创建对象,如果失败则使用其他一个版本创建该目标。不错吧?如果还无成功,则拿
xmlHttp 变量设为
false,告诉您的代码出现了问题。如果出现这种情形,可能是因安装了非
Microsoft 浏览器,需要采用不同的代码。

处理 Mozilla 和非 Microsoft 浏览器

使选的浏览器不是 Internet Explorer,或者为非 Microsoft
浏览器编写代码,就需采取不同之代码。事实上就是是 清单 1
所显示之如出一辙执行简单代码:

var xmlHttp = new XMLHttpRequest object;。

这行简单得差不多之代码在 Mozilla、Firefox、Safari、Opera
以及多所有为其它款式或措施支持 Ajax 的非 Microsoft 浏览器被,创建了
XMLHttpRequest 对象。

重组起来

关键是若支持具备 浏览器。谁愿意编写一个只能用于 Internet Explorer 或者非
Microsoft
浏览器的应用程序呢?或者又浅,要修一个应用程序两不好?当然不!因此代码要以支持
Internet Explorer 和非 Microsoft 浏览器。清单 4 显示了这样的代码。

清单 4. 为支持多浏览器的措施创造 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();
}
今预不任那些注释掉的竟符号,如 @cc_on,这是异样的 JavaScript
编译器命令,将于产一致意在对 XMLHttpRequest
的篇章被详细讨论。这段代码的主导分为三步:

1、建立一个变量 xmlHttp 来引用即将创建的 XMLHttpRequest 对象。 
2、尝试以 Microsoft 浏览器中创造该对象: 
      1)尝试利用 Msxml2.XMLHTTP 对象创建它。 
      2)如果失败,再尝试 Microsoft.XMLHTTP 对象。 
2、如果仍没有起 xmlHttp,则因为非 Microsoft 的方法开创该目标。 
末尾,xmlHttp 应该引用一个管用之 XMLHttpRequest
对象,无论运行什么样的浏览器。

有关安全性的某些认证

安全性如何为?现在浏览器允许用户增长他们之平安路,关闭 JavaScript
技术,禁用浏览器被之别取舍项。在这种状态下,代码无论如何都不见面做事。此时必须适度地拍卖问题,这得独自的一模一样篇稿子来谈谈,要放以后了(这个系列够长了吧?不用顾虑,读毕之前可能你便掌握了)。现在若编一截健壮但不够全面的代码,对于掌握
Ajax 来说就杀好了。以后我们还拿讨论还多之底细。

Ajax 世界面临的请求/响应

现在咱们介绍了 Ajax,对 XMLHttpRequest
对象和怎样创造它呢闹矣主导的问询。如果看得老细致,您可能都知晓与服务器上的
Web 应用程序打交道的凡 JavaScript 技术,而不是直付出给老应用程序的
HTML 表单。

还不够什么啊?到底安使
XMLHttpRequest。因为马上段代码非常重大,您编写的每个 Ajax
应用程序都使因为某种形式利用它,先看 Ajax
的主导要/响应型是怎么样吧。

发出请求

乃都来矣一个簇新的 XMLHttpRequest
对象,现在给其干点活吧。首先得一个 Web 页面会调用的 JavaScript
方法(比如当用户输入文本或者从菜单中选择一宗时)。接下来就是当享有 Ajax
应用程序中着力都一律的流程:

1、从 Web 表单中取需要之多少。 
2、建立要连的 URL。 
3、打开到服务器的接连。 
4、设置服务器在成就后如果运行的函数。 
5、发送请求。 

清单 5 中之以身作则 Ajax 方法就是比照这顺序组织的:

清单 5. 发出 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);

  // Setup a function for the server to run when it’s done
  xmlHttp.onreadystatechange = updatePage;

  // Send the request
  xmlHttp.send(null);
}
内大部分代码意义还死明白。开始的代码用基本 JavaScript
代码获取几单表单字段的价。然后设置一个 PHP
脚本作为链接的靶子。要顾脚本 URL 的指定方式,city 和
state(来自表单)使用简易的 GET 参数附加在 URL 之后。

下一场打开一个连,这是若第一次于看运
XMLHttpRequest。其中指定了连年方式(GET)和要连续的
URL。最后一个参数如果只要为 true,那么以请求一个异步连接(这就是是 Ajax
的来由)。如果下
false,那么代码发出请求后以等服务器返回的应。如果要为
true,当服务器在后台处理要的下用户还是可采取表单(甚至调用其他
JavaScript 方法)。

xmlHttp(要铭记在心,这是 XMLHttpRequest 对象实例)的 onreadystatechange
属性可以告知服务器在运转完成
后(可能使就此五分钟要五个钟头)做呀。因为代码没有等服务器,必须让服务器知道怎么开以便你能作出响应。在这示例中,如果服务器处理完毕了请求,一个特之称也
updatePage() 的方式以被触发。

末了,使用值 null 调用 send()。因为曾当求 URL
中补充加了使发送给服务器的数码(city 和
state),所以告被不需要发送任何数据。这样就发了要,服务器按照你的求工作。

一旦无发现另外特别的事物,您应该体会到当时是多么简单明了!除了确实记住
Ajax 的异步特性外,这些内容还相当简单。应该感激 Ajax
使您能全心全意编写好的应用程序和界面,而无用担心复杂的 HTTP
请求/响应代码。

清单 5 中之代码说明了 Ajax 的易用性。数据是概括的公文,可以当请求 URL
的如出一辙部分。用 GET 而不是又扑朔迷离的 POST 发送请求。没有 XML
和要增长的情头部,请求体中莫假设发送的数额;换句话说,这就是 Ajax
的乌托邦。

不要操心,随着以系列文章的开展,事情会转换得更其复杂。您将看到怎样发送
POST 请求、如何设置请求头部及情节类型、如何以消息受到编码
XML、如何增加请求的安全性,可以开的做事还有多!暂时先不用无那些困难,掌握好核心的物就尽了,很快我们尽管会起一整套底
Ajax 工具库。

拍卖应

今要是当服务器的响应了。现在若是了解少接触:

·什么为毫无开,直到 xmlHttp.readyState 属性的值等于 4。 
·服务器将把响应填充到 xmlHttp.responseText 属性中。 

中间的第一点,即就绪状态,将于产一样篇稿子中详尽谈论,您将越发询问 HTTP
请求的号,可能于你设想的还多。现在如检查一个一定的值(4)就好了(下同样希望文章中还有更多的值要介绍)。第二碰,使用
xmlHttp.responseText 属性获得服务器的应,这大简短。清单 6
中的演示方法而供应服务器根据 清单 5 中发送的数额调用。

清单 6. 甩卖服务器响应

function updatePage() {
  if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
    document.getElementById(“zipCode”).value = response;
  }
}
这些代码同样既容易也无复杂。它等待服务器调用,如果是稳状态,则利用服务器返回的价值(这里是用户输入的都和州之
ZIP 编码)设置任何一个表单字段的值。于是包含 ZIP 编码的 zipCode
字段突然出现了,而用户没有按照任何按钮!这就是是前方所说的桌面应用程序的发。快速响应、动态感受等等,这些还止坐生了很小的同一段
Ajax 代码。

仔细之读者也许注意到 zipCode 是一个平凡的公文字段。一旦服务器返回 ZIP
编码,updatePage() 方法就是因此城市/州的 ZIP
编码设置特别字段的价,用户就可改写该值。这样做来一定量个原因:保持例子简单,说明有时候可能要
用户会修改服务器返回的数。要铭记这点儿触及,它们对于好之用户界面设计来说非常重要。

连接 Web 表单

还有什么吗?实际上并未多少了。一个 JavaScript
方法捕捉用户输入表单的消息并以该发送至服务器,另一个 JavaScript
方法监听和拍卖应,并于应返回时设置字段的价值。所有这些实际还因让调用
第一只 JavaScript 方法,它启动了合过程。最明显的措施是以 HTML
表单中加进一个按钮,但立刻是 2001 年的不二法门,您不这么认为也?还是如 清单 7
这样用 JavaScript 技术吧。

清单 7. 启动一个 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>
假如感觉到顿时如是相同截相当常见的代码,那就算对了,正是如此!当用户在 city 或
state 字段被输入新的值时,callServer() 方法就是为点,于是 Ajax
开始运行了。有少明白怎么回事了咔嚓?好,就是如此!

结束语

现今你可能已准备开修第一个 Ajax 应用程序了,至少为冀望认真读一下
参考资料
中之那些文章了咔嚓?但可率先从这些应用程序如何行事之基本概念开始,对
XMLHttpRequest
对象有中心的刺探。在产一样望文章中,您将左右这个目标,学会如何处理
JavaScript 和服务器的通信、如何利用 HTML 表单以及怎样收获 DOM 句子柄。

兹先花点儿时间考虑考虑 Ajax
应用程序有多强大。设想一下,当单击按钮、输入一个字段、从组合框中精选一个选择或者用鼠标在屏幕及拖动时,Web
表单能够立即作出响应会是啊状况。想同一相思异步 究竟意味着什么,想同一怀念
JavaScript 代码运行而且不同待
服务器对它们的请作出响应。会碰到怎样的问题?会进来什么样的圈子?考虑到这种新的不二法门,编程的下许如何转表单的设计?

一经当这些题目达到花鲜光阴,与简单地划分/粘贴某些代码到公从未晓的应用程序中比,收益会再多。在生一样梦想文章被,我们将拿这些概念付诸实践,详细介绍使应用程序按照这种艺术行事所要的代码。因此,现在先期享受一下
Ajax 所带动的可能吧。

第 2 页 使用 JavaScript 和 Ajax 发出异步请求

大部分 Web 应用程序都下要/响应型从服务器上获取完全的 HTML
页面。常常是点击一个按钮,等待服务器响应,再点击任何一个按钮,然后还等待,这样一个累的经过。有矣
Ajax 和 XMLHttpRequest
对象,就好运用不必给用户等服务器响应的乞求/响应型了。本文中,Brett
McLaughlin 介绍了怎么创造能够适应不同浏览器的 XMLHttpRequest
实例,建立及殡葬请求,并应服务器。

依照系列之齐同样要文章(请参阅 参考资料 中的链接),我们介绍了 Ajax
应用程序,考察了推动 Ajax
应用程序的基本概念。其中的为主是不少公可能已了解的技巧:JavaScript、HTML
和 XHTML、一点动态 HTML 以及
DOM(文档对象模型)。本文将拓宽其中的一点,把目光放到具体的 Ajax
细节上。

本文中,您将启幕接触最中心和基础性的关于 Ajax
的任何目标与编程方法:XMLHttpRequest
对象。该目标实际只是一个超过具有 Ajax
应用程序的集体线程,您或许就预期到,只有干净领略该对象才能够充分发挥编程的潜力。事实上,有时你见面发觉,要对地采用
XMLHttpRequest,显然不可知 使用 XMLHttpRequest。这到底是怎么回事呢?

Web 2.0 一瞥

于深深研讨代码之前率先看最近的见解 —— 一定要是杀接头 Web 2.0
这个概念。听到 Web 2.0 这个词的当儿,应该率先咨询一样咨询 “Web 1.0 是啊?”
虽然老少听人提到 Web
1.0,实际上它们凭借的就是有完全不同的恳求与应型的风土 Web。比如,到
Amazon.com
网站上点击一个按钮或者输入搜索项。就见面针对服务器发送一个告,然后响应再回到浏览器。该要不仅仅是书和书目列表,而是另外一个完全的
HTML 页面。因此当 Web 浏览器用新的 HTML
页面重绘时,可能会见视闪烁或抖动。事实上,通过观看的每个新页面可以清楚地看看请与响应。

Web 2.0(在很怪程度达到)消除了这种看得见的来往交互。比如看 Google Maps
或 Flickr 这样的站点(到这些支持 Web 2.0 和 Ajax 站点的链接求参阅
参考资料)。比如当 Google Maps
上,您得拖动地图,放大与紧缩,只生充分少的重绘操作。当然这里仍有求与应,只不过都藏及了偷。作为用户,体验更加舒畅,感觉挺像桌面应用程序。这种新的感触与范型就是当有人提到
Web 2.0 时你所体会到之。

用关爱的凡什么如这些新的相互成为可能。显然,仍然需要发出请求和接响应,但幸好针对每次要/响应交互的
HTML 重绘造成了慢性、笨拙的 Web
交互的感受。因此大明亮,我们需要同种植方法要殡葬的求与接收的响应只
包含需要的多寡如果未是满 HTML 页面。惟一要取得任何新 HTML
页面的时光就是想用户观看 新页面的时。

但是大部分互为都是当都发页面及平添细节、修改重点文本或者覆盖原有数据。这些情形下,Ajax
和 Web 2.0 方法允许在不 更新任何 HTML
页面的动静下发送和接收数据。对于那些经常上网的丁,这种力量可为你的应用程序感觉更快、响应更及时,让她们时常地慕名而来而的网站。

XMLHttpRequest 简介

假使实在实现这种绚烂之偶然,必须特别熟悉一个 JavaScript 对象,即
XMLHttpRequest。这个不大对象实际都以几种植浏览器被留存一段时间了,它是依专栏今后几只月吃一经介绍的
Web 2.0、Ajax
和大部分别样情节的主干。为了让你快地盖了解她,下面为出将用于该对象的那个少之几单
方法和性质。

·open():建立到服务器的新请求。 
·send():向服务器发送请求。 
·abort():退出时请。 
·readyState:提供当前 HTML 的妥善状态。 
·responseText:服务器返回的请响应文件。 

假使无打听这些(或者内的其它
一个),您吗不用担心,后面几首稿子中我们用介绍每个方法及性质。现在当
了解之是,明确用 XMLHttpRequest
做呀。要小心这些方式与性能都同发送请求与处理应关于。事实上,如果看到
XMLHttpRequest 的持有术以及总体性,就见面发觉它还
与生简短的乞求/响应型有关。显然,我们不见面碰到特别新的 GUI
对象要创造用户交互的某种超极神秘的法门,我们用下非常简单的要和非常简单的响应。听起像并未多少吸引力,但是就此好该对象好彻底改变您的应用程序。

简单的 new

先是需创造一个初变量并予给它一个 XMLHttpRequest 对象实例。这当
JavaScript 中充分简短,只要本着该对象名用 new 关键字即可,如 清单 1
所示。

清单 1. 创新的 XMLHttpRequest 对象

<script language=”javascript” type=”text/javascript”>
var request = new XMLHttpRequest();
</script>
轻易吧?记住,JavaScript 不求指定变量类型,因此不需要像 清单 2
那样做(在 Java 语言中可能用这么)。

清单 2. 创建 XMLHttpRequest 的 Java 伪代码

XMLHttpRequest request = new XMLHttpRequest();
故此在 JavaScript 中因故 var 创建一个变量,给她一个名字(如
“request”),然后给予给它们一个初的 XMLHttpRequest
实例。此后尽管好在函数中采取该目标了。

错误处理

每当骨子里各种事务还或出错,而者的代码没有提供其他错误处理。较好之方是创建该目标,并当产出问题常常优雅地离。比如,任何较早的浏览器(不论你是不是相信,仍然有人以运老版本的
Netscape Navigator)都无支持
XMLHttpRequest,您要为这些用户知道多少地方出了问题。清单 3
征什么创建该目标,以便在起问题的时来 JavaScript 警告。

清单 3. 创立有错误处理能力的 XMLHttpRequest

<script language=”javascript” type=”text/javascript”>
var request = false;
try {
  request = new XMLHttpRequest();
} catch (failed) {
  request = false;
}

if (!request)
  alert(“Error initializing XMLHttpRequest!”);
</script>
自然要理解这些步骤:

1、创建一个新变量 request 并赋值 false。后面将运 false
作为判断条件,它代表还不曾开创 XMLHttpRequest 对象。 
2、增加 try/catch 块: 
     1)尝试创建 XMLHttpRequest 对象。 
     2)如果失败(catch (failed))则保证 request 的值仍然为 false。 
3、检查 request 是否比照为 false(如果一切正常就非见面是 false)。 
4、如果起问题(request 是 false)则运用 JavaScript
警告通知用户出现了问题。 

代码非常简单,对多数 JavaScript 和 Web
开发人员来说,真正懂它而较读写代码花还增长之日。现在曾经获得了相同截带有错误检查的
XMLHttpRequest 对象创建代码,还好告知您哪儿有了问题。

应付 Microsoft

关押起像一切美好,至少在于是 Internet Explorer
试验这些代码之前是如此的。如果这么试验的口舌,就会见看出 图 1
所显示之糟糕情形。

图 1. Internet Explorer 报告错误

Ajax 1

 

显著起什么地方不投缘,而 Internet Explorer
很难说是如出一辙栽过时的浏览器,因为世界发生 70% 在应用 Internet
Explorer。换句话说,如果不支持 Microsoft 和 Internet Explorer 就非会见吃
Web 世界之逆!因此我们用采用不同的法子处理 Microsoft 浏览器。

通过认证发现 Microsoft 支持 Ajax,但是其 XMLHttpRequest
版本有异之称之为。事实上,它用那谓几栽 不同的东西。如果采用于新本子的
Internet Explorer,则需要动用对象 Msxml2.XMLHTTP,而比较老版的 Internet
Explorer 则利用
Microsoft.XMLHTTP。我们用支持这简单种对象类型(同时还要支持非 Microsoft
浏览器)。请看 清单 4,它于前述代码的底子及长了针对性 Microsoft
的支撑。

Microsoft 与了也?

有关 Ajax 和 Microsoft
对拖欠领域持续增长之趣味和涉企就起成百上千稿子展开了介绍。事实上,据说
Microsoft 最新版本的 Internet Explorer —— version 7.0,将于 2006
年下半年产 —— 将开始一直支持 XMLHttpRequest,让你运 new
关键字代替所有的 Msxml2.XMLHTTP
创建代码。但不用太感动,仍然要支持原本的浏览器,因此过浏览器代码不见面很快烟消云散。

清单 4. 长对 Microsoft 浏览器的支持

<script language=”javascript” type=”text/javascript”>
var request = false;
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>

非常易被这些花括号迷住了眼,因此下分别介绍每一样步:

1、创建一个新变量 request 并赋值 false。使用 false
作为判断标准,它意味着还未曾开创 XMLHttpRequest 对象。 
2、增加 try/catch 块: 
    1)尝试创建 XMLHttpRequest 对象。 
    2)如果失败(catch (trymicrosoft)): 
            1>尝试利用于新本子的 Microsoft 浏览器创建 Microsoft
兼容的目标(Msxml2.XMLHTTP)。 
            2> 如果失败(catch (othermicrosoft))尝试下比较老版本的
Microsoft 浏览器创建 Microsoft 兼容的对象(Microsoft.XMLHTTP)。 
    2)如果失败(catch (failed))则保证 request 的价值仍然为 false。 
3、检查 request 是否还是为 false(如果一切顺利就无见面是 false)。 
4、如果出现问题(request 是 false)则采用 JavaScript
警告通知用户出现了问题。 

诸如此类修改代码之后重新以 Internet Explorer
试验,就相应看到曾创办的表单(没有不当信息)。我试的结果而 图 2
所示。

祈求 2. Internet Explorer 正常办事

Ajax 2

 

静态和动态

重复拘留一样看清单 1、3 与 4,注意,所有这些代码都直接嵌套在 script
标记中。像这种无搭方法还是函数体中的 JavaScript 代码称为静态
JavaScript。就是说代码是以页面显示为用户之前的某部时刻运行。(虽然因专业非可知完全标准地
知道这些代码何时运行对浏览器有啊影响,但是足以确保这些代码在用户会与页面交互之前运行。)这为是绝大多数
Ajax 程序员创建 XMLHttpRequest 对象的一般法。

即,也得以像 清单 5 那样以这些代码放在一个方吃。

清单 5. 以 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 之前用调用该措施。因此还待
清单 6 这样的代码。

清单 6. 动 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!”);
}

function getCustomerInfo() {
  createRequest();
  // Do something with the request variable
}
</script>

此代码惟一的问题是推了左通知,这为是绝大多数 Ajax
程序员不采取这同一计的原因。假设一个犬牙交错的表单有 10 或 15
独字段、选择框等,当用户以第 14
个字段(按照表单顺序从上到下)输入文本时要激活某些 Ajax 代码。这时候运行
getCustomerInfo() 尝试创建一个 XMLHttpRequest
对象,但(对于本例来说)失败了。然后为用户展示同一条警告,明确地告知她们无可知用该应用程序。但用户已经花费了诸多年华以表单中输入数据!这是蛮令人讨厌的,而恶显然不会见抓住用户更走访您的网站。

假若用静态
JavaScript,用户以点击页面的时候快便会看错误信息。这样也够呛臭,是匪是?可能让用户错误地看你的
Web 应用程序不可知在他的浏览器上运行。不过,当然如果较他们消费了 10
分钟输入信息之后重新显示同一的一无是处而好。因此,我建议编写静态的代码,让用户尽可能早地发现题目。

故 XMLHttpRequest 发送请求

得到请求对象后便得进来伸手/响应循环了。记住,XMLHttpRequest
惟一的目的是给你发送请求与吸纳响应。其他一切都是 JavaScript、CSS
或页面中另外代码的劳作:改变用户界面、切换图像、解释服务器返回的数码。准备好
XMLHttpRequest 之后,就得向服务器发送请求了。

迎使用沙箱

Ajax 采用同一栽沙箱安全模型。因此,Ajax 代码(具体来说就是 XMLHttpRequest
对象)只能对所于的一样个域发送请求。以后的章中将更介绍安全暨
Ajax,现在一经知道当本地机械及运行的代码只能针对本地机械及之服务器端脚本发送请求。如果让
Ajax
代码在 http://www.breakneckpizza.com/ 上运行,则必须 http://www.breakneck.com/ 中运作的剧本发送请求。

设置服务器 URL

第一要确定连接的服务器的 URL。这并无是 Ajax
的特殊要求,但还是成立连接所必不可少的,显然现在若当懂得什么样组织 URL
了。多数应用程序中还见面成一些静态数据和用户处理的表单中之数来组织该
URL。比如,清单 7 中之 JavaScript 代码获取电话号码字段的价值并因而那结构
URL。

清单 7. 确立请求 URL

<script language=”javascript” type=”text/javascript”>
   var request = false;
   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!”);

   function getCustomerInfo() {
     var phone = document.getElementById(“phone”).value;
     var url = “/cgi-local/lookupCustomer.php?phone=” + escape(phone);
   }
</script>
此间没有为难知晓的地方。首先,代码创建了一个初变量 phone,并把 ID 为 “phone”
的表单字段的值赋给它。清单 8 展示了此表单的 XHTML,其中好看看 phone
字段及其 id 属性。

清单 8. Break Neck Pizza 表单

<body>
  <p><img src=”breakneck-logo_4c.gif” alt=”Break Neck Pizza”
/></p>
  <form action=”POST”>
   <p>Enter your phone number:
    <input type=”text” size=”14″ name=”phone” id=”phone” 
           onChange=”getCustomerInfo();” />
   </p>
   <p>Your order will be delivered to:</p>
   <div id=”address”></div>
   <p>Type your order in here:</p>
   <p><textarea name=”order” rows=”6″ cols=”50″
id=”order”></textarea></p>
   <p><input type=”submit” value=”Order Pizza” id=”submit”
/></p>
  </form>
</body>
还要小心,当用户输入电话号码或者转移电话号码时,将触发 清单 8 所显示之
getCustomerInfo() 方法。该方式得到电话号码并组织存储在 url 变量中之 URL
字符串。记住,由于 Ajax 代码是沙箱型的,因而只能连续到与一个域,实际上
URL 中莫待域名。该例中的底本名为
/cgi-local/lookupCustomer.php。最后,电话号码作为 GET
参数附加到该脚本中:”phone=” + escape(phone)。

倘若先尚未因此见了 escape()
方法,它用于转义不可知就此明正确发送的旁字符。比如,电话号码中之空格将吃更换成为字符
%20,从而能当 URL 中传送这些字符。

足依据需要添加任意多个参数。比如,如果要充实其他一个参数,只待用那附加到
URL 中连用 “与”(&)字符分开 [先是个参数用问号(?)和剧本名分别]。

打开请求

起矣要连续的 URL 后即使可配备请求了。可以据此 XMLHttpRequest 对象的 open()
方法来成功。该方法来五独参数:

request-type:发送请求的色。典型的价是 GET 或 POST,但为足以发送 HEAD
请求。 
url:要连续的 URL。 
asynch:如果指望利用异步连接则为 true,否则也
false。该参数是可选的,默认为 true。 
username:如果急需身份验证,则可以是指定用户称。该只是挑选参数没有默认值。
password:如果要身份验证,则好当此指定口令。该只是摘参数没有默认值。 

open() 是开拓也?
Internet 开发人员对 open() 方法到底做啊没高达一致。但其事实上并无是
打开一个央。如果监控 XHTML/Ajax
页面及其连接脚本之间的网络与多少传递,当调用 open()
方法时将看不到任何通信。不理解为什么选用了这名字,但强烈不是一个好的选料。 

寻常使用中的面前三只参数。事实上,即使要异步连接,也应有指定第三个参数为
“true”。这是默认值,但坚称明确指定要是异步的还是同的重新便于掌握。

以这些成起来,通常会获取 清单 9 所著之一行代码。

清单 9. 开拓请求

   function getCustomerInfo() {
     var phone = document.getElementById(“phone”).value;
     var url = “/cgi-local/lookupCustomer.php?phone=” + escape(phone);
     request.open(“GET”, url, true);
   }
使设置好了 URL,其他就是概括了。多数求使用 GET
就足够了(后面的文章中将看到要用 POST 的动静),再加上 URL,这即是应用
open() 方法要之全部内容了。

挑战异步性

遵循系列的后边同样篇稿子中,我拿为此成千上万时编写和以异步代码,但是若应该明了为什么
open() 的末尾一个参数这么重大。在形似的恳求/响应型中,比如 Web
1.0,客户机(浏览器还是当地机械及运行的代码)向服务器发出请求。该请求是同步的,换句话说,客户机等待服务器的响应。当客户机等待的当儿,至少会就此某种形式通知你当等待:

·沙漏(特别是 Windows 上)。 
·旋转的皮球(通常在 Mac 机器上)。 
·应用程序基本上冻结了,然后过一段时间光标变化了。 

当即多亏 Web 应用程序让人感到笨拙或慢的因 ——
缺乏真正的交互性。按下按钮时,应用程序实际上变得不可知动用,直到刚刚接触的求得到响应。如果请需要大量服务器处理,那么等待的日或许那个丰富(至少在此多处理器、DSL
没有等的社会风气中凡这么)。

要异步请求不 等待服务器响应。发送请求后动程序继续运行。用户还是可以在
Web
表单中输入数据,甚至相差表单。没有转动的皮球或者沙漏,应用程序也绝非明了的冷冻。服务器悄悄地应请求,完成后报本的请求者工作就终结(具体的点子很快就会见相)。结果是,应用程序感觉不
那么迟钝或慢性,而是应迅速、交互性强,感觉抢多矣。这无非是 Web 2.0
的同等局部,但她是甚要紧的平片段。所有老套的 GUI 组件和 Web
设计范型都不可知克服缓慢、同步的恳求/响应型。

发送请求

倘用 open()
配置好以后,就得发送请求了。幸运的凡,发送请求的计的名目要比 open()
适当,它就是是 send()。

send()
只发生一个参数,就是若发送的情。但是当考虑这个方法之前,回想一下前方早已由此
URL 本身发送了数额了:

var url = “/cgi-local/lookupCustomer.php?phone=” + escape(phone);
虽可利用 send() 发送数据,但也克通过 URL 本身发送数据。事实上,GET
请求(在一流的 Ajax 应用被约占用 80%)中,用 URL
发送数据要容易得多。如果欲发送安全信息要 XML,可能只要考虑用 send()
发送内容(本系列的持续文章中将讨论安全数据以及 XML 消息)。如果不需经
send() 传递数据,则要传递 null
作为该办法的参数即可。因此若见面意识以本文中之事例中特需要这么发送请求(参见
清单 10)。

清单 10. 发送请求

   function getCustomerInfo() {
     var phone = document.getElementById(“phone”).value;
     var url = “/cgi-local/lookupCustomer.php?phone=” + escape(phone);
     request.open(“GET”, url, true);
     request.send(null);
   }
点名回调方法

今日咱们所召开的独生死少一些是初的、革命性的或者异步的。必须承认,open()
方法中 “true” 这个微的机要字建立了异步请求。但是除此之外此之外,这些代码和用
Java servlet 及 JSP、PHP 或 Perl 编程没有呀不同。那么 Ajax 和 Web 2.0
最要命的机要是呀也?秘密就是在于 XMLHttpRequest 的一个简约属性
onreadystatechange。

第一定要解这些代码中的流水线(如果急需请回忆 清单
10)。建立该告然后有呼吁。此外,因为凡异步请求,所以 JavaScript
方法(例子中的
getCustomerInfo())不会见等服务器。因此代码用继续执行,就是说,将退出该措施要将控制返回给表单。用户可以继续输入信息,应用程序不见面待服务器。

就就提出了一个妙不可言的题目:服务器就了央后会生什么?答案是啊呢不发出,至少对当今的代码而言如此!显然这样大,因此服务器在完成经过
XMLHttpRequest 发送给她的恳求处理下用某种指示说明怎么开。

于 JavaScript 中援函数:
JavaScript
是平等种弱类型的语言,可以就此变量引用任何事物。因此若声明了一个函数
updatePage(),JavaScript
也将该函数名叫当是一个变量。换句话说,可用变量名 updatePage
在代码中引用函数。

清单 11. 安装回调方法

   function getCustomerInfo() {
     var phone = document.getElementById(“phone”).value;
     var url = “/cgi-local/lookupCustomer.php?phone=” + escape(phone);
     request.open(“GET”, url, true);
     request.onreadystatechange = updatePage;
     request.send(null);
   }
需要特别注意的是该属性在代码中设置的岗位 —— 它是在调用 send() 之前
设置的。发送请求之前须安装该属性,这样服务器在回得请求后才会查该属性。现在剩余的即使惟有编写
updatePage() 方法了,这是本文最后一节约设讨论的重要性。

处理服务器响应

发送请求,用户高兴地行使 Web
表单(同时服务器在拍卖要),而现在服务器就了请求处理。服务器查看
onreadystatechange
属性确定要调用的方法。除本条之外,可以将公的应用程序看作其他应用程序一样,无论是否异步。换句话说,不肯定要采取非常的动作编排响应服务器的方,只需要转移表单,让用户访问另一个
URL
或者开响应服务器需要之其它事情。这同节咱们最主要谈论对服务器的响应和相同种植典型的动作
—— 即时转用户看到底表单中的相同部分。

回调和 Ajax

现我们已经见到哪些告服务器就后应当举行呀:将 XMLHttpRequest 对象的
onreadystatechange
属性设置为而运行的函数叫作。这样,当服务器处理完毕要后就会见自行调用该函数。也未待操心该函数的别样参数。我们由一个概括的章程开始,如
清单 12 所显示。

清单 12. 回调方法的代码

<script language=”javascript” type=”text/javascript”>
   var request = false;
   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!”);

   function getCustomerInfo() {
     var phone = document.getElementById(“phone”).value;
     var url = “/cgi-local/lookupCustomer.php?phone=” + escape(phone);
     request.open(“GET”, url, true);
     request.onreadystatechange = updatePage;
     request.send(null);
   }

   function updatePage() {
     alert(“Server is done!”);
   }
</script>
它们才有一些简易的警告,告诉你服务器什么时做到了职责。在融洽之网页遭到考查这些代码,然后以浏览器中开辟(如果期望查看该例中的
XHTML,请参考 清单
8)。输入电话号码然后离开该字段,将张一个弹出的告诫窗口(如 图 3
所示),但是点击 OK 又出新了……

图 3. 弹出警告的 Ajax 代码

Ajax 3

 

冲浏览器的差,在表单停止弹有警示之前会看个别软、三软甚至四浅警告。这是怎么回事呢?原来俺们尚未曾设想
HTTP 就绪状态,这是请/响应循环中的一个根本部分。

HTTP 就绪状态

前提到,服务器在完成请求后会于 XMLHttpRequest 的 onreadystatechange
属性中追寻要调用的计。这是真正,但还非完整。事实上,每当 HTTP
就绪状态改变时其都见面调用该方法。这意味什么呢?首先须明白 HTTP
就绪状态。

HTTP
就绪状态表示请的状态或气象。它用来确定拖欠要是否业已初步、是否取得了响应或者请求/响应型是否早已就。它还得扶持确定读取服务器提供的应文件或数额是否安全。在
Ajax 应用程序中待了解五种植就绪状态:

·0:请求没有来(在调用 open() 之前)。 
·1:请求都成立可尚从来不发生(调用 send() 之前)。 
·2:请求都发出在处理中(这里通常可以于响应得到内容头部)。 
·3:请求都处理,响应中日常发生局部数据可用,但是服务器还并未完响应。 
·4:响应已做到,可以看服务器响应并使其。 

与大多数越浏览器问题同,这些就绪状态的使啊不尽一致。您可能要任务就绪状态从
0 到 1、2、3 再届 4,但事实上很少是这种情况。一些浏览器从不报告 0 或 1
而直白打 2 开始,然后是 3 和
4。其他浏览器虽然告知具有的状态。还有局部尽管往往报告就绪状态
1。在高达等同节约吃看看,服务器多次调用 updatePage(),每次调用都见面弹来警示框
—— 可能和预期的不比!

对此 Ajax 编程,需要一直处理的惟一状态就是就绪状态
4,它象征服务器响应已经到位,可以安全地采取应数据了。基于这,回调方法被之率先履应有使
清单 13 所显示。

清单 13. 反省就绪状态

   function updatePage() {
     if (request.readyState == 4)
       alert(“Server is done!”);
   }
改后即可以保证服务器的处理就到位。尝试运行新本子的 Ajax
代码,现在就算见面相和预期的平等,只显示同一糟糕警告信息了。

HTTP 状态码

则 清单 13 中之代码看起像对,但是还有一个问题 ——
如果服务器响应请求并就了拍卖但是告诉了一个不当怎么处置?要理解,服务器端代码应该清楚它们是出于
Ajax、JSP、普通 HTML 表单或其他类型的代码调用的,但只能以传统的 Web
专用方法告诉信息。而当 Web 世界被,HTTP
代码可以处理要中或者产生的各种题材。

而说,您得遇到了输入了不当的 URL 请求而赢得 404
错误码的情况,它象征该页面不在。这单是 HTTP
请求能接的成千上万错误码中之如出一辙种(完整的状态码列表请参阅 参考资料
中之链接)。表示所走访数被保护还是禁止访问的 403 和 401
也很普遍。无论哪种状态,这些错误码都是打不辱使命的响应
得到的。换句话说,服务器履行了央(即 HTTP 就绪状态是
4)但是从未回去客户机预期的多寡。

因而除了妥善状态外,还待检查 HTTP 状态。我们要的状态码是
200,它代表一切顺利。如果妥善状态是 4 而且状态码是
200,就得拍卖服务器的数了,而且这些数据应就是要求的数目(而休是荒谬或其它发出问题之消息)。因此还要以回调方法中增加状态检查,如
清单 14 所著。

清单 14. 检查 HTTP 状态码

   function updatePage() {
     if (request.readyState == 4)
       if (request.status == 200)
         alert(“Server is done!”);
   }
为增加又健康的错误处理并尽量避免过于复杂,可以长一两只状态码检查,请看无异收押
清单 15 中改后底 updatePage() 版本。

清单 15. 多某些误检查

   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);
   }
现以 getCustomerInfo() 中的 URL 改呢免设有的 URL
看看会发什么。应该会看警告信息认证求的 URL 不有 ——
好极了!很不便处理所有的失实条件,但是这同一稍稍有点的更动能涵盖独立 Web
应用程序中 80% 的题材。

读取响应文件

兹得以管请求都处理就(通过就绪状态),服务器被闹了健康的应(通过状态码),最后我们得拍卖服务器返回的数据了。返回的数据保存在
XMLHttpRequest 对象的 responseText 属性中。

关于 responseText
中的文件内容,比如格式和长,有意保持含糊。这样服务器即可以拿文件设置成任何内容。比方说,一种脚本可能回逗号分隔的值,另一样种植则采用管道符(即
| 字符)分隔的价,还有平等栽则赶回长文本字符串。何去何从由于服务器决定。

以本文使用的事例中,服务器返回客户之达成一个订单和客户地址,中间用管道符分开。然后利用订单和地点设置表单中的元素值,清单
16 给来了更新显示内容的代码。

清单 16. 甩卖服务器响应

   function updatePage() {
     if (request.readyState == 4) {
       if (request.status == 200) {
         var response = request.responseText.split(“|”);
         document.getElementById(“order”).value = response[0];
         document.getElementById(“address”).innerHTML =
           response[1].replace(/\n/g, “”);
       } else
         alert(“status is ” + request.status);
     }
   }
首先,得到 responseText 并采用 JavaScript split()
方法从管道符分开。得到的数组放到 response 中。数组中之首先个值 ——
上一个订单 —— 用 response[0] 访问,被装置也 ID 为 “order”
的字段的价值。第二独值
response[1],即客户地址,则需再次多一些拍卖。因为地址被的行用一般的行分隔符(“\n”字符)分隔,代码中要因此
XHTML 风格的行分隔符 <br /> 来代替。替换过程采用 replace()
函数和正则表达式完成。最后,修改后底文本作为 HTML 表单 div 中的中
HTML。结果就是表单突然用客户信息更新了,如图 4 所展示。

图 4. 收到客户数后的 Break Neck 表单
Ajax 4

 

收本文之前,我还要介绍 XMLHttpRequest 的外一个最主要性质
responseXML。如果服务器选择以 XML
响应则该属性包含(也许你曾经猜到)XML 响应。处理 XML
响应和拍卖日常文书有大充分异,涉及到剖析、文档对象模型(DOM)和其它一些题目。后面的稿子中将更介绍
XML。但是盖 responseXML 通常和 responseText
一起讨论,这里产生必不可少提一提。对于多简短的 Ajax 应用程序 responseText
就够用了,但是若快即见面看到通过 Ajax 应用程序也能够杀好地处理 XML。

结束语

你或许针对 XMLHttpRequest
感到有点厌倦了,我老少看到一整篇文章讨论一个对象,特别是这种简单的目标。但是若将于运
Ajax 编写的每个页面和应用程序中屡用该目标。坦白地游说,关于
XMLHttpRequest 还确实有一些但说之情节。下同样希望文章中将介绍如何当求中采用
POST 及
GET,来安装请求被的内容头部和从服务器响应读取内容头部,理解什么当呼吁/响应型中编码请求与处理
XML。

重往后我们将介绍常见 Ajax
工具箱。这些工具箱实际上隐藏了本文所陈述之广大细节,使得 Ajax
编程更爱。您或许会怀念,既然生这样多工具箱为何还要对根的细节编码。答案是,如果非亮堂应用程序在召开什么,就怪麻烦发现应用程序中之问题。

从而不用忽略这些细节要略地浏览一下,如果就捷华丽的工具箱出现了错误,您便无须抓或者发送邮件请支持了。如果了解如何直接以
XMLHttpRequest,就会见发现好轻调试和缓解最意外的题材。只有给那解决你的题目,工具箱才是好东西。

故此要习 XMLHttpRequest 吧。事实上,如果你来下工具箱的 Ajax
代码,可以尝尝采取 XMLHttpRequest
对象及其性质和艺术更改写。这是同等栽科学的练习,可以辅助你再好地理解里面的法则。

生一样梦想文章中将更讨论该目标,探讨其的部分再有趣的性质(如
responseXML),以及如何下 POST
请求和以不同的格式发送数据。请开始修代码吧,一个月份后我们还累讨论。

**第 3 页 Ajax 中之高等请求和响应

**对于群 Web
开发人员来说,只待转移简单的呼吁并接受简单的响应即可;但是对于期望掌握
Ajax 的开发人员来说,必须要周掌握 HTTP 状态代码、就绪状态和
XMLHttpRequest 对象。在本文中,Brett McLaughlin
将朝着您介绍各种状态代码,并出示浏览器如何对其开展拍卖,本文还让有了以
Ajax 中采用的可比少见的 HTTP 请求。

以按部就班系列之 上篇稿子 中,我们拿详细介绍 XMLHttpRequest 对象,它是 Ajax
应用程序的基本,负责处理服务器端应用程序和剧本的伸手,并处理打服务器端组件返回的多寡。由于所有的
Ajax 应用程序都使以 XMLHttpRequest
对象,因此而或许会见愿意熟悉这目标,从而能够为 Ajax 执行得重新好。

每当本文中,我以在达成一致首文章的根底及主要介绍这要对象的 3
独第一部分的始末:

·HTTP 就绪状态
·HTTP 状态代码
·可以转变的乞求类型

即时三组成部分情节都是在结构一个请求时所要考虑的要素;但是介绍这些主题的情尽少了。然而,如果您不只是纪念了解
Ajax
编程的常识,而是想了解又多内容,就得熟悉就绪状态、状态代码和乞求我的始末。当应用程序出现问题时
—— 这种题材总是存在 —— 那么要能够正确理解就绪状态、如何颇成一个 HEAD
请求或 400 的状态代码的贴切含义,就可在 5
分钟内调节出问题,而不是当各种挫折和迷离中过 5 个钟头。

下面被咱率先来拘禁一下 HTTP 就绪状态。

深切摸底 HTTP 就绪状态

若该还记在达成亦然篇稿子中 XMLHttpRequest 对象有一个号称吧 readyState
的习性。这个特性确保服务器就完结了一个伸手,通常会下一个回调函数从服务器遭到读来数来更新
Web 表单或页面的情节。清单 1
给有了一个概括的事例(这为是按系列之及同首文章被的一个例 —— 请参见
参考资料)。

XMLHttpRequest 或 XMLHttp:换名玫瑰

Microsoft™ 同 Internet Explorer 使用了一个誉为吧 XMLHttp 的目标,而无是
XMLHttpRequest 对象,而 Mozilla、Opera、Safari 和 大部分非 Microsoft
浏览器还用的凡后世。为了简单性起见,我将马上片单对象还简单地称之为
XMLHttpRequest。这既可我们当 Web 上看到的气象,又抱 Microsoft 在
Internet Explorer 7.0 中采取 XMLHttpRequest
作为请求对象的打算。(有关这题目之重复多内容,请参见 第 2 有的。)

清单 1. 以回调函数中拍卖服务器的响应

function updatePage() {
   if (request.readyState == 4) {
     if (request.status == 200) {
       var response = request.responseText.split(“|”);
       document.getElementById(“order”).value = response[0];
       document.getElementById(“address”).innerHTML =
         response[1].replace(/\n/g, “<br />”);
     } else
       alert(“status is ” + request.status);
   }
}
当下明摆着是稳状态太广(也是无限简便)的用法。正而你打数字 “4”
中可以视的平等,还产生其他几单就绪状态(您于达标等同篇稿子中为看看过之清单
—— 请参见 参考资料):

·0:请求未初始化(还尚未调用 open())。
·1:请求都成立,但是还从来不发送(还没调用 send())。
·2:请求都发送,正在处理着(通常现在足于响应中落内容头)。
·3:请求于处理着;通常应中早已发出局部数据可用了,但是服务器还尚无就响应的生成。
·4:响应已就;您得得到并动用服务器的响应了。

如你希望不仅是探听 Ajax
编程的基本知识,那么即便不仅要懂得这些状态,了解这些状态是何时起的,以及哪些来使用这些状态。首先,您需上以每种就绪状态下或者碰到的凡哪种要状态。不幸之是,这一点连无直观,而且会涉及几种植奇特之情景。

隐秘就绪状态

第一栽就绪状态的特征是 readyState 属性为 0(readyState ==
0),表示不初始化状态。一旦对要对象调用 open()
之后,这个特性就为装也
1。由于您便还是在部分请求进行初始化之后就这调用
open(),因此非常少会看 readyState == 0
的状态。另外,未初始化的妥善状态在其实的应用程序中是没有真正的用途的。

可为了满足我们的兴,请参见 清单 2 的情节,其中显示了哪在
readyState 被设置也 0 时来取这种就绪状态。

清单 2. 取 0 就绪状态

   function getSalesData() {
     // Create a request object
     createRequest();  
     alert(“Ready state is: ” + request.readyState);

     // Setup (initialize) the request
     var url = “/boards/servlet/UpdateBoardSales”;
     request.open(“GET”, url, true);
     request.onreadystatechange = updatePage;
     request.send(null);
   }
于这大概的事例中,getSalesData() 是 Web
页面调用来启动请求(例如点击一个按钮时)所动的函数。注意你必须在调用
open()之前 来查看就绪状态。图 1 给闹了运行是应用程序的结果。

图 1. 妥善状态 0

Ajax 5

 

确定性,这并无能够吧你带来多少便宜;需要确保 尚未 调用 open()
函数的情况颇少。在大部 Ajax
编程的真实情况中,这种就绪状态的唯一用法即是运用同一之 XMLHttpRequest
对象在差不多独函数之间变化多独请求。在这种(不常见的)情况屡遭,您或许会见在生成新请求之前要确保请求对象是地处不初始化状态(readyState
== 0)。这实则是只要确保另外一个函数没有同时用这个目标。

查看方处理的恳求的服服帖帖状态

而外 0
就绪状态之外,请求对象还亟需各个经历典型的请求和响应的另外几种植就绪状态,最后才为稳状态
4 的形式结束。这虽是为什么而当多数回调函数中还可以看看 if
(request.readyState == 4)
这行代码;它确保服务器都形成对要的处理,现在好高枕无忧地翻新 Web
页面或根据从服务器返回来的数量来展开操作了。

而查这种状态来的进程非常简单。如果妥善状态吧
4,我们不仅要运行回调函数中的代码,而且还要以历次调用回调函数时还输出就绪状态。
清单 3 给闹了一个兑现这种功能的例证。

当 0 等于 4 时

以差不多只 JavaScript 函数都动同样的恳求对象时,您要检查就绪状态 0
来保证这要对象没正使,这种体制会发问题。由于 readyState == 4
代表一个一度好的要,因此若不时会发觉那些目前尚无当采取的处就绪状态的乞求对象依旧为装置成了
4 ——
这是坐起服务器返回来之数码现已下了了,但是由它让安装为妥善状态下就从未进展其他变动。有一个函数
abort()
会重新安请求对象,但是是函数却休是的确为这个目的而以的。如果您
必须
使用多独函数,最好是吧每个函数都创并应用一个函数,而未是在多只函数之间共享相同之靶子。

清单 3. 翻就绪状态

   function updatePage() {
     // Output the current ready state
     alert(“updatePage() called with ready state of ” +
request.readyState);
   }
假如您不确定哪些运转此函数,就需创造一个函数,然后于 Web
页面中调用这个函数,并给其于服务器端的零部件发送一个请(例如 清单 2
给起之函数,或据系列文章的第 1 有的及第 2
有的被让有之例子)。确保于起请求时,将回调函数设置为
updatePage();要实现这种设置,可以用呼吁对象的 onreadystatechange
属性设置为 updatePage()。

这段代码就是 onreadystatechange 意义的一个适合展示 ——
每次要的稳状态发生变化时,就调用
updatePage(),然后我们就可以看到一个警戒了。图 2
给出了一个调用这个函数的例子,其中就绪状态呢 1。

祈求 2. 妥善状态 1
Ajax 6

 

汝得友善尝尝运行就段代码。将其放入 Web
页面被,然后激活事件处理程序(单击按钮,在域之间以 tab
键切换焦点,或者下安装的别样方式来点请求)。这个回调函数会运行往往
—— 每次就绪状态都见面转移 ——
您得看看每个就绪状态的警告。这是跟请求所涉之一一阶段的最为好措施。

浏览器的不一致性

每当针对之历程发生一个为主的了解下,请试着从几单不等的浏览器被做客您的页面。您当会注意到各个浏览器如何处理这些就绪状态并无均等。例如,在
Firefox 1.5 中,您见面盼以下就绪状态:

·1
·2
·3
·4

立马并无意外,因为每个请求状态都于这边代表出了。然而,如果你使用 Safari
来访问同一之应用程序,就活该看 —— 或者看不到 ——
一些妙不可言之事情。下面是于 Safari 2.0.1 中看到的状态:

·2
·3
·4

Safari
实际上把第一个就绪状态为丢了,也并没有什么明显的原委说明为何而这么做;不过这即是
Safari
的行事法。这尚证明了一个生死攸关的题目:尽管当行使服务器上之多少之前确保请求的状态为
4
是一个吓主意,但是据让每个过渡期就绪状态编写的代码的确会在不同之浏览器上博不同的结果。

诸如,在采取 Opera 8.5 时,所显示的稳状态情况就是越发糟糕了:

·3
·4

说到底,Internet Explorer 会显示如下状态:

·1
·2
·3
·4

假设你遇请求方面的题目,这就是是为此来发现题目的 首要的远在。最好之艺术是于
Internet Explorer 和 Firefox 都进展一下测试 —— 您会看到有着这 4
种状态,并可以检查请求的每个状态所处之情状。

连下去我们更来拘禁一下应端的情。

显微镜下之应数据

一旦我们了解在恳求过程遭到发出的相继就绪状态下,接下去就是得来拘禁一下
XMLHttpRequest 对象的另外一个点了 —— responseText
属性。回想一下每当达到亦然篇稿子中我们介绍过的内容,就足以了解者特性用来起服务器上获取数据。一旦服务器就对要的处理后,就可将响应请求数据所欲的其它数据放到请求的
responseText 中了。然后回调函数就得下这些数据,如 清单 1 与 清单 4
所显示。

清单 4. 使服务器上回来的应

   function updatePage() {
     if (request.readyState == 4) {
       var newTotal = request.responseText;
       var totalSoldEl = document.getElementById(“total-sold”);
       var netProfitEl = document.getElementById(“net-profit”);
       replaceText(totalSoldEl, newTotal);

       /* 图 out the new net profit */
       var boardCostEl = document.getElementById(“board-cost”);
       var boardCost = getText(boardCostEl);
       var manCostEl = document.getElementById(“man-cost”);
       var manCost = getText(manCostEl);
       var profitPerBoard = boardCost – manCost;
       var netProfit = profitPerBoard * newTotal;

       /* Update the net profit on the sales form */
       netProfit = Math.round(netProfit * 100) / 100;
       replaceText(netProfitEl, netProfit);
     }
清单 1 相当简单;清单 4
稍微有接触复杂,但是她于开始经常还设检查就绪状态,并获取 responseText
属性的价。

查请求的响应文件

和稳状态类似,responseText
属性的值当漫天请求的生命周期中吗会见发生变化。要查看这种变动,请以如
清单 5 所著之代码来测试请求的响应文件,以及她的稳状态。

清单 5. 测试 responseText 属性

   function updatePage() {
     // Output the current ready state
     alert(“updatePage() called with ready state of ” +
request.readyState +
           ” and a response text of ‘” + request.responseText + “‘”);
     }
而今在浏览器中开辟 Web
应用程序,并激活你的要。要又好地瞧这段代码的意义,请用 Firefox 或
Internet
Explorer,因为就简单单浏览器都得以告知有要过程遭到享有或的服服帖帖状态。例如当稳状态
2 中,就从不定义 responseText (请参见 图 3);如果 JavaScript
控制台也一度打开了,您尽管见面看出一个错误。

图 3. 稳状态呢 2 的响应文件

Ajax 7

 

唯独当稳状态 3 中,服务器都以 responseText
属性中放大上了一个价值,至少在这例子中凡这么(请参见 图 4)。

图 4. 就绪状态也 3 的应文件

Ajax 8

 

汝见面盼就绪状态为 3
的应在每个脚本、每个服务器竟每个浏览器上且是休同等的。不过,这在调节应用程序中还是十分有效之。

落安全数据

不无的文档和规范都强调,只有在稳状态为 4
时数据才足以高枕无忧采取。相信我,当就绪状态呢 3 时,您特别少克找到无法从
responseText
属性获取数据的情状。然而,在应用程序中将自己之逻辑依赖让稳状态 3
可免是啊好主意 —— 一旦而编写了依靠让稳状态 3
的完整数据的之代码,几乎就假设和谐来负这的多少未整问题了。

比好之做法是通往用户提供部分举报,说明在处于就绪状态 3
时,很快就会见时有发生响应了。尽管用 alert() 之类的函数显然不是啊好主意 ——
使用 Ajax 然后以一个警示对话框来阻塞用户明显是左的 ——
不了您得于稳状态发生变化时更新表单或页面被的处。例如,对于就绪状态 1
来说要以速指示器的升幅设置也 25%,对于就绪状态 2
来说要拿速指示器的小幅设置也 50%,对于就绪状态 3
来说要以速指示器的宽窄设置也 75%,当就绪状态吧 4
时将速指示器的肥瘦设置也 100%(完成)。

自,正使您曾看到底如出一辙,这种方式十分聪明,但她是凭借让浏览器的。在
Opera 上,您永远都未会见视眼前片个就绪状态,而在 Safari
上则从未第一只(1)。由于是缘故,我拿即时段代码留作练习,而尚未以本文中连上。

如今应有来拘禁一下态代码了。

深切摸底 HTTP 状态代码

生了妥善状态和汝于 Ajax 编程技术中学习到的服务器的应,您便可以吗 Ajax
应用程序添加另外一级复杂性了 —— 这要下 HTTP 状态代码。这些代码对于
Ajax 来说并不曾呀独特。从 Web 出现吧,它们就是曾存在了。在 Web
浏览器中您可能都见到过几独状态代码:

·401:未经授权
·403:禁止
·404:没找到

卿可以找到更多之状态代码(完整清单请参见 参考资料)。要吧 Ajax
应用程序另外上加同重合控制与应(以及进一步健壮的错误处理)机制,您要适度地翻看请求与应中之状态代码。

200:一切正常

以众多 Ajax
应用程序中,您将看到一个回调函数,它肩负检查就绪状态,然后继续应用自服务器响应中归的数目,如
清单 6 所出示。

清单 6. 不经意状态代码的回调函数

   function updatePage() {
     if (request.readyState == 4) {
       var response = request.responseText.split(“|”);
       document.getElementById(“order”).value = response[0];
       document.getElementById(“address”).innerHTML =
         response[1].replace(/\n/g, “<br />”);
     }
   }
立刻对于 Ajax
编程来说证明是同样种植短视而不当的章程。如果脚本需要验证,而求却从不供行之有效之证明,那么服务器即见面回到诸如
403 或 401
之类的错误代码。然而,由于服务器对要进行了回答,因此就绪状态就给装置为
4(即使对并无是求所欲之为是这样)。最终,用户没有获有效数据,当
JavaScript 试图动用无有的服务器数据时就可能会见油然而生重的不当。

它花费了极度小之用力来管服务器不仅成功了一个告,而且还回来了一个
“一切优秀” 的状态代码。这个代码是 “200”,它是由此 XMLHttpRequest 对象的
status 属性来喻的。为了保服务器不仅成功了一个央,而且还告诉了一个
OK 状态,请以你的回调函数中加上另外一个反省职能,如 清单 7 所显示。

清单 7. 反省中状态代码

   function updatePage() {
     if (request.readyState == 4) {
       if (request.status == 200) {
         var response = request.responseText.split(“|”);
         document.getElementById(“order”).value = response[0];
         document.getElementById(“address”).innerHTML =
           response[1].replace(/\n/g, “<br />”);
       } else
         alert(“status is ” + request.status);
     }
   }
由此丰富这几乎实施代码,您就可以肯定是不是在问题,用户会见到一个可行之荒谬信息,而不仅是看看一个由于断章取义的数所成的页面,而没其他解释。

重定向与还路由于

每当深切介绍有关错误的始末前面,我们发出必要来讨论一下有关一个于运 Ajax 时
并不需要 关心的题目 —— 重定向。在 HTTP 状态代码中,这是 300
系列之状态代码,包括:

·301:永久移动
·302:找到(请求被重复定向到另外一个 URL/URI 上)
·305:使用代理(请求必须以一个摄来做客所要的资源)

Ajax 程序员可能连无顶关心有关重新定向的题目,这是出于个别端的原由:

·首先,Ajax 应用程序通常都是吗一个特定的劳务器端脚本、servlet
或应用程序而编辑的。对于那些你看不到就烟消云散了之零部件来说,Ajax
程序员就未极端掌握了。因此有时你见面了解资源已倒了(因为您移动了其,或者经某种手段移动了它们),接下要修改要被的
URL,并且不会见再也碰到这种结果了。
更为重要的一个原因是:Ajax
应用程序和要都是封装于沙盒中的。这就算表示提供生成 Ajax 请求的 Web
页面的地带必须是对这些请求进行响应的处。因此 ebay.com 所提供的 Web
页面就不克针对一个于 amazon.com 上运行的脚本生成一个 Ajax 风格的恳求;在
ibm.com 上之 Ajax 应用程序也无力回天对以 netbeans.org 上运行的 servlets
发出请求。
·结果是你的请求无法重定向到其他服务器上,而非见面出安全性错误。在这些情况屡遭,您从就是不见面赢得状态代码。通常以调试控制台中都见面产生一个
JavaScript
错误。因此,在针对状态代码进行充分的考虑后,您便得完全忽视重定向代码的题材了。

结果是您的求无法重定向到外服务器上,而休会见时有发生安全性错误。在这些情形被,您从不怕不会见获取状态代码。通常以调试控制台中还见面发出一个
JavaScript
错误。因此,在对状态代码进行充分的设想其后,您尽管可以了忽略重定向代码的题目了。

错误

设接收到状态代码 200 并且发现及可以好十分程度达忽视 300
系列的状态代码之后,所需要操心之绝无仅有一组代码就是 400
系列的代码了,这说明了不同类型的一无是处。回头再来拘禁一下 清单
7,并小心在对错误进行拍卖时,只拿少数广阔的错信息输出为用户了。尽管这是向是取向前行的平等步,但是若报从事应用程序开发的用户以及程序员究竟发生了啊问题,这些消息还是从未有过最好大用处之。

率先,我们若上加对寻找不交的页的支撑。实际上这当大部活体系面临还不应当出现,但是于测试脚论位置发生变化或程序员输入了左的
URL 时,这种景象并无稀罕。如果你可当地报告 404
错误,就足以呢那些困扰不堪的用户与程序员提供再多辅。例如,如果服务器上之一个本子被删去了,我们不怕可应用
清单 7 中之代码,这样用户就是会见到一个万一 图 5 所出示之非描述性错误。

分界情况以及紧情况

看现在,一些新手程序员就可能会见就到底是设讨论什么内容。有几许实大家需要知道:只有不顶
5% 的 Ajax 请求需要用像 2、3 之类的服服帖帖状态和诸如 403
之类的状态代码(实际上,这个比率可能又近乎受 1%
甚至更少)。这些情况很主要,称为 边界情况(edge case) ——
它们不过见面当有要命突出之状况下出,其中遇到的还是极其诡异之题目。虽然这些状况并无广,但是这些边界情况倒是占了大部分用户所遇到的题目之
80%!

对于典型的用户来说,应用程序 100
次都是常规办事的是真相通常都见面受淡忘,然而应用程序只如同次等失误就会见叫她们懂得地记住。如果你可充分好地处理边界情况(或不便情况),就可为重新走访站点的用户提供满意的回报。

贪图 5. 宽广错误处理

Ajax 9

 

用户无法看清问题到底是验证问题、没找到脚本(此处即是这种场面)、用户错误或代码中略地方来了问题。添加一些简易的代码可以吃这个荒唐越来越切实。请参见
清单
8,它当处理没找到的脚本或证明发生错误的景,在起这些不当时犹见面吃起实际的信息。

清单 8. 检查中状态代码

   function updatePage() {
     if (request.readyState == 4) {
       if (request.status == 200) {
         var response = request.responseText.split(“|”);
         document.getElementById(“order”).value = response[0];
         document.getElementById(“address”).innerHTML =
           response[1].replace(/\n/g, “<br />”);
       } else if (request.status == 404) {
         alert (“Requested URL is not found.”);
       } else if (request.status == 403) {
         alert(“Access denied.”);
       } else
         alert(“status is ” + request.status);
     }
   }
虽说就仍然相当简单,但是其的确多提供了有些行之有效之信息。图 6 给来了和 图 5
相同的一无是处,但是这无异于赖错误处理代码向用户或程序员更好地说明了究竟生了呀。

祈求 6. 异样错误处理

Ajax 10

 

当咱们温馨的应用程序中,可以设想当发认证失败的状态经常排除用户称和密码,并通往屏幕及上加同久错误信息。我们得动用类之不二法门来又好地拍卖找不交剧本或其他
400 类型的荒唐(例如 405 表示不同意利用像发送 HEAD
请求之类不可接受的请求方法,而 407
则意味着需展开代理认证)。然而无论采取哪种选择,都亟需由对服务器上回来的状态代码开始下手开展处理。

其他请求类型

如您真想控制 XMLHttpRequest 对象,可以设想最后实现这种效应 —— 将
HEAD 请求加加到令中。在眼前片篇稿子中,我们已经介绍了如何转 GET
请求;在就将发表之一致首文章被,您见面学有关以 POST
请求将数据发送到服务器上的学识。不过对提高错误处理和消息收集的精神,您该学习怎么样生成
HEAD 请求。

转移请求

实则生成 HEAD 请求非常简单;您可使用 “HEAD”(而休是 “GET” 或
“POST”)作为第一单参数来调用 open() 方法,如 清单 9 所示。

清单 9. 采用 Ajax 生成一个 HEAD 请求

   function getSalesData() {
     createRequest();
     var url = “/boards/servlet/UpdateBoardSales”;
     request.open(“HEAD”, url, true);
     request.onreadystatechange = updatePage;
     request.send(null);
   }
当您这般充分成一个 HEAD 请求时,服务器并无会见像对 GET 或 POST
请求一样返回一个确实的应。相反,服务器就见面回资源的
头(header),这包应中内容最后修改的时刻、请求资源是否有和诸多外产生因此信息。您可以当服务器处理并回到资源之前以这些信来打听关于资源的音信。

对此这种求而可以开的无限简易的政工虽是简简单单地出口所有的响应头的情。这得被您了解经
HEAD 请求可以用什么。清单 10 提供了一个简的回调函数,用来输出从 HEAD
请求被拿走的响应头的始末。

清单 10. 输出从 HEAD 请求中获得的响应头的情

   function updatePage() {
     if (request.readyState == 4) {
       alert(request.getAllResponseHeaders());
     }
   }
恳请参见 图 7,其中显示了起一个于服务器发之 HEAD 请求的简要 Ajax
应用程序返回的响应头。

公可独立使用这些头(从服务器类型及情节类型)在 Ajax
应用程序中提供任何信息要效益。

检查 URL

卿曾看了当 URL 不设有时时应有怎样检查 404
错误。如果立刻成为一个普遍的题材 —— 可能是紧缺了一个一定的剧本或 servlet
—— 那么你尽管可能会见盼于变完整的 GET 或 POST 请求之前来检查是
URL。要兑现这种效果,生成一个 HEAD 请求,然后于回调函数中反省 404
错误;清单 11 给出了一个简短的回调函数。

清单 11. 检查有 URL 是否在

   function updatePage() {
     if (request.readyState == 4) {
       if (request.status == 200) {
         alert(“URL exists”);
       } else if (request.status == 404) {
         alert(“URL does not exist.”);
       } else {
         alert(“Status is: ” + request.status);
       }
     }
   }
老老实实地游说,这段代码的值并无顶非常。服务器必须对要进行响应,并组织一个应来填充内容长度的响应头,因此并无能够省任何处理时。另外,这花费的辰及转变请求并下
HEAD 请求来查 URL 是否存在所需要之时刻一模一样多,因为它们要扭转使用 GET 或
POST 的乞求,而不光是如果 清单 7
所著一样来处理错误代码。不过,有时确切地问询当前什么可用也是不行实用之;您永远不会见掌握何时创造力就会迸发或者何时要
HEAD 请求!

有用的 HEAD 请求

您会发现 HEAD
请求非常管用的一个世界是因此来查阅内容之长要内容的色。这样好规定是不是用发回大量数目来拍卖要,和服务器是否打算返回二进制数据,而休是
HTML、文本或 XML(在 JavaScript 中,这 3
种植档次的数码都于二进制数据再度易于处理)。

在这些状况被,您就行使了适合的头名,并以那传递让 XMLHttpRequest 对象的
getResponseHeader() 方法。因此只要获取响应的长短,只需要调用
request.getResponseHeader(“Content-Length”);。要收获内容类型,请动
request.getResponseHeader(“Content-Type”);。

当许多应用程序中,生成 HEAD
请求并不曾增加其它力量,甚至可能会见造成请求速度变慢(通过强制生成一个
HEAD 请求来得到有关响应的数量,然后在动用一个 GET 或 POST
请求来真正落响应)。然而,在出现而不确定有关脚本或服务器端组件的动静时常,使用
HEAD
请求可以博有中心的多寡,而未欲对响应数据真正展开拍卖,也不需要大量的牵动富来发送响应。

结束语

对多 Ajax 和 Web 程序员来说,本文中介绍的始末似是最为高档了。生成
HEAD 请求的价是呀也?到底以啊情况下需要在 JavaScript
中显式地处理重定向状态代码呢?这些还是颇好的题材;对于简易的应用程序来说,答案是这些高级技术的值并无是老好。

可是,Web
已经不复是独待兑现简单应用程序的地方了;用户已换得更其高档,客户愿意能抱更好的安澜、更尖端的错误报告,如果应用程序有
1% 的时空停机,那么经理就可能会见坐是要为解聘。

因而你的工作就是不能够仅仅局限为简单的应用程序了,而是欲更深切明
XMLHttpRequest。

·如果您可以设想各种就绪状态 ——
并且知道了这些就绪状态在不同浏览器中的分别 ——
就足以长足调试应用程序了。您还是足以依据就绪状态而出片创造性的效能,并通往用户和客户回报请求的状态。
·如果你而针对性状态代码进行支配,就可以装应用程序来处理下论错误、非预期的响应和边缘情况。结果是应用程序在有着的流年还足以正常干活,而不光是不得不一切都健康的图景下才能够运作。
·增加这种生成 HEAD 请求的力,检查有 URL
是否存在,以及确认有文件是否让修改过,这样即便得保用户可得到中的页面,用户所见到的音信都是风靡的,(最紧要的凡)让他们惊奇之应用程序是安健全和通用。
正文的目的决不是一旦吃你的应用程序显得煞是华,而是帮而去丢黄色聚光灯后主要昭显文字的姣好,或者外观还如桌面一样。尽管这些还是
Ajax
的效能(在继承几篇文章被尽管会见介绍),不过它们也像是蛋糕表面的一致叠奶油。如果你得应用
Ajax
来构建一个根深蒂固的根基,让应用程序可以死好地处理错误和问题,用户就见面回到您的站点和应用程序。在联网下的章中,我们用助长这种直观的技巧,这会为客户兴奋得发抖。

**第 4 页 利用 DOM 进行 Web 响应

**程序员(使用后端应用程序)和 Web 程序员(编写 HTML、CSS 和
JavaScript)之间的冰峰是长远存在的。但是,Document Object Model (DOM)
弥补了这裂缝,使得以后端使用 XML 同时于前端采用 HTML
切实可行,并成极端有效之工具。在本文中,Brett McLaughlin 介绍了
Document Object Model,解释其以 Web 页面被的下,并开始打通其于
JavaScript 中之用处。

暨众 Web 程序员一样,您可能以了 HTML。HTML 是程序员开始和 Web
页面打交道的主意;HTML
通常是他俩成功应用程序或站点前的结尾一步——调整一些搭架子、颜色还是样式。不过,虽然常用
HTML,但对 HTML
转至浏览器呈现于屏幕上时究竟有了呀,人们普遍存在误解。在自分析你认为可能发生的作业及其可能错误的因之前,我梦想而对统筹及劳动
Web 页面时提到的过程一清二楚:

1、一些总人口(通常是若!)在文本编辑器或 IDE 中创造 HTML。
2、然后你将 HTML 上充斥到 Web 服务器,例如 Apache HTTPD,并拿其公开于
Internet 或 intranet 上。
3、用户之所以 Firefox 或 SafariA 等浏览器请求而的 Web 页面。
4、用户之浏览器为你的服务器请求 HTML。
5、浏览器将从今服务器收到到的页面以图纸和文书方式表现;用户看到并激活 Web
页面。

立马看起非常基础,但工作很快会变换得有趣起来。事实上,步骤 4 和手续 5
之间有的皇皇数量之 “填充物(stuff)” 就是本文的关键。术语 “填充物”
也格外适用,因为多数程序员从来没真正考虑了当用户浏览器请求显示标记时究竟在标记身上产生了啊。 

·是否浏览器就是读取 HTML 中之公文并以那个形?
·CSS 呢?尤其是当 CSS 位于外部文件时。
·JavaScript 呢?它呢不足为怪位于外部文件被。
·浏览器如何处理这些项,如果拿事件处理程序、函数和体制映射到该文件标记?

实践证明,所有这些题目的答案都是 Document Object
Model。因此,废话少说,直接研究 DOM。

Web 程序员和符号

对于大部分程序员,当 Web 浏览器开始时他们的工作就是寿终正寝了。也就是说,将一个
HTML 文件放入 Web
浏览器的目录上后,您便就看她曾经“完成”,而且(满怀希望地)认为再也不会考虑其!说交编辑干净、组织好的页面时,这吗是一个巨大之目标;希望而的记跨浏览器、用各种本子的
CSS 和 JavaScript 显示它应当显示的内容,一点错都没有。

题目是这种方法限制了程序员对浏览器被诚产生的政工的明白。更重要的凡,它界定了公用客户端
JavaScript 动态更新、更改和重构 Web 页面的力量。摆脱这种范围,让你的 Web
站点有更不行之交互性和创造性。

程序员做啊

当典型的 Web 程序员,您或许启动文本编辑和 IDE 后就是开始输入 HTML、CSS
甚至
JavaScript。很容易觉得这些标记、选择器和特性只是要站点是显示如果召开的微小的任务。但是,在及时或多或少直达你得进行您的思绪,要发现及公是于集团而的情节。不要担心;我包及时不会见化为关于标记美观、您得如何认识及
Web 页面的真潜力或其他任何元物质的讲座。您要了解之是公当 Web
开发被究竟是什么角色。

说交页面的外观,顶多您不得不提提建议。您提供 CSS
样式表时,用户可覆盖而的体裁选择。您提供字体大小时,用户浏览器可吧视障者更改这些大大小小,或者当雅显示器(具有同等大之分辨率)上本比例缩小。甚至您选择的颜色与书为受制于用户显示器和用户在该系及安装之书体。虽然老您所能够来规划页面样式非常不利,但迅即毫不是
您对 Web 页面的尽可怜影响。

您绝对控制的凡 Web
页面的布局。您的标记不可改变,用户就是不克混作;他们之浏览器只能由君的 Web
服务器检索标记并显示它(虽然样式更适合用户之尝尝而不是你自己的品味)。但页面组织,不管是当该段落内还是当其余分区,都只有出于乃单独主宰。要是想其实更改而的页面(这是大部分
Ajax
应用程序所关切之),您操作的凡页面的组织。尽管很轻重新改一截文本的颜色,但以现有页面及上加文本或全区段要麻烦得多。不管用户如何筹划该区段的体制,都是出于乃决定页面本身的社。

记做啊

只要发现及您的标志是确实跟社有关的,您尽管见面针对其另眼相扣了。不见面当 h1
导致文本是大字号、黑色、粗体的,而会以为 h1
凡标题。用户如何看待这个题材和他们是使你的 CSS、他们好的 CSS
还是即时两者的做,这是辅助的考虑事项。相反,要发现及只有标记才会提供这种级别之集团;p
指明文本以段内,img 表示图像,div 将页面分成区段,等等。

还该清楚,样式与表现(事件处理程序和 JavaScript)是在此后
应用叫该团伙的。标记就绪后才能够针对其开展操作还是设计样式。所以,正使你可以
CSS 保存在 HTML
的表文件中同,标记的社以及那样式、格式和行为是分手之。虽然您得得就此
JavaScript
更改元素或文本的体裁,但实质上更改而的符所陈设的团组织却愈发有意思。

比方记住您的号子就也您的页面提供组织、框架,您便能够立于不败之地。再发展一有点步,您就会见懂得浏览器是哪些接受所有的公文组织并以那个变化吗最佳有趣的有的物的,即一律组对象,其中每个对象还可于改、添加或去。

文件标记的亮点

以讨论 Web 浏览器之前,值得考虑一下为什么纯文本绝对 是储存 HTML
的最佳选项(有关详细信息,请参阅
有关标记的有的外想法)。不考虑利害,只是回忆一下当每次查看页面时
HTML 是透过网络发送至 Web
浏览器的(为了简洁,不考虑高速缓存等)。真是又无于传递文本再中之艺术了。二进制对象、页面图形表示、重新组织的标记块等等,所有这整个还比纯粹文本文件通过网络传送要还艰难。

此外,浏览器也也之增光添彩。今天之浏览器允许用户改文本大小、按百分比伸缩图像、下载页面的
CSS 或
JavaScript(大多数情景),甚至更多,这全然消除了以其它类型的页面图形表示发送至浏览器上。但是,浏览器需要原
HTML,这样它们才会以浏览器中针对页面使用任何处理,而非是相信浏览器去处理该任务。同样地,将
CSS 从 JavaScript 分离和将 CSS 从 HTML
标记分离要求一律种易分离的格式。文本文件又平等不良变成该任务的不过好方法。

末段只是一样要的少数凡是,记住,新规范(比如 HTML 4.01 与 XHTML 1.0 和
1.1)承诺以内容(页面被之数码)与代表与体制(通常由 CSS
应用)分离。如果程序员要用 HTML 与 CSS
分离,然后强制浏览器检索粘结页面各片的部分页面表示,这会错过这些专业的多数优点。保持这些有些到浏览器时还直接分开使得浏览器在由服务器获取
HTML 时有矣破格的灵活性。

关于标记的另外想法

纯文本编辑:是对凡拂?
纯文本是储存标记的上佳选择,但是未相符编辑 标记。大行其道的是使
IDE,比如 Macromedia DreamWeaver 或重复强势点的 Microsoft®
FrontPage®,来操作 Web 页面标记。这些条件一般提供快捷方式和帮助来创造
Web 页面,尤其是于使用 CSS 和 JavaScript
时,二者都来源于实际页面标记以外的公文。许多丁按偏爱好用古老的记事本或
vi(我认同自己哉是里同样各类),这并无着急。不管怎样,最终结果尚且是充满标记的文书文件。

网络直达之公文:好东西

业已说过,文本是文档的极端好媒体,比如 HTML 或
CSS,在网络上叫千百差地传。当自身说浏览器表示文本很麻烦时,是特指将文件转换为用户查看的可视图形页面。这同浏览器实际上如何从
Web 浏览器检索页面没有涉嫌;在这种景象下,文本仍然是顶尖选择。

文件标记的弱点

恰恰使文本标记对于规划人员及页面创建者具有惊心动魄之助益之外,它对于浏览器为兼具相当独特之欠缺。具体来说,浏览器很麻烦直接以文件标记可视地意味着于用户(详细信息请参阅
有关标记的一部分别想法)。考虑下列常见的浏览器任务:

·基于元素类型、类、ID 及其于 HTML 文档中的职务,将 CSS
样式(通常来自外部文件中之大都单样式表)应用叫标记。
·基于 JavaScript 代码(通常位于外部文件)将样式与格式应用叫 HTML
文档的不同部分。
·基于 JavaScript 代码更改表单字段的价值。
·基于 JavaScript 代码,支持但看到效益,比如图像翻转和图像交换。

复杂并无在编码这些任务;其中每件事还是一定好之。复杂性来自实际落实请求动作的浏览器。如果标记存储吗文本,比如,想只要以
center-text 类的 p 元素中输入文本 (text-align: center),如何落实呢?

·将内联样式添加到文本也?
·将样式应用到浏览器中之 HTML 文本,并不过保障内容在中要么无放在中?
·应用无样式的 HTML,然后下用格式?

这些很艰苦的题目是本良少有人编写浏览器的由。(编写浏览器的丁当受最好义气的谢谢)

实,纯文本无是储存浏览器 HTML
的好办法,尽管文本是得到页面标记最好之化解方案。如果长 JavaScript 更改
页面结构的力,事情虽变得有些微妙了。浏览器应该将改了之布局还勾副磁盘吗?如何才能够维系文档的行版本也?

实实在在,文本不是答案。它难以修改,为那应用样式与行事非常困难,与今 Web
页面的动态本质在素有达相去甚远。

求助于树视图

这个题材之答案(至少是由本 Web 浏览器选择的答案)是应用树结构来代表
HTML。参见 清单 1,这是一个意味为本文标记的一对一简单以俗的 HTML
页面。

清单 1. 文书标记中之简约 HTML 页面

<html>
<head>
  <title>Trees, trees, everywhere</title>
</head>
<body>
  <h1>Trees, trees, everywhere</h1>
  <p>Welcome to a <em>really</em> boring
page.</p>
  <div>
    Come again soon.
    <img src=”come-again.gif” />
  </div>
</body>
</html>
浏览器接受该页面并以的变为树形结构,如图 1 所示。

Ajax 11

 

以保全本文的快,我开了少于简化。DOM 或 XML
方面的专家见面发觉及空白对于文档文本以 Web
浏览器树结构面临表示和说明方式的影响。肤浅的了解就见面要工作变得模棱两而,所以只要想弄清空白的影响,那极好不了了;如果未思的说话,那可以延续读下去,不要考虑它。当她变成问题常常,那时您就会见清楚若得之整整。

除实际的培育背景外,可能会见首先注意到培训被之合是以无限外层的 HTML
包含元素,即 html
元素开始之。使用树的比方,这名根元素。所以即便这是栽培之脚,当你查看并分析树之上,我啊屡见不鲜是始。如果它实在奏效,您得用整个树颠倒一下,但这诚然略拓展了树之比喻。

打彻底流出的丝意味着不同标记部分内的关系。head 和 body 元素是 html
根元素的儿女;title 是 head 的儿女,而文本 “Trees, trees, everywhere” 是
title 的孩子。整个树就如此组织下,直到浏览器获得同 图 1 近似的构造。

有些附加术语

为沿用树的比方,head 和 body 被称为 html
的分层(branches)。叫分支是坐它来协调之儿女。当到达树的末端时,您将入重点的文本,比如
“Trees, trees, everywhere” 和
“really”;这些平凡称为叶子,因为她从不团结之儿女。您不欲记住有这些术语,当您准备打明白特定术语的意思时,只要想像一下塑造结构就好多矣。

对象的值

既是了解了有中坚的术语,现在应关爱一下里面富含元素名称和文件的微矩形了(图
1)。每个矩形是一个靶;浏览器在中化解一部分文件问题。通过利用对象来表示
HTML 文档的各国一样局部,可以充分易地转移组织、应用样式、允许 JavaScript
访问文档,等等。

目标类型及特性

记的每个可能类型且出投机之靶子类型。例如,HTML 中之因素用 Element
对象类型表示。文档中之文书用 Text 类型表示,属性用 Attribute
类型表示,以此类推。

故而 Web
浏览器不仅可以以对象模型来代表文档(从而避免了拍卖静态文本),还足以为此对象类型立即识别出某事物是呀。HTML
文档被分析并更换为对象集合,如 图 1
所示,然后尖括号和转义序列(例如,使用 < 表示 <,使用 > 表示
>)等东西不再是题材了。这便令浏览器的干活(至少在解析输入 HTML
之后)变得再爱。弄清某事物究竟是素或属性并规定哪些处理该种的对象,这些操作都死略了。

经运用对象,Web
浏览器可变动这些目标的属性。例如,每个元素对象拥有一个父元素和同样多重子元素。所以上加新的子元素或文本只需要往元素的子元素列表中上加一个新的子元素。这些目标还保有
style 属性,所以高速又改元素或文本段的体非常简单。例如,要下
JavaScript 更改 div 的万丈,如下所示:

someDiv.style.height = “300px”;
改换句话说,Web
浏览器采用对象属性可以非常容易地还改树的外观与布局。将之比较作浏览器在内部拿页面表示也文本时务必开展的纷繁工作,每次变更属性或结构都需要浏览器还编辑静态文件、重新分析并当屏幕上更显示。有矣靶,所有这整个还解决了。

今天,花点时间开展一些 HTML
文档并为此树将那状出来。尽管当时看起是独无寻常的呼吁(尤其是以含极少代码的如此同样首稿子中),如果您愿意能决定这些造就,那么用熟悉她的布局。

于这进程中,可能会见发现有的怪异的业务。比如,考虑下列情形:

·属性发生了什么?
·分解为要素(比如 em 和 b)的文本为?
·结构不得法(比如当缺少了 p 标记时)的 HTML 呢?

假若熟悉这些题目后,就可知再次好地掌握下面几乎节省了。

严格有时是好事

若是尝试刚干的操练
I,您可能会见发现标记的树视图中有部分黑问题(如果非练吧,那就听自己说吧!)。事实上,在
清单 1 与 图 1 遭受即使见面发觉部分题材,首先看 p
元素是怎么说的。如果你咨询便的 Web 开发人员 “p
元素的公文内容是啊”,最常见的答案将是 “Welcome to a really boring Web
page.”。如果拿的同图 1
做比较,将会晤发现是答案(虽然合乎逻辑)是常有不正确的。

实质上,p 元素具有三独 不同的分段对象,其中并未一个饱含圆的 “Welcome to
a really boring Web page.” 文本。您见面意识文本的均等有些,比如 “Welcome to
a ” 和 “ boring Web
page”,但切莫是不折不扣。为了知道当下一点,记住标记中之其它内容都得改换为某种类型的目标。

除此以外,顺序无关紧要!如果浏览器显示对的对象,但显示顺序和君于 HTML
中提供的一一不同,那么您会想像有用户以怎样响应 Web
浏览器也?段落夹在页面标题和文章标题中,而当时不是您自己团队文档时的体也?很显然,浏览器必须保障元素以及文书的相继。 

于本例中,p 元素有三只不等部分: 

·em 元素之前的文本
·em 元素本身
·em 元素之后的文件

假设拿该逐个打乱,可能会见拿重点在文本的不当有。为了保持一切正常,p
元素有三只分支对象,其顺序是当 清单 1 的 HTML 中展示的逐条。而且,重点文本
“really” 不是p 的子元素;而是 p 的子元素 em 的子元素。

接头当下无异定义特别主要。尽管 “really” 文本以可能与其它 p
元素文本一起展示,但它们本是 em 元素的一直子元素。它可享有跟另外 p
文本不同之格式,而且得独自为外文件到处移动。

若果以的牢记在心,试着用图表示清单 2 与 3 中的
HTML,确保文本具有正确的父元素(而无文本最终见面如何展示在屏幕及)。

清单 2. 分包巧妙元素嵌套的号子

<html>
<head>
  <title>This is a little tricky</title>
</head>
<body>
  <h1>Pay <u>close</u> attention, OK?</h1>
  <div>
   <p>This p really isn’t <em>necessary</em>, but it
makes the 
      <span id=”bold-text”>structure <i>and</i> the
organization</span>
      of the page easier to keep up with.</p>
  </div>
</body>
</html>

清单 3. 重新抢眼的素嵌套

<html>
<head>
  <title>Trickier nesting, still</title>
</head>
<body>
  <div id=”main-body”>
   <div id=”contents”>
    <table> 
 
   <tr><th>Steps</th><th>Process</th></tr>
     <tr><td>1</td><td>Figure out the
<em>root element</em>.</td></tr>
     <tr><td>2</td><td>Deal with the <span
id=”code”>head</span> first,
         as it’s usually easy.</td></tr>
     <tr><td>3</td><td>Work through the <span
id=”code”>body</span>.
         Just <em>take your
time</em>.</td></tr>
    </table>
   </div>
   <div id=”closing”>
    This link is <em>not</em> active, but if it were, the
answers
    to this <a href=”answers.html”><img src=”exercise.gif”
/></a> would
    be there. But <em>do the exercise anyway!</em>
   </div>
  </div>
</body>
</html>
在本文末的 GIF 文件 图 2 中之 tricky-solution.gif 和 图 3 中的
trickier-solution.gif
中以见面找到这些演习的答案。不要偷看,先花把日子自动解答一下。这样能够协助你领略组织树时应用的平整来多么严峻,并确实扶持而掌握
HTML 及其树结构。

属性呢?

当您准备打明白什么处理属性时,是否遇到有题目也?前已提及,属性确实有友好的对象类型,但性能确实无是显得她的元素的子元素,嵌套元素以及文件不以一如既往属性
“级别”,您将注意到,清单 2 和 3 中练的答案没有出示属性。

特性事实上存储于浏览器采用的对象模型中,但其有一对特别状况。每个元素都发生可用属性的列表,且与子对象列表是分开的。所以
div 元素可能来一个包含属性 “id” 和任何一个属于性 “class” 的列表。

牢记,元素的特性必须有所无可比拟的称,也就是说,一个因素不克出一定量只 “id”
或鲜只 “class”
属性。这叫列表易于维护和看。在产一样篇稿子将见面看,您可概括调用诸如
getAttribute(“id”)
的艺术来仍名获取属性的价。还可就此一般之方式调用来补加属性或安装(重置)现有属性之价。

值得指出的凡,属性名的惟一性使得该列表不同于子对象列表。p 元素可以生出多独
em
元素,所以子对象列表可以蕴涵多单更项。尽管子项列表和属性列表的操作方法一般,但一个可以分包重复项(对象的子项),而一个未克(元素对象的特性)。最后,只有元素具有属性,所以文本对象没用来存储属性之增大列表。

凌乱的 HTML

以此起彼伏之前,谈到浏览器如何拿符号转换为培训表示,还有一个主题值得探究,即浏览器如何处理不是格式良好的符号。格式良好
是 XML 广泛运用的一个术语,有星星点点个为主意思:

·每个开始标记都发一个和的配合的终止标记。所以每个 <p> 在文档中同
</p> 匹配,每个 <div> 与 </div> 匹配,等等。
·最里面的上马标记和最中间的收标记相配合,然后次中的初始标记和差中的了断标记相配合,依此类推。所以
<b><i>bold and italics</b></i>
是无合法的,因为极度里面的开头标记 <i> 与最中间的扫尾标记 <b>
匹配不当。要要的格式良好,要么 切换开始标记顺序,要么
切换了标记顺序。(如果双方都切换,则按照会产出问题)。
深切钻研就片长规则。这有限漫长规则不仅简化了文档的集体,还免去了不定性。是否应先应用粗体后使斜体?或恰恰相反?如果认为这种顺序与不定性不是死问题,那么请牢记,CSS
允许规则覆盖任何规则,所以,例如,如果 b 元素中文本之字体不同于 i
元素中的书,则格式的以顺序将更换得十分重要。因此,HTML
的格式良好性有着重大的企图。

若是浏览器收到了未是格式良好的文档,它只见面尽量。得到的培养结构于太好状态下用凡作者希望的原本页面的类似,最特别情况下以愈演愈烈。如果你就用页面加载到浏览器中后看到了出乎意料的结果,您或许当目浏览器结果时会见蒙您的结构应该怎么样,并沮丧地继承做事。当然,搞定是题目相当简单:确保文档是格式良好的!如果未明白怎么编写标准化的
HTML,请咨询 参考资料 获得赞助。

DOM 简介

顶目前为止,您就知晓浏览器将 Web
页面转换为目标表示,可能你还会见怀疑,对象表示是 DOM 树。DOM 代表
Document Object Model,是一个规范,可打 World Wide Web Consortium (W3C)
获得(您可以参阅 参考资料 中之有的 DOM 相关链接)。

然而再重要之是,DOM
定义了目标的品类以及属性,从而允许浏览器表示标记。(本系列下同样首文章用特别讲述在
JavaScript 和 Ajax 代码中采用 DOM 的正规化。)

文档对象

首先,需要拜访对象模型本身。这非常容易;要于运行为 Web 页面上的任何
JavaScript 代码中采取内置 document 变量,可以编写如下代码:

var domTree = document;
当然,该代码本身没什么用,但它以身作则了每个 Web 浏览器使得 document
对象可是用以 JavaScript 代码,并演示了对象表示标记的共同体树(图 1)。

各级起都是一个节点

确定性,document
对象好关键,但眼看才是初步。在更为深刻之前,需要上学其他一个术语:节点。您都知道标记的每个有还由一个目标表示,但它们不仅仅是一个随意的靶子,它是一定项目的对象,一个
DOM
节点。更特定的品种,比如文本、元素以及总体性,都连续自是中心的节点类型。所以可以生出文件节点、元素节点和属性节点。

如若已产生许多 JavaScript 编程经验,那你或许早已在采用 DOM
代码了。如果到目前为止您一直当跟踪本 Ajax 系列,那么现在你得 使用 DOM
代码有一段时间了。例如,代码行 var number =
document.getElementById(“phone”).value; 使用 DOM
查找特定元素,然后搜索该因素的值(在本例中凡是一个表单字段)。所以就算你没察觉及立刻一点,但若每次将
document 键入 JavaScript 代码时还见面采用 DOM。

详细解释早已拟过的术语,DOM 树是目标的树,但更具体地说,它是节点
对象的造。在 Ajax 应用程序中还是外其他 JavaScript
中,可以行使这些节点产生下列效果,比如移除元素及其内容,突出展示特定文本,或补充加新图像元素。因为还发出在客户端(运行于
Web
浏览器中之代码),所以这些作用就发出,而休跟服务器通信。最终结出通常是应用程序感觉起来响应更快,因为当求转向服务器时以及说明响应时,Web
页面上的情改动不会见油然而生增长时之暂停。

当大部编程语言中,需要上各级种节点类型的实际上目标名称,学习可用之属性,并澄清楚类型和强制转换;但于
JavaScript
中这都未是必要的。您可以就创造一个变量,并也其分配您要的靶子(正使您曾看到底):

var domTree = document;
var phoneNumberElement = document.getElementById(“phone”);
var phoneNumber = phoneNumberElement.value;
无项目,JavaScript 根据需要创造变量并也夫分配是的色。结果,从
JavaScript 中应用 DOM 变得微不足道(将来发出同首稿子会专门讲述与 XML
相关的 DOM,那时拿更加巧妙)。

结束语

当此间,我要是被你留给一点悬念。显然,这毫无是指向 DOM
完全详尽的证明;事实上,本文不过是 DOM 的简介。DOM
的始末一经远多为己今天牵线的这些!

依系列之生一样篇稿子将扩展这些意见,并深入探讨如何在 JavaScript 中采取 DOM
来更新 Web 页面、快速又改 HTML
并为卿的用户创建更交互的体会。在后专门讲述在 Ajax 请求中采用 XML
的稿子被,我以再次返回来谈谈 DOM。所以要熟悉 DOM,它是 Ajax
应用程序的一个关键组成部分。

此时,深入摸底 DOM 将十分简短,比如详细规划怎么样在 DOM
树中倒、获得元素与文件的值、遍历节点列表,等等,但就或许会见吃你来这种印象,即
DOM 是关于代码的,而事实上并非如此。

在读书下同样首文章之前,试着思想一下扶植结构并用一些而自己的 HTML
实践一下,以查看 Web 浏览器是安用 HTML
转换为标志的树视图的。此外,思考一下 DOM
树的团队,并据此本文介绍的特种情况施行一下:属性、有素混合在中的文本、没有
文本内容之素(比如 img 元素)。

设若实在掌握了这些概念,然后上了 JavaScript 和 DOM
的语法(下一样篇稿子),则会令响应更为容易。

而并非忘记了,这里出清单 2 同 3 的答案,其中还包含了演示代码!

图 2. 清单 2 的答案
Ajax 12

 

图 3. 清单 3 的答案

Ajax 13

 

相关文章