Ajax原理
Ajax主要组成部分
Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写。
Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。
Ajax的核心是JavaScript对象 XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。
Ajax原理
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据.
Ajax是做什么的?
目前,编写应用程序时有两种基本的选择:
* 桌面应用程序
* Web 应用程序 两者是类似的,桌面应用程序通常以 CD 为介质(有时候可从网站下载)并完全安装到您的计算机上。桌面应用程序可能使用互联网下载更新,但运行这些应用程序的代码在桌面计算机上。Web 应用程序运行在某处的 Web 服务器上 ------ 毫不奇怪,要通过 Web 浏览器访问这种应用程序。不 过,比这些应用程序的运行代码放在何处更重要的是,应用程序如何运转以及如何与其进行交互。桌面应用程序一般很快(就在您的计算机上运行,不用等待互联网 连接),具有漂亮的用户界面(通常和操作系统有关)和非凡的动态性。可以单击、选择、输入、打开菜单和子菜单、到处巡游,基本上不需要等待。另一方面,Web 应用程序是最新的潮流,它们提供了在桌面上不能实现的服务(比如 Amazon.com 和 eBay)。但是,伴随着 Web 的强大而出现的是等待,等待服务器响应,等待屏幕刷新,等待请求返回和生成新的页面。显然这样说过于简略了,但基本的概念就是如此。您可能已经猜到,Ajax 尝试建立桌面应用程序的功能和交互性,与不断更新的 Web 应用程序之间的桥梁。可以使用像桌面应用程序中常见的动态用户界面和漂亮的控件,不过是在 Web 应用程序中。
Ajax 如何将笨拙的 Web 界面转化成能迅速响应的 Ajax 应用程序
下面是 Ajax 应用程序所用到的基本技术:
* HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。
* JavaScript 代码是运行 Ajax 应用程序的核心代码,帮助改进与服务器应用程序的通信。
* DHTML 或 Dynamic HTML,用于动态更新表单。我们将使用div、span和其他动态 HTML 元素来标记 HTML。
* 文档对象模型 DOM 用于(通过 JavaScript 代码)处理 HTML 结构和(某些情况下)服务器返回的 XML。
或者可以说是:
1.使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。
具体操作
XMLHttpRequest对象
获得XMLHttpRequest对象可能需要采用不同的方法
使用 Microsoft 浏览器Microsoft 浏览器 Internet Explorer 使用 MSXML 解析器处理 XML。因此如果编写的 Ajax 应用程序要和 Internet Explorer 打交道,那么必须用一种特殊的方式创建对象。但并不是这么简单。根据 Internet Explorer 中安装的 JavaScript 技术版本不同,MSXML 实际上有两种不同的版本,因此必须对这两种情况分别编写代码。请参阅 清单3,其中的代码在 Microsoft 浏览器上创建了一个XMLHttpRequest。清单 3. 在 Microsoft 浏览器上创建 XMLHttpRequest 对象
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
{color:black}} catch (e) {{color}
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
{color:black}} catch (e2) {{color}
xmlHttp = false;
{color:black}}
{color:}}
处理 Mozilla 和非 Microsoft 浏览器
如果选择的浏览器不是 Internet Explorer,或者为非 Microsoft 浏览器编写代码,就需要使用不同的代码。事实上就是 清单1 所示的一行简单代码:
var xmlHttp = new XMLHttpRequest object;。这行简单得多的代码在 Mozilla、Firefox、Safari、Opera 以及基本上所有以任何形式或方式支持 Ajax 的非 Microsoft 浏览器中,创建了XMLHttpRequest对象。
要了解的一个对象可能对您来说也是最陌生的,即XMLHttpRequest。这是一个 JavaScript 对象,创建该对象很简单,如清单1 所示。清单 1. 创建新的 XMLHttpRequest 对象
<script language="javascript" type="text/javascript">
var xmlHttp = new XMLHttpRequest();
</script>
要知道这是处理所有服务器通信的对象
结合起来
清单 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");
{color:black}} catch (e) {{color}
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
{color:black}} catch (e2) {{color}
xmlHttp = false;
{color:black}}
{color:}}
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
{color:black}} | 现在先不管那些注释掉的奇怪符号,如@cc_on,这是特殊的 JavaScript 编译器命令,将在下一期针对XMLHttpRequest的文章中详细讨论。这段代码的核心分为三步:1. 建立一个变量xmlHttp来引用即将创建的XMLHttpRequest对象。2 . 尝试在 Microsoft 浏览器中创建该对象:o 尝试使用Msxml2.XMLHTTP对象创建它。o 如果失败,再尝试Microsoft.XMLHTTP对象。3. 如果仍然没有建立xmlHttp,则以非 Microsoft 的方式创建该对象。 最后,xmlHttp应该引用一个有效的XMLHttpRequest对象,无论运行什么样的浏览器。
通过XMLHttpRequest对象与服务器进行对话的是 JavaScript 技术。这不是一般的应用程序流,这恰恰是 Ajax 的强大功能的来源。在一般的 Web 应用程序中,用户填写表单字段并单击 Submit 按钮。然后整个表单发送到服务器,服务器将它转发给处理表单的脚本(通常是 PHP 或 Java,也可能是 CGI 进程或者类似的东西),脚本执行完成后再发送回全新的页面。该页面可能是带有已经填充某些数据的新表单的 HTML,也可能是确认页面,或者是具有根据原来表单中输入数据选择的某些选项的页面。当然,在服务器上的脚本或程序处理和返回新表单时用户必须等待。屏幕变成一片空白,等到服务器返回数据后再重新绘制。这就是交互性差的原因,用户得不到立即反馈,因此感觉不同于桌面应用程序。Ajax 基本上就是把 JavaScript 技术和XMLHttpRequest对象放在 Web 表单和服务器之间。当用户填写表单时,数据发送给一些 JavaScript 代码而不是直接发送给服务器。相反,JavaScript 代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。换句话说,JavaScript 代码在幕后发送请求,用户甚至不知道请求的发出。更好的是,请求是异步发送的,就是说 JavaScript 代码(和用户)不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。然后,服务器将数据返回 JavaScript 代码(仍然在 Web 表单中),后者决定如何处理这些数据。它可以迅速更新表单数据,让人感觉应用程序是立即完成的,表单没有提交或刷新而用户得到了新数据。JavaScript 代码甚至可以对收到的数据执行某种计算,再发送另一个请求,完全不需要用户干预!这就是XMLHttpRequest的强大之处。它可以根据需要自行与服务器进行交互,用户甚至可以完全不知道幕后发生的一切。结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验,但是背后又拥有互联网的全部强大力量。
传统web应用与AJAX应用的比较:处理用户交互
传统web应用与AJAX应用的比较:交互模式
XMLHttpRequest这个对象的属性如下:
onreadystatechange 每次状态改变所触发事件的事件处理程序。
(open()方法中 "true" 这个小小的关键字建立了异步请求)该属性允许指定一个回调函数。回调允许服务器反向调用Web 页面中的代码。它也给了服务器一定程度的控制权,当服务器完成请求之后,会查看XMLHttpRequest对象,特别是 onreadystatechange属性。然后调用该属性指定的任何方法。之所以称为回调是因为服务器向网页发起调用,无论网页本身在做什么。比方说,可能在用户坐在椅子上手没有碰键盘的时候调用该方法,但是也可能在用户输入、移动鼠标、滚动屏幕或者点击按钮时调用该方法。它并不关心用户在做什么。 这就是称之为异步的原因:用户在一层上操作表单,而在另一层上服务器响应请求并触发onreadystatechange属性指定的回调方法。
需要特别注意的是该属性在代码中设置的位置------ 它是在调用send()之前设置的。发送请求之前必须设置该属性,这样服务器在回答完成请求之后才能查看该属性。
responseText 从服务器进程返回数据的字符串形式。
读取响应文本
可以确保请求已经处理完成(通过就绪状态),服务器给出了正常的响应(通过状态码),最后我们可以处理服务器返回的数据了。返回的数据保存在 XMLHttpRequest 对象的 responseText 属性中。
关于 responseText 中的文本内容,比如格式和长度,有意保持含糊。这样服务器就可以将文本设置成任何内容。比方说,一种脚本可能返回逗号分隔的值,另一种则使用管道符(即 | 字符)分隔的值,还有一种则返回长文本字符串。何去何从由服务器决定。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
如果服务器选择使用 XML 响应则该属性包含(也许您已经猜到)XML 响应。处理 XML 响应和处理普通文本有很大不同,涉及到解析、文档对象模型(DOM)和其他一些问题。(一般不用这个)
status 从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)
HTTP 状态码
虽然 清单 13中的代码看起来似乎不错,但是还有一个问题 ------ 如果服务器响应请求并完成了处理但是报告了一个错误怎么办?要知道,服务器端代码应该明白它是由 Ajax、JSP、普通 HTML 表单或其他类型的代码调用的,但只能使用传统的 Web 专用方法报告信息。而在 Web 世界中,HTTP 代码可以处理请求中可能发生的各种问题。
比方说,您肯定遇到过输入了错误的 URL 请求而得到 404 错误码的情形,它表示该页面不存在。这仅仅是 HTTP 请求能够收到的众多错误码中的一种。表示所访问数据受到保护或者禁止访问的 403 和 401 也很常见。无论哪种情况,这些错误码都是从完成的响应 得到的。换句话说,服务器履行了请求(即 HTTP 就绪状态是 4)但是没有返回客户机预期的数据。
因此除了就绪状态外,还需要检查 HTTP 状态。我们期望的状态码是 200,它表示一切顺利。如果就绪状态是 4 而且状态码是 200,就可以处理服务器的数据了,而且这些数据应该就是要求的数据(而不是错误或者其他有问题的信息)。因此还要在回调方法中增加状态检查,如 清单 14 所示。
清单 14. 检查 HTTP 状态码
function updatePage()
Unknown macro: { if (request.readyState == 4) if (request.status == 200) alert("Server is done!"); }
status Text 伴随状态码的字符串信息
readyState 对象状态值
根据浏览器的不同,在表单停止弹出警告之前会看到两次、三次甚至四次警告。这是怎么回事呢?原来我们还没有考虑 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。在上中看到,服务器多次调用 回调函数,每次调用都会弹出警告框 ------ 可能和预期的不同!
对于 Ajax 编程,需要直接处理的惟一状态就是就绪状态 4,它表示服务器响应已经完成,可以安全地使用响应数据了。基于此,回调方法中的第一行应该如 清单 13 所示。
清单 13. 检查就绪状态
function updatePage()
Unknown macro: { if (request.readyState == 4) alert("Server is done!"); }
修改后就可以保证服务器的处理已经完成。尝试运行新版本的 Ajax 代码,现在就会看到与预期的一样,只显示一次警告信息了。
为了增加更健壮的错误处理并尽量避免过于复杂,可以增加一两个状态码检查,请看一看 清单 15 中修改后的 updatePage() 版本。
清单 15. 增加一点错误检查
function updatePage()
Unknown macro: { 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}
XMLHttpRequest这个对象的方法如下:
* open():建立到服务器的新请求。该方法有五个参数:
1. request-type:发送请求的类型。典型的值是 GET 或 POST,但也可以发送 HEAD 请求。
2. url:要连接的 URL。
3. asynch:如果希望使用异步连接则为 true,否则为 false。该参数是可选的,默认为 true。
4. username:如果需要身份验证,则可以在此指定用户名。该可选参数没有默认值。
5. password:如果需要身份验证,则可以在此指定口令。该可选参数没有默认值。
(通常使用其中的前三个参数。事实上,即使需要异步连接,也应该指定第三个参数为 "true"。这是默认值,但坚持明确指定请求是异步的还是同步的更容 易理解。)
* send():向服务器发送请求。该方法只有一个参数:
1. 就是要发送的内容。但是在考虑这个方法之前,回想一下前面已经通过 URL 本身发送过数据了:虽然可以使用 send() 发送数据,但也能通过 URL 本身发送数据。事实上,GET 请求(在典型的 Ajax 应用中大约占 80%)中,用 URL 发送数据要容易得多。如果需要发送安全信息或 XML,可能要考虑使用 send() 发送内容(本系列的后续文章中将讨论安全数据和 XML 消息)。如果不需要通过 send() 传递数据,则只要传递 null 作为该方法的参数即可。(一般是传递null值作为参数)
* abort():退出当前请求。
* readyState:提供当前 HTML 的就绪状态。
4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据。
加入一些 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 放到一边吧。 |
ajax的优点
Ajax的给我们带来的好处大家基本上都深有体会,在这里我只简单的讲几点:
1、最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好。
2、使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是"按需取数据",可以最大程度的减少冗余请求,和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
ajax的缺点
下面我着重讲一讲ajax的缺陷,因为平时我们大多注意的都是ajax给我们所带来的好处诸如用户体验的提升。而对ajax所带来的缺陷有所忽视。
下面所阐述的ajax的缺陷都是它先天所产生的。
1、 ajax干掉了back按钮,即对浏览器后退机制的破坏。后退按钮是一个标准的web站点的重要功能,但是它没法和js进行很好的合作。这是ajax所带 来的一个比较严重的问题,因为用户往往是希望能够通过后退来取消前一次操作的。那么对于这个问题有没有办法?答案是肯定的,用过Gmail的知 道,Gmail下面采用的ajax技术解决了这个问题,在Gmail下面是可以后退的,但是,它也并不能改变ajax的机制,它只是采用的一个比较笨但是 有效的办法,即用户单击后退按钮访问历史记录时,通过创建或使用一个隐藏的IFRAME来重现页面上的变更。(例如,当用户在Google Maps中单 击后退时,它在一个隐藏的IFRAME中进行搜索,然后将搜索结果反映到Ajax元素上,以便将应用程序状态恢复到当时的状态。)
但是,虽然说这个问题是可以解决的,但是它所带来的开发成本是非常高的,和ajax框架所要求的快速开发是相背离的。这是ajax所带来的一个非常严重的问题。
2、安全问题
技 术同时也对IT企业带来了新的安全威胁,ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。 ajax的逻辑可以对客户端的安全扫描技术隐藏起来,允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点,诸如跨站点脚步攻 击、SQL注入攻击和基于credentials的安全漏洞等。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。至少从目前看 来,像ajax.dll,ajaxpro.dll这些ajax框架是会破坏程序的异常机制的。关于这个问题,我曾经在开发过程中遇到过,但是查了一下网上 几乎没有相关的介绍。后来我自己做了一次试验,分别采用ajax和传统的form提交的模式来删除一条数据......给我们的调试带来了很大的困难。
5、另外,像其他方面的一些问题,比如说违背了url和资源定位的初衷。例如,我给你一个url地址,如果采用了ajax技术,也许你在该url地址下面看到的和我在这个url地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
6、一些手持设备(如手机、PDA等)现在还不能很好的支持ajax,比如说我们在手机的浏览器上打开采用ajax技术的网站时,它目前是不支持的,当然,这个问题和我们没太多关系。
Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写。
Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。
Ajax的核心是JavaScript对象 XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。
Ajax原理
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据.
Ajax是做什么的?
目前,编写应用程序时有两种基本的选择:
* 桌面应用程序
* Web 应用程序 两者是类似的,桌面应用程序通常以 CD 为介质(有时候可从网站下载)并完全安装到您的计算机上。桌面应用程序可能使用互联网下载更新,但运行这些应用程序的代码在桌面计算机上。Web 应用程序运行在某处的 Web 服务器上 ------ 毫不奇怪,要通过 Web 浏览器访问这种应用程序。不 过,比这些应用程序的运行代码放在何处更重要的是,应用程序如何运转以及如何与其进行交互。桌面应用程序一般很快(就在您的计算机上运行,不用等待互联网 连接),具有漂亮的用户界面(通常和操作系统有关)和非凡的动态性。可以单击、选择、输入、打开菜单和子菜单、到处巡游,基本上不需要等待。另一方面,Web 应用程序是最新的潮流,它们提供了在桌面上不能实现的服务(比如 Amazon.com 和 eBay)。但是,伴随着 Web 的强大而出现的是等待,等待服务器响应,等待屏幕刷新,等待请求返回和生成新的页面。显然这样说过于简略了,但基本的概念就是如此。您可能已经猜到,Ajax 尝试建立桌面应用程序的功能和交互性,与不断更新的 Web 应用程序之间的桥梁。可以使用像桌面应用程序中常见的动态用户界面和漂亮的控件,不过是在 Web 应用程序中。
Ajax 如何将笨拙的 Web 界面转化成能迅速响应的 Ajax 应用程序
下面是 Ajax 应用程序所用到的基本技术:
* HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。
* JavaScript 代码是运行 Ajax 应用程序的核心代码,帮助改进与服务器应用程序的通信。
* DHTML 或 Dynamic HTML,用于动态更新表单。我们将使用div、span和其他动态 HTML 元素来标记 HTML。
* 文档对象模型 DOM 用于(通过 JavaScript 代码)处理 HTML 结构和(某些情况下)服务器返回的 XML。
或者可以说是:
1.使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。
具体操作
XMLHttpRequest对象
获得XMLHttpRequest对象可能需要采用不同的方法
使用 Microsoft 浏览器Microsoft 浏览器 Internet Explorer 使用 MSXML 解析器处理 XML。因此如果编写的 Ajax 应用程序要和 Internet Explorer 打交道,那么必须用一种特殊的方式创建对象。但并不是这么简单。根据 Internet Explorer 中安装的 JavaScript 技术版本不同,MSXML 实际上有两种不同的版本,因此必须对这两种情况分别编写代码。请参阅 清单3,其中的代码在 Microsoft 浏览器上创建了一个XMLHttpRequest。清单 3. 在 Microsoft 浏览器上创建 XMLHttpRequest 对象
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
{color:black}} catch (e) {{color}
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
{color:black}} catch (e2) {{color}
xmlHttp = false;
{color:black}}
{color:}}
处理 Mozilla 和非 Microsoft 浏览器
如果选择的浏览器不是 Internet Explorer,或者为非 Microsoft 浏览器编写代码,就需要使用不同的代码。事实上就是 清单1 所示的一行简单代码:
var xmlHttp = new XMLHttpRequest object;。这行简单得多的代码在 Mozilla、Firefox、Safari、Opera 以及基本上所有以任何形式或方式支持 Ajax 的非 Microsoft 浏览器中,创建了XMLHttpRequest对象。
要了解的一个对象可能对您来说也是最陌生的,即XMLHttpRequest。这是一个 JavaScript 对象,创建该对象很简单,如清单1 所示。清单 1. 创建新的 XMLHttpRequest 对象
<script language="javascript" type="text/javascript">
var xmlHttp = new XMLHttpRequest();
</script>
要知道这是处理所有服务器通信的对象
结合起来
清单 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");
{color:black}} catch (e) {{color}
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
{color:black}} catch (e2) {{color}
xmlHttp = false;
{color:black}}
{color:}}
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
{color:black}} | 现在先不管那些注释掉的奇怪符号,如@cc_on,这是特殊的 JavaScript 编译器命令,将在下一期针对XMLHttpRequest的文章中详细讨论。这段代码的核心分为三步:1. 建立一个变量xmlHttp来引用即将创建的XMLHttpRequest对象。2 . 尝试在 Microsoft 浏览器中创建该对象:o 尝试使用Msxml2.XMLHTTP对象创建它。o 如果失败,再尝试Microsoft.XMLHTTP对象。3. 如果仍然没有建立xmlHttp,则以非 Microsoft 的方式创建该对象。 最后,xmlHttp应该引用一个有效的XMLHttpRequest对象,无论运行什么样的浏览器。
通过XMLHttpRequest对象与服务器进行对话的是 JavaScript 技术。这不是一般的应用程序流,这恰恰是 Ajax 的强大功能的来源。在一般的 Web 应用程序中,用户填写表单字段并单击 Submit 按钮。然后整个表单发送到服务器,服务器将它转发给处理表单的脚本(通常是 PHP 或 Java,也可能是 CGI 进程或者类似的东西),脚本执行完成后再发送回全新的页面。该页面可能是带有已经填充某些数据的新表单的 HTML,也可能是确认页面,或者是具有根据原来表单中输入数据选择的某些选项的页面。当然,在服务器上的脚本或程序处理和返回新表单时用户必须等待。屏幕变成一片空白,等到服务器返回数据后再重新绘制。这就是交互性差的原因,用户得不到立即反馈,因此感觉不同于桌面应用程序。Ajax 基本上就是把 JavaScript 技术和XMLHttpRequest对象放在 Web 表单和服务器之间。当用户填写表单时,数据发送给一些 JavaScript 代码而不是直接发送给服务器。相反,JavaScript 代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。换句话说,JavaScript 代码在幕后发送请求,用户甚至不知道请求的发出。更好的是,请求是异步发送的,就是说 JavaScript 代码(和用户)不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。然后,服务器将数据返回 JavaScript 代码(仍然在 Web 表单中),后者决定如何处理这些数据。它可以迅速更新表单数据,让人感觉应用程序是立即完成的,表单没有提交或刷新而用户得到了新数据。JavaScript 代码甚至可以对收到的数据执行某种计算,再发送另一个请求,完全不需要用户干预!这就是XMLHttpRequest的强大之处。它可以根据需要自行与服务器进行交互,用户甚至可以完全不知道幕后发生的一切。结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验,但是背后又拥有互联网的全部强大力量。
传统web应用与AJAX应用的比较:处理用户交互
传统web应用与AJAX应用的比较:交互模式
XMLHttpRequest这个对象的属性如下:
onreadystatechange 每次状态改变所触发事件的事件处理程序。
(open()方法中 "true" 这个小小的关键字建立了异步请求)该属性允许指定一个回调函数。回调允许服务器反向调用Web 页面中的代码。它也给了服务器一定程度的控制权,当服务器完成请求之后,会查看XMLHttpRequest对象,特别是 onreadystatechange属性。然后调用该属性指定的任何方法。之所以称为回调是因为服务器向网页发起调用,无论网页本身在做什么。比方说,可能在用户坐在椅子上手没有碰键盘的时候调用该方法,但是也可能在用户输入、移动鼠标、滚动屏幕或者点击按钮时调用该方法。它并不关心用户在做什么。 这就是称之为异步的原因:用户在一层上操作表单,而在另一层上服务器响应请求并触发onreadystatechange属性指定的回调方法。
需要特别注意的是该属性在代码中设置的位置------ 它是在调用send()之前设置的。发送请求之前必须设置该属性,这样服务器在回答完成请求之后才能查看该属性。
responseText 从服务器进程返回数据的字符串形式。
读取响应文本
可以确保请求已经处理完成(通过就绪状态),服务器给出了正常的响应(通过状态码),最后我们可以处理服务器返回的数据了。返回的数据保存在 XMLHttpRequest 对象的 responseText 属性中。
关于 responseText 中的文本内容,比如格式和长度,有意保持含糊。这样服务器就可以将文本设置成任何内容。比方说,一种脚本可能返回逗号分隔的值,另一种则使用管道符(即 | 字符)分隔的值,还有一种则返回长文本字符串。何去何从由服务器决定。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
如果服务器选择使用 XML 响应则该属性包含(也许您已经猜到)XML 响应。处理 XML 响应和处理普通文本有很大不同,涉及到解析、文档对象模型(DOM)和其他一些问题。(一般不用这个)
status 从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)
HTTP 状态码
虽然 清单 13中的代码看起来似乎不错,但是还有一个问题 ------ 如果服务器响应请求并完成了处理但是报告了一个错误怎么办?要知道,服务器端代码应该明白它是由 Ajax、JSP、普通 HTML 表单或其他类型的代码调用的,但只能使用传统的 Web 专用方法报告信息。而在 Web 世界中,HTTP 代码可以处理请求中可能发生的各种问题。
比方说,您肯定遇到过输入了错误的 URL 请求而得到 404 错误码的情形,它表示该页面不存在。这仅仅是 HTTP 请求能够收到的众多错误码中的一种。表示所访问数据受到保护或者禁止访问的 403 和 401 也很常见。无论哪种情况,这些错误码都是从完成的响应 得到的。换句话说,服务器履行了请求(即 HTTP 就绪状态是 4)但是没有返回客户机预期的数据。
因此除了就绪状态外,还需要检查 HTTP 状态。我们期望的状态码是 200,它表示一切顺利。如果就绪状态是 4 而且状态码是 200,就可以处理服务器的数据了,而且这些数据应该就是要求的数据(而不是错误或者其他有问题的信息)。因此还要在回调方法中增加状态检查,如 清单 14 所示。
清单 14. 检查 HTTP 状态码
function updatePage()
Unknown macro: { if (request.readyState == 4) if (request.status == 200) alert("Server is done!"); }
status Text 伴随状态码的字符串信息
readyState 对象状态值
根据浏览器的不同,在表单停止弹出警告之前会看到两次、三次甚至四次警告。这是怎么回事呢?原来我们还没有考虑 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。在上中看到,服务器多次调用 回调函数,每次调用都会弹出警告框 ------ 可能和预期的不同!
对于 Ajax 编程,需要直接处理的惟一状态就是就绪状态 4,它表示服务器响应已经完成,可以安全地使用响应数据了。基于此,回调方法中的第一行应该如 清单 13 所示。
清单 13. 检查就绪状态
function updatePage()
Unknown macro: { if (request.readyState == 4) alert("Server is done!"); }
修改后就可以保证服务器的处理已经完成。尝试运行新版本的 Ajax 代码,现在就会看到与预期的一样,只显示一次警告信息了。
为了增加更健壮的错误处理并尽量避免过于复杂,可以增加一两个状态码检查,请看一看 清单 15 中修改后的 updatePage() 版本。
清单 15. 增加一点错误检查
function updatePage()
Unknown macro: { 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}
XMLHttpRequest这个对象的方法如下:
* open():建立到服务器的新请求。该方法有五个参数:
1. request-type:发送请求的类型。典型的值是 GET 或 POST,但也可以发送 HEAD 请求。
2. url:要连接的 URL。
3. asynch:如果希望使用异步连接则为 true,否则为 false。该参数是可选的,默认为 true。
4. username:如果需要身份验证,则可以在此指定用户名。该可选参数没有默认值。
5. password:如果需要身份验证,则可以在此指定口令。该可选参数没有默认值。
(通常使用其中的前三个参数。事实上,即使需要异步连接,也应该指定第三个参数为 "true"。这是默认值,但坚持明确指定请求是异步的还是同步的更容 易理解。)
* send():向服务器发送请求。该方法只有一个参数:
1. 就是要发送的内容。但是在考虑这个方法之前,回想一下前面已经通过 URL 本身发送过数据了:虽然可以使用 send() 发送数据,但也能通过 URL 本身发送数据。事实上,GET 请求(在典型的 Ajax 应用中大约占 80%)中,用 URL 发送数据要容易得多。如果需要发送安全信息或 XML,可能要考虑使用 send() 发送内容(本系列的后续文章中将讨论安全数据和 XML 消息)。如果不需要通过 send() 传递数据,则只要传递 null 作为该方法的参数即可。(一般是传递null值作为参数)
* abort():退出当前请求。
* readyState:提供当前 HTML 的就绪状态。
4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据。
加入一些 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 放到一边吧。 |
ajax的优点
Ajax的给我们带来的好处大家基本上都深有体会,在这里我只简单的讲几点:
1、最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好。
2、使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是"按需取数据",可以最大程度的减少冗余请求,和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
ajax的缺点
下面我着重讲一讲ajax的缺陷,因为平时我们大多注意的都是ajax给我们所带来的好处诸如用户体验的提升。而对ajax所带来的缺陷有所忽视。
下面所阐述的ajax的缺陷都是它先天所产生的。
1、 ajax干掉了back按钮,即对浏览器后退机制的破坏。后退按钮是一个标准的web站点的重要功能,但是它没法和js进行很好的合作。这是ajax所带 来的一个比较严重的问题,因为用户往往是希望能够通过后退来取消前一次操作的。那么对于这个问题有没有办法?答案是肯定的,用过Gmail的知 道,Gmail下面采用的ajax技术解决了这个问题,在Gmail下面是可以后退的,但是,它也并不能改变ajax的机制,它只是采用的一个比较笨但是 有效的办法,即用户单击后退按钮访问历史记录时,通过创建或使用一个隐藏的IFRAME来重现页面上的变更。(例如,当用户在Google Maps中单 击后退时,它在一个隐藏的IFRAME中进行搜索,然后将搜索结果反映到Ajax元素上,以便将应用程序状态恢复到当时的状态。)
但是,虽然说这个问题是可以解决的,但是它所带来的开发成本是非常高的,和ajax框架所要求的快速开发是相背离的。这是ajax所带来的一个非常严重的问题。
2、安全问题
技 术同时也对IT企业带来了新的安全威胁,ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。 ajax的逻辑可以对客户端的安全扫描技术隐藏起来,允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点,诸如跨站点脚步攻 击、SQL注入攻击和基于credentials的安全漏洞等。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。至少从目前看 来,像ajax.dll,ajaxpro.dll这些ajax框架是会破坏程序的异常机制的。关于这个问题,我曾经在开发过程中遇到过,但是查了一下网上 几乎没有相关的介绍。后来我自己做了一次试验,分别采用ajax和传统的form提交的模式来删除一条数据......给我们的调试带来了很大的困难。
5、另外,像其他方面的一些问题,比如说违背了url和资源定位的初衷。例如,我给你一个url地址,如果采用了ajax技术,也许你在该url地址下面看到的和我在这个url地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
6、一些手持设备(如手机、PDA等)现在还不能很好的支持ajax,比如说我们在手机的浏览器上打开采用ajax技术的网站时,它目前是不支持的,当然,这个问题和我们没太多关系。
相关推荐
AJAX原理 原理 AJAXAJAX原理 原理 AJAXAJAX原理 原理 AJAX
关于Ajax原理的ppt 理解AJAX原理 理解AJAX核心对象 了解异步调用基本原理 使用异步调用构建简单AJAX程序
Ajax原理与系统开发》源码 Ajax原理与系统开发》源码
ajax ajax原理 ajax代码 ajax编程 ajax学习
主要关于ajax原理、XMLHTTPRequest等介绍
ajax原理
ajax原理,ajax原理和XmlHttpRequest对象,ajax优缺点
Ajax原理 和开发指南
Ajax原理详细说明.docAjax原理详细说明.doc
Ajax原理详细说明
ajax原理及应用,概念,技术以及xmlhttprequest实例化
Ajax原理图解借鉴.pdf
Ajax原理介绍,详细介绍了ajax的工作原理!
AJAX原理[收集].pdf
描述原生ajax的原理,以及详细的用法 1.什么是Ajax技术? Ajax 由javascript , xml , css 的组合来做到一定功能的技术 2.它的工作原理是什么? 它会产生一个Ajax引擎对象XMLHttpRequest,它由浏览器产生。所以不同...
程序员突击:Ajax原理与系统开发
AJAX原理及其在Web开发中的应用.pdf
Ajax 原理和应用.如果你对Ajax不了解或者不是很熟悉的,可以来看看 文档通过10个方面,比较详细的给你介绍这一技术。 1、ajax技术的背景 2、ajax技术的意义 3、关于ajax的名字 。。。等等
1 原始ajax原理 2 jquery JDBC 3 json数据 4 三级联动 5 仿百度自动提示 6 fromValidator验证 其中自带jar包 修改 DBconfig Mysql数据库配置文件直接运行即可 方便大家学习 ~~~同时鄙视那些高分卖例子的人... ...
十分经典的Ajax实例,可以讲通用 网页无刷新,异步请求实现的相当完美