我们须要一种方法使 发送的要求 和 吸收的相应 只包含须要的数据而不是全体 HTML 页面。

多数交互都是在已有页面上增加细节、修正主体文本或者覆盖原有数据。
这些情形下,Ajax 和 Web 2.0 方法许可在不 更新全体 HTML 页面的情形下发送和吸收数据。

XMLHttprequest 简介

jsp文本框输入后自动执行ajaxAjax完全具体教程二 JavaScript

XMLHttpRequest:一个 JavaScript 工具,它是Web 2.0、Ajax 和大部分其他内容的核心。
下面给出将要用于该工具的很少的几个方法和属性:

open():建立到做事器的新要求。

send():向做事器发送要求。

abort():退出当前要求。

readyState:供应当前 HTML 的就绪状态。

responseText:做事器返回的要求相应文本。

用 XMLHttpRequest 做什么?

这些方法和属性都与发送要求及处理相应有关。
事实上,如果看到 XMLHttpRequest 的所有方法和属性,就会创造它们都 与非常大略的要求/相应模型有关。

首先须要创建一个新变量并赋给它一个 XMLHttpRequest 工具实例。

清单 1. 创建新的 XMLHttpRequest 工具

<script language=\"大众javascript\"大众 type=\"大众text/javascript\"大众&gt;

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 警告关照用户涌现了问题。

现在已经得到了一段带有缺点检讨的 XMLHttpRequest 工具创建代码,还可以见告您哪儿出了问题。

搪塞 Microsoft

我们须要采取不同的方法处理 Microsoft 浏览器。

清单 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 试验,就该当看到已经创建的表单(没有缺点)。

静态与动态

再看一看清单 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();

// 利用request变量进行一系列的操作

}

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

<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>你的订单会被发送到:</p>

<div id=\公众address\"大众></div>

<p>你的订单类型:</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 表单中输入数据,乃至离开表单。
做事器悄悄地相应要求,完成后见告原来的要求者事情已经结束。

发送要求

一旦用 open() 配置好之后,就可以发送要求了。

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

var url = \"大众/cgi-local/lookupCustomer.php?phone=\"大众 + escape(phone);

虽然可以利用 send() 发送数据,但也能通过 URL 本身发送数据。
事实上,GET 要求(在范例的 Ajax 运用中大约占 80%)中,用 URL 发送数据要随意马虎得多。
如果须要发送安全信息或 XML,可能要考虑利用 send() 发送内容。
如果不须要通过 send() 通报数据,则只要通报 null 作为该方法的参数即可。

清单 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 又涌现了……

根据浏览器的不同,在表单停滞弹出警告之前会看到两次、三次乃至四次警告。
这是怎么回事呢?原来我们还没有考虑 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 风格的行分隔符

来代替。
更换过程利用 replace() 函数和正则表达式完成。
末了,修正后的文本作为 HTML 表单 div 中的内部 HTML。
结果便是表单溘然用客户信息更新了,如图 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 要乞降以不同的格式发送数据。

更多干系问题:Ajax视频教程

本文系列文章:

Ajax完全详细教程(一)

Ajax完全详细教程(三)

以上便是Ajax完全详细教程(二)的详细内容,更多请关注其它干系文章!

更多技巧请《转发 + 关注》哦!