原文:
生产实践课要求翻译一篇文章,我选择了这篇介绍Ajax的,原文在这里
http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro1.html
译文:
Ajax——包括HTML,Javascript,DHTML和DOM——是帮助把沉闷的Web界面变为交互式界面的卓越的方法。
五年前, 如果你不知道XML,没有人会和你交谈,你太土了;十八个月前,如果你不知道崭露头角的Ruby,那么你无法融入程序员的圈子。今天,如果你想知道什么是新的技术热点,毫无疑问,就是Ajax。
然而Ajax远不仅仅是一波时尚—它是建立网站的强有力的工具,几乎不比一种新的程序语言难学。
在我深入讨论Ajax之前,让我们先来看一下Ajax能做哪些事情。今天的程序,无外乎两种:
桌面应用程序
Web应用程序
它们并不陌生。桌面程序通常来自一张CD(或者从网站下载),在你的计算机上安装。也许它们通过Internet来更新,但是运行程序的代码是驻留在本地计算机上的。Web应用程序——这并不令人吃惊——运行在服务器上并通过浏览器来访问。
但是,比运行在何处更重要的,是程序如何运行以及如何与人交互。桌面程序通常非常快(它们运行在你的计算机,不需要等待网络连接),强大的交互功能(通常是和操作系统交互),动态效果非常出色。你可以点击、指向、输入、拉出菜单、子菜单,或者四处逛逛,这些都不需要等待。
另一方面,Web程序提供了桌面上从未有过的服务(想想Amazon.com和eBay.com)。然而强大的Web也带来了等待——等待来自服务器的回应,等待屏幕的刷新,等待请求的返回,等待新页面的生成。
上面简单的描述了两者的应用,提供你一个基本的概念。正如你已经开始怀疑的,Ajax试图连接两者的差距:桌面程序的功能性、交互性和Web程序的始终更新。
你可以在Web程序上使用动态的界面接口和有趣的控件,这些原先是桌面程序的“专利”。
还等什么?让我们来看看如何把乏味的Web程序变成Ajax程序。
———————————————————————————————————
老技术,新把戏
当我们开始谈及Ajax时,现实情况是Ajax牵涉到很多技术,要超越基本的了解,你需要深入了解各种技术。值得庆幸的是,也许你已经学了一些,至少比Java和Ruby容易。
下面是Ajax涉及的技术
HTML用来建立Web form
JavaScript是Ajax的核心技术,方便服务器和应用程序的通信。
DHTML帮助动态更新form。你将使用div,span和其他动态HTML元素来标
记HTML。
DOM通过JavaScript和从服务器返回的HTML或者XML一起工作。
下面让我们分别看一下它们是如何运作的。
XMLHttpRequest 对象
第一个亮相的是XMLHttpRequest,你或许是头一回见到。这是一个JavaScript对象,产生的方法如下。
LISTING1
<script language="javascript" type="text/javascript">
var xmlHttp = new XMLHttpRequest();
</script>
我将在下一篇文章中详细讲解这个对象,但是现在请记住,这个对象处理所有的服务器的通信。在进一步讨论之前,请仔细想一下:JavaScript贯串了XMLHttpRequest和服务器对话的过程,这是Ajax神奇的地方,不同于普通的程序流程。
普通的Web应用,用户填入form字段,然后点击提交按钮。然后整个form被送到服务器,服务器调用处理脚本的进程(PHP,Java,也许还包括CGI),当脚本执行完毕,服务器返回一个完整的新页面。页面也许包括含有数据的新form,或者是确认的页面,或者根据原form选择的选项。当然,程序或脚本在处理的时候,用户是必须等待的。屏幕将变为空白,当数据从服务器返回时重新绘制。所以,用户无法得到即时回馈,这和桌面应用程序的体验不同。
本质上Ajax把JavaScript和XMLHttpRequest对象介于Web form和服务器中间。当用户填写form时,数据被送入某些JavaScript代码而不是直接给服务器。
JavaScript抓住数据,向服务器发送请求。当这些发生的时候,用户界面不闪烁、消失或停止。换句话说,JavaScript在后台发送请求,用户不感觉到请求被发送。更好的情况下,请求被非同步的发送,JavaScript不等待服务器的返回。所以用户可以继续输入数据,或者做他想做的其它事情。
然后服务器返回数据给JavaScript(仍然在Web form中),由JavaScript代码决定怎样处理这些数据。代码可能更新了form field,让用户觉得没有提交或刷新就获得了新的数据。JavaScript代码还可以对数据做些计算再提交请求,这些都无需用户参与。这是XMLHttpRequest的强大功能。用户获得了动态、应答的(Responsive)、高交互的体验,就如桌面程序一样。
加一些JavaScript
获得了XMLHttpRequest后,JavaScript代码的工作就简单了,包括如下的几个任务:
获得form数据。
修改form上的数据。
解析HTML和XML。
前两项,你需要熟悉getElementByID()函数,如下:
LISTING2
// 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,剩下的工作就是如Listing2所示的JavaScript代码,还有些技巧型的HTML代码,偶尔的还有些DOM。
最后来看看DOM
DOM,即Document Object Model。DOM听上去很陌生,HTML设计者不常使用它,即使JavaScript程序员也只有在高端编程时涉及。在大型的Java和C/C++程序中常使用DOM,所以DOM似乎很难学。
幸运的是,在JavaScript中使用DOM很容易而且直观。这里,我将用例子展示如何使用DOM,但即使如此也可能会产生误导。你可以不使用DOM实现Ajax,这也是我想演示的方式。当在JavaScript和服务器传输XML并需要修改HTML form的时候,
可以再回头看DOM。现在更好的办法是看些不用DOM的Ajax例子。
——————————————————————————————————
获得请求对象
在有了大致的概念后,你将开始学习具体的内容。由于XMLHttpRequest是Ajax应用的核心,我将从它开始。正如在Listing1看到,这似乎很容易,是吗?先等一下下结论。
还记得几年前令人讨厌的浏览器大战吗?不管你是否相信,在小范围内,这场战争还在继续。XMLHttpRequest是这场战争的牺牲者之一。所以在获得XMLHttpRequest时你需要做些不同的事情。我将带你一步步来完成。
微软浏览器
微软的浏览器,Internet Explorer,使用MSXML来处理XML(你可以在文章最后的Resource中找到详细的资料)(见原文 ——译注) 。所以如果你打算写能够在IE上运行的Ajax应用,就需要用某些方法来生成对象。
MSXML有两个版本,依赖于在IE上安装的不同JavaScript版本,所以你的代码必须处理这两种情况。参考代码见下面的Listing3
LISTING3
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,这也意味着你遇到了非微软的浏览器,需要其它代码来处理。
Mozilla和其他非微软浏览器
如果是非微软浏览器,代码就简单了,如下:
var xmlHttp = new XMLHttpRequest object;.
这行代码适用的浏览器包括Mozilla, Firefox, Safari, Opera,和其他非微软浏览器。
整合在一起
当然你不希望代码只适用于微软的浏览器,也不想写两遍代码,那就把上面的代码整合在一起:
LISTING4
/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_JavaScriptcript_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编译器的特殊命令,我将在后面的文章中提及。
核心代码总共分成三步:
1:建立xmlHttp变量,作为XMLHttpRequest对象的引用(reference)
2:试图新建微软浏览器的对象
3:如果xmlHttp没有建立,就建立针对非微软浏览器的对象。
提一下安全
今天的浏览器允许用户提升安全等级,比如关闭JavaScript,或禁用其他的选项。这时,你的代码将必然无法运行。因此,你需要巧妙的处理这种情况,我将在后面的文章中谈到这个问题(这个系列看上去很长,不是吗?)。目前你的代码强劲但不完美。你将在后面看到细节的问题。
———————————————————————————————————
Ajax的请求和返回(Request/Response)
你已经学会了建立XMLHttpRequest对象。如果你看得仔细的话,你已经知道其实是JavaScript在和服务器对话,而不是提交HTML form。
还缺了什么呢?如何使用XMLHttpRequest。由于请求和返回是每一个Ajax应用都要使用的重要代码,因此让我们快速的浏览一下是有好处的。
发送请求
你手中有了新建的XMLHttpRequest。首先,你需要一个Web页面能调用的JavaScript函数,比如当用户输入字符或选择某个菜单的选项。然后,按照下面的基本框架来实现Ajax。
从Web form获得任何你想要的数据
建立欲连接的URL
建立和服务器的连接
设定服务器处理完请求后调用的函数
发送请求
LISTING5是示例代码
Listing5
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代码获得了form中的一些值。然后把某一PHP脚本文件作为欲连接的目标URL。注意URL是如何定义的。再使用简单的GET方式把city和state添加到URL中。
接下来,一个连接开启了。这里你第一次看到XMLHttpRequest在运行。连接的方法被设为GET,然后是URL。最后一个参数,如果是true,即表明请求是非同步的,即是Ajax应用。如果是false,代码将等待服务器,直到得到返回。通过设定最后的参数为true,用户依然可以使用form,甚至调用其它的JavaScript代码,此时服务器在后台处理请求。
xmlHttp的onreadystatechange属性允许你告诉服务器在处理完请求后该做什么,这时可能已经过了五分钟或者五小时。在上面的例子中,当服务器处理完请求,将调用函数updatePage()。
最后调用send(),因为你已经添加了数据(city和state)到URL,你不需要在请求中传输其他数据,因此参数为null。于是一个请求被发送了。
多么的简单和直接!如此,你将集中注意力在程序和界面而不是复杂
request/response。
Listing5的代码很简单。纯粹的文本,作为URL.GET的一部分,而非复杂的POST。不添加XML或content header,请求本身也没有数据。这简直是Ajax的世外桃源(Utopia)。
不要害怕,程序会越来越复杂的。你将学习如何传输POST请求,如何设置头和content types,如何编码XML,如何提高安全性—这张列表会非常长。不必担心,牢牢抓住基本的概念,你将迅速建立起一套Ajax工具库。
处理返回
现在你将处理来自服务器的返回。现在你只要知道两件事:
在xmlHttp.readyState等于4之前,什么事都不要做
服务器将把返回信息放在xmlHttp.responseText中
关于ready states,你将在后面学到更多,包括你原本不必了解的。你需要知道xmlHttp.readyState等于4,事情才能继续。使用xmlHttp.responseText,就更简单了。Listing6是演示代码
LISTING6
function updatePage() {
if (xmlHttp.readyState == 4) {
var response = xmlHttp.responseText;
document.getElementById("zipCode").value = response;
}
}
该函数等待服务器来调用,如果ready state正确,然后使用服务器返回的值,来设置另一个form的字段。结果是zipCode字段突然显示了邮编,而用户没有按任何按钮!这就是我前面提到的桌面程序的感受。
细心的读者可能注意到了,zipCode是普通的文本字段。当服务器返回邮编,updatePage()设置了字段的值为返回的值,用户是可以覆盖这个值的。这样做是出于两个目的:一是让演示代码简单,二是告诉你,有时你想用户能够覆盖服务器的返回值。请记住它们,这有助于设计良好的用户界面(翻译的不好 ——译注)
———————————————————————————————————
关联到Web form
还剩下什么?不多了。你有一段JavaScript代码抓取用户输入的数据,传输给服务器,另一端JavaScript代码监听、处理返回,当返回到来时设置字段的值。如Listing7那样利用JavaScript的优势。
LISTING7
<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="zipCode" size="5" /></p>
</form>
感觉还有一段常规的代码?没错。当用户在city或state设置新值时,callServer()开始执行,美妙的Ajax就开始运作了。
———————————————————————————————————
结尾
现在,你还没有准备好写Ajax程序,至少还需要看一下Resource中的资料。当然,你已经了解了Ajax的基本知识,运作方式和XMLHttpRequest对象。在接下来的文章中,你将学习如何操作这个对象,如何处理JavaScript和服务器的通信。
现在花点时间来想想Ajax强大的地方。想象Web form不用点击就能被返回。想想非同步是什么意思,想想JavaScript不用等待服务器响应请求。你遇到了哪些问题?你关注哪些领域?你的form设计又将如何改变呢?
如果你花点时间来学习,那么你将比简单的复制粘贴不理解的代码获得更好的服务。所以到目前为止,请充分享受Ajax带来的一切可能。
相关文章
- JavaScript和Ajax部分(3)
- 如何临时转换ASP.NET Ajax表单以不使用部分页面更新?
- 合使用 CSS、JavaScript 和 JSF 精心打造 Ajax 应用程序,第 2 部分: 动态 JSF 表单
- AJAX第一课 AJAX的学习和简介
- 第一个ajax实例之后的感想
- nginx安装配置启动,把前端的请求一部分转发到本地,ajax请求转发到服务器。
- Ajax 学习 第一篇
- AJAX(笔记03) - 原生AJAX - Node.js 和 Express 的简介、安装
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
- 掌握 Ajax,第 11 部分: 服务器端的 JSON