Ajax 完整教程 (转)

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 报告错误

图片 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 正常干活

图片 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 代码

图片 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 表单
图片 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

图片 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
图片 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 的响应文件

图片 7

而是当稳状态 3 中,服务器都以 responseText
属性中推广上了一个价值,至少在斯事例中凡这么(请参见 图 4)。

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

图片 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. 常见错误处理

图片 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. 异常错误处理

图片 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 所示。

图片 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 的答案
图片 12

图 3. 清单 3 的答案

图片 13

相关文章