ajax入门详解（一）
?
在开始正式讲解 Ajax之前，首先让我们先来看看Google Map使用Ajax改善其产品设计的效果。
?
?
由上可以明显的看出，当用户拖动地图进行操作的时候，Web页上的地图立即发生相应的变化，页面却没有刷新，当按住鼠标左键移动地图的时候，地图跟着移动，这个过程是快速的，而期间用户没有想服务器提交表单或和单击一个超链接。如果用传统的Web应用程序交互思维来理解，这个过程是难以理解的，这正是Ajax的魅力。
在研究ajax之前首先让我们先来讨论一个问题 ——什么是Web 2.0 。听到 Web 2.0 这个词的时候，应该首先问一问 “Web 1.0 是什么？” 虽然很少听人提到 Web 1.0，实际上它指的就是具有完全不同的请求和响应模型的传统 Web。比如，到 hdu.edu.cn 网站上点击一个按钮。就会对服务器发送一个请求，然后响应再返回到浏览器。该请求不仅仅是新内容和项目列表，而是另一个完整的 HTML 页面。因此当 Web 浏览器用新的 HTML 页面重绘时，可能会看到闪烁或抖动。事实上，通过看到的每个新页面可以清晰地看到请求和响应。
Web 2.0（在很大程度上）消除了这种看得见的往复交互。比如在 Google Maps 上，你可以拖动地图，放大和缩小，只有很少的重绘操作。当然这里仍然有请求和响应，只不过都藏到了幕后。作为用户，体验更加舒适，感觉很像桌面应用程序。这种新的感受和范型就是当有人提到 Web 2.0 时您所体会到的。
需要关心的是如何使这些新的交互成为可能。显然，仍然需要发出请求和接收响应，但正是针对每次请求/响应交互的 HTML 重绘造成了缓慢、笨拙的 Web 交互的感受。因此很清楚，我们需要一种方法使发送的请求和接收的响应只 包含需要的数据而不是整个 HTML 页面。惟一需要获得整个新 HTML 页面的时候就是希望用户看到 新页面的时候。
但多数交互都是在已有页面上增加细节、修改主体文本或者覆盖原有数据。这些情况下，Ajax 和 Web 2.0 方法允许在不 更新整个 HTML 页面的情况下发送和接收数据。对于那些经常上网的人，这种能力可以让您的应用程序感觉更快、响应更及时，让他们不时地光顾您的网站。
?
因此在这里，我们是时候可以对ajax做出一个完整的解释了，Adaptive Path公司的Jesse James Garrett这样定义Ajax：
Ajax不是一种技术。实际上，它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含：
这非常好，但为什么要以Ajax命名呢？其实术语Ajax是由Jesse James Garrett创造的，他说它是“Asynchronous JavaScript + XML的简写”。
通过上述的定义，我们应该已经知道Ajax的组成了，即他是由XHTML，XML，CSS，DOM，XMLHttpRequest,JavaScript等技术综合而成的，然而，真正使用Ajax能实现异步通信，要真正实现这种绚丽的奇迹，必须非常熟悉一个JavaScript 对象，即 XMLHttpRequest。因此我们要了解Ajax的工作原理,就要从理解XMLHttpRequest这个对象开始。
下面给出将要用于该对象的很少的几个 方法和属性。
·open()：建立到服务器的新请求。
?? ·send()：向服务器发送请求。
?? ·abort()：退出当前请求。
?? ·readyState：提供当前 HTML 的就绪状态。
?? ·responseText：服务器返回的请求响应文本。
‘onreadystatechange:回调方法
·responseXML：服务器返回的请求响应XML形式组织的文本。
? 下面我们简单的介绍一下这几个方法的作用。
???? 首先需要创建一个新变量并赋给它一个 XMLHttpRequest 对象实例。这在 JavaScript 中很简单，只要对该对象名使用 new 关键字即可，如下代码所示。
＜script language="javascript" type="text/javascript"＞
var request = new XMLHttpRequest();
＜/script＞
在 JavaScript 中用 var 创建一个变量，给它一个名字（如 “request”），然后赋给它一个新的 XMLHttpRequest 实例。此后就可以在函数中使用该对象了。
错误处理
在实际上各种事情都可能出错，而上面的代码没有提供任何错误处理。较好的办法是创建该对象，并在出现问题时优雅地退出。比如，任何较早的浏览器都不支持 XMLHttpRequest，您需要让这些用户知道有些地方出了问题。下面js代码通过创建getXMLHttpRequest()方法说明如何创建该对象。
代码1：一个详细的XMLHttpRequest对象的创建
＜script language="javascript" type="text/javascript"＞
function getXMLHttpRequest(){
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;
}
}
}
return request;
}
＜/script＞
一定要理解这些步骤：
创建一个新变量 request 并赋值 false。后面将使用 false 作为判定条件，它表示还没有创建 XMLHttpRequest 对象。
·增加 try/catch 块：
·尝试创建 XMLHttpRequest 对象。
1、如果失败（catch (failed)）则保证 request 的值仍然为 false。
2、检查 request 是否仍为 false（如果一切正常就不会是 false）。
·如果出现问题则request 返回 false。
此外，在上面的代码中，我们是不是注意到了一个问题，就是当request = new XMLHttpRequest();出现异常的时候，在catch语句中我们用了request = new ActiveXObject("Msxml2.XMLHTTP");和request = new ActiveXObject("Microsoft.XMLHTTP");等语句进行对象获取，这是针对IE浏览器而进行的操作，因为IE浏览器对 XMLHttpRequest 版本有不同的称呼。事实上，它将其称为几种 不同的东西。如果使用较新版本的 Internet Explorer，则需要使用对象 Msxml2.XMLHTTP，而较老版本的 Internet Explorer 则使用 Microsoft.XMLHTTP。我们需要支持这两种对象类型（同时还要支持非 Microsoft 浏览器）。
代码2： 建立请求 URL
＜script language="javascript" type="text/javascript"＞
function getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "/cgi-local/lookupCustomer.jsp?phone=" + escape(phone);
}
＜/script＞
首先，代码创建了一个新变量 phone，并把 ID 为 “phone” 的表单字段的值赋给它。下列代码展示了这个表单的 XHTML，其中可以看到 phone 字段及其 id 属性。 ?
代码3： Break Neck Pizza 表单
＜body＞
＜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＞
还要注意，当用户输入电话号码或者改变电话号码时，将触发getCustomerInfo() 方法。该方法取得电话号码并构造存储在 url 变量中的 URL 字符串。由于 Ajax 代码是沙箱型的，因而只能连接到同一个域，实际上 URL 中不需要域名。该例中的脚本名为 /cgi-local/lookupCustomer.jsp。最后，电话号码作为 GET 参数附加到该脚本中："phone=" + escape(phone)。
