原文：
生产实践课要求翻译一篇文章，我选择了这篇介绍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。
最后来看看DOMDOM，即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带来的一切可能。