关于AJAX的是是非非

一下内容摘自 传说の黄花菜 兄弟的文章
[url]http://www.iteye.com/topic/631257[/url]
[url]http://www.iteye.com/topic/631258[/url]

[b]什么是Ajax?[/b]
Adaptive Path公司的Jesse James Garrett这样定义Ajax：

　　Ajax不是一种技术。实际上，它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含：

基于XHTML和CSS标准的表示；
使用Document Object Model进行动态显示和交互；
使用XMLHttpRequest与服务器进行异步通信；
使用JavaScript绑定一切。


[b]Ajax工作原理[/b]
通过上述的定义，我们应该已经知道Ajax的组成了，即他是由XHTML，XML，CSS，DOM，XMLHttpRequest,JavaScript等技术综合而成的，然而，真正使用Ajax能实现异步通信，要真正实现这种绚丽的奇迹，必须非常熟悉一个JavaScript 对象，即 XMLHttpRequest。因此我们要了解Ajax的工作原理,就要从理解XMLHttpRequest这个对象开始。

下面给出将要用于该对象的很少的几个 方法和属性。

　·[color=blue]open()：[/color]建立到服务器的新请求。

　·[color=blue]send()：[/color]向服务器发送请求。

　·[color=blue]abort()：[/color]退出当前请求。

·[color=blue]readyState：[/color]提供当前 HTML 的就绪状态。

·[color=blue]responseText：[/color]服务器返回的请求响应文本。

· [color=blue]onreadystatechange:[/color]回调方法

　·[color=blue]responseXML：[/color]服务器返回的请求响应XML形式组织的文本。


[b] 用 XMLHttpRequest 发送请求[/b]　
　得到请求对象之后就可以进入请求/响应循环了。记住，XMLHttpRequest 惟一的目的是让您发送请求和接收响应。其他一切都是 JavaScript、CSS 或页面中其他代码的工作：改变用户界面、切换图像、解释服务器返回的数据。准备好 XMLHttpRequest 之后，就可以向服务器发送请求了。
　　Ajax 采用一种沙箱安全模型。因此，Ajax 代码（具体来说就是 XMLHttpRequest 对象）只能对所在的同一个域发送请求。如果让 Ajax 代码在www.hdu.edu.cn 上运行，则必须 www.hdu.edu.cn 中运行的脚本发送请求。


[b]打开请求 [/b]
有了要连接的 URL 后就可以配置请求了。可以用 XMLHttpRequest 对象的 open() 方法来完成。该方法有五个参数：
　　 ·request-type ：发送请求的类型。典型的值是 GET 或 POST ，但也可以发送 HEAD 请求。
　　 ·url ：要连接的 URL 。
　　 ·asynch ：如果希望使用异步连接则为 true ，否则为 false 。该参数是可选的，默认为 true 。
　　 ·username ：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值。
　　 ·password ：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值。
　　通常使用其中的前三个参数。事实上，即使需要异步连接，也应该指定第三个参数为 “true” 。这是默认值，但坚持明确指定请求是异步的还是同步的更容易理解。
　　将这些结合起来，通常会得到 下列所示的一行代码。

代码 4 getCustomerInfo() 方法的改进：

function getCustomerInfo() {
　 var phone = document.getElementById("phone").value;
  var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
　 request.open("GET", url, true);
} 

　 　

open() 是打开吗？
　　我们对 open() 方法到底做什么没有达成一致。但它实际上并不是 打开一个请求。如果监控 XHTML/Ajax 页面及其连接脚本之间的网络和数据传递，当调用 open() 方法时将看不到任何通信。

　　一旦设置好了 URL ，其他就简单了。多数请求使用 GET 就够了，再加上 URL ，这就是使用 open() 方法需要的全部内容了。

发送请求
　　一旦用 open() 配置好之后，就可以发送请求了。幸运的是，发送请求的方法的名称要比 open() 适当，它就是 send() 。
　　 send() 只有一个参数，就是要发送的内容。但是在考虑这个方法之前，回想一下前面已经通过 URL 本身发送过数据了：

var url = "/cgi-local/lookupCustomer.jsp?phone=" + escape(phone);
　　虽然可以使用 send() 发送数据，但也能通过 URL 本身发送数据。事实上， GET 请求（在典型的 Ajax 应用中大约占 80% ）中，用 URL 发送数据要容易得多。如果需要发送安全信息或 XML ，可能要考虑使用 send() 发送内容（关于如何使用POST方式安全的发送数据，请参考我的另外一篇文章--POST方式发送ajax请求详解 ）。如果不需要通过 send() 传递数据，则只要传递 null 作为该方法的参数即可。

代码 5 getCustomerInfo() 方法的进一步改进：

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);
} 

[b]

指定回调方法 [/b]　　

现在我们所做的只有很少一点是新的、革命性的或异步的。必须承认， open() 方法中 “true” 这个小小的关键字建立了异步请求。但是 Ajax 和 Web 2.0 最大的秘密是什么呢？秘密就在于 XMLHttpRequest 的一个简单属性 onreadystatechange 。
　　首先一定要理解这些代码中的流程（如果需要请回顾 代码 5 ）。建立其请求然后发出请求。此外，因为是异步请求，所以 JavaScript 方法（例子中的 getCustomerInfo() ）不会等待服务器。因此代码将继续执行，就是说，将退出该方法而把控制返回给表单。用户可以继续输入信息，应用程序不会等待服务器。
　　这就提出了一个有趣的问题：服务器完成了请求之后会发生什么？答案是什么也不发生，至少对现在的代码而言如此！显然这样不行，因此服务器在完成通过 XMLHttpRequest 发送给它的请求处理之后需要某种指示说明怎么做。
　　现在 [color=olive]onreadystatechange[/color] 属性该登场了。该属性允许指定一个回调函数。回调允许服务器（猜得到吗？）反向调用 Web 页面中的代码。它也给了服务器一定程度的控制权，当服务器完成请求之后，会查看 XMLHttpRequest 对象，特别是 onreadystatechange 属性。然后调用该属性指定的任何方法。之所以称为回调是因为服务器向网页发起调用，无论网页本身在做什么。比方说，可能在用户坐在椅子上手没有碰键盘的时候调用该方法，但是也可能在用户输入、移动鼠标、滚动屏幕或者点击按钮时调用该方法。它并不关心用户在做什么。 这就是称之为异步的原因：用户在一层上操作表单，而在另一层上服务器响应请求并触发 onreadystatechange 属性指定的回调方法。
　　 在 JavaScript 中引用函数
　　 JavaScript 是一种弱类型的语言，可以用变量引用任何东西。因此如果声明了一个函数 updatePage() ， JavaScript 也将该函数名看作是一个变量。换句话说，可用变量名 updatePage 在代码中引用函数。
　代码 6. 设置回调方法

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() 方法了。

代码 7. 检查就绪状态

function updatePage() {
　 if (request.readyState == 4)
　     if (request.status == 200)
　　     alert("Server is done!");
} 

其中 request.readyState 是 HTTP 的就绪状态，在这里我们大概需要了解这 5 种状态，关于其详细意义，我们在这就不在做深入研究了。

request.readyState == 0 ：请求没有发出（在调用 open() 之前）。
　　 request.readyState == 1 ：请求已经建立但还没有发出（调用 send() 之前）。
　　 request.readyState == 2 ：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。
　 request.readyState ==3 ：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。
　　 request.readyState == 4 ：响应已完成，可以访问服务器响应并使用它。

而接下来的 request.status 为 HTTP 状态码，为 200 的时候为正常， 400 多的时候为客户端的错误， 500 多的时候为服务器端的服务，如果您对这方面的知识感兴趣，不妨可以去借一些 HTTP 协议之类的书看看，这里也不做深入研究了。

l [b] 读取响应文本 [/b]

当我们成功做完上面的一切时，服务器最后给出了处理的响应，我们可以把响应的内容 以 responseText 或者 responseXML 形式组织返回给客户端供其调用。 responseXML 的话，要涉及到对 XML 的操作，因为 jdk 本身对 XML 的操作比较弱，不过我们可以运用第三方的包 org.jdom （网上有的下载），如果大家有兴趣，可以自己去研究，这里我们简单的给出一个 responseXML 的用法的例子

代码 8. responseText 的简单运用

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);
　 }
   } 

到现在，相信大家一定对 Ajax 有了一个系统的了解了吧，仅仅只是讲了 Ajax 的一些最基础的东西，如果您对这个有兴趣，还可以进行进一步的深入研究。

l [b]Ajax 应用场景[/b]

然而 Ajax 不是万能的，在适合的场合使用 Ajax ，才能充分发挥它的长处，改善系统性能和用户体验，绝不可以为了技术而滥用。 Ajax 的特点在于异步交互，动态更新 web 页面，因此它的适用范围是交互较多，频繁读取数据的 web 应用。现在来看几个 Ajax 的应用实例，读者可以了解如何使用 Ajax 技术改进现有的 web 应用系统。

场景 1. 数据验证

在填写表单内容时，需要保证数据的唯一性（例如新用户注册填写的用户名），因此必须对用户输入的内容进行数据验证。数据验证通常有两种方式：一种是直接填写，然后提交表单，这种方式需要将这个页面提交到服务器端进行验证，整个过程不仅时间长而且造成了服务器不必要的负担；第二种方式是改进了的验证过程，用户可以通过点击相应的验证按钮，打开新窗口查看验证结果，但是这样需要新开一个浏览器窗口或者对话框，还需要专门编写验证的页面，比较耗费系统资源。而使用 Ajax 技术，可以由 XMLHttpRequest 对象发出验证请求，根据返回的 HTTP 响应判断验证是否成功，整个过程不需要弹出新窗口，也不需要将整个页面提交到服务器，快速而又不加重服务器负担。

场景 2. 按需取数据

分类树或者树形结构在 web 应用系统中使用得非常广泛，例如部门结构，文档得分类结构常常使用树形空间呈现。以前每次对分类树得操作都会引起页面重载，为了避免这种情况出现，一般不采用每次调用后台得方式，而是一次性将分类结果中得数据一次性读取出来并写入数组，然后根据用户的操作，用 JavaScript 来控制节点的呈现，这样虽然解决了操作响应速度，不重复载入页面以及避免向服务器频繁发送请求的问题，但是如果用户不对分类进行操作或者只对分类树中的一部分数据进行操作的话（这种情况很普遍的），那么读取的数据中就会有相当大的冗余，浪费了用户的资源。特别是在分类结构复杂，数据庞大的情况下，这种弊端就更加明显了。

现在应用 Ajax 改进分类树的实现机制。在初始化页面时，只获取第一级子分类的数据并且显示；当用户点开一级分类的第一节点时，页面会通过 Ajax 向服务器请求当前分类所属的二级子分类的所有数据；如果再请求已经呈现的二级分类的某一节点时，再次向服务器请求当前分类所属的三级子分类的所有数据，以此类推。页面会根据用户的操作向服务器请求它所需要的数据，这样就不会存在数据的冗余，减少了数据下载总量。同时，更新页面时不需要重载所有内容，只更新需要更新的那部分内容即可，相对于以前后台处理并且重载的方式，大大缩短了用户的等待时间。

场景 3. 自动更新页面

在 web 应用中有很多数据的变化时十分迅速的，例如最新的热点新闻，天气预报以及聊天室内容等。在 Ajax 出现之前，用户为了即使了解相应的内容必须不断刷新页面，查看是否有新的内容变化，或者页面本身实现定时刷新的功能（大多数聊天室页面就是这样做的）。有可能会发生这种情况；有一段时间网页的内容没有发生任何变化，但是用户并不知道，仍然不断的刷新页面；或者用户失去了耐心，放弃了刷新页面，却很有可能在此有新的消息出现，这样就错过了第一时间得到消息的机会。

应用 Ajax 可以改善这种这种情况，页面加载以后，会通过 Ajax 引擎在后台进行定时的轮询，向服务器发送请求，查看是否有最新的消息。如果有则将新的数据（而不是所有数据）下载并且在页面上进行动态的更新，通过一定的方式通知用户（实现这样的功能正是 JavaScript 的强项）。这样即避免了用户不断手工刷新页面的不便，也不会因为重复刷新页面造成资源浪费。


[b]当然，Ajax也不是随便到处可以用的[/b] 一下摘自 zkj_beyond 兄弟的文章

[url]http://www.iteye.com/topic/24524[/url]


[b]Ajax（Asynchronous JavaScript and XML） [/b]
我没有能力给Ajax下定义，但看到的所谓的ajax应用却让我很是困惑。就上面的这个名词，Asynchronous放在了首位，我知道不该咬文嚼字，这里我只想说说，异步操作我们真的能正确的使用吗？
[b]一、异步由来 [/b]
XMLHttpRequest这个对象的open方法有个参数可以确定这次请求是同步还是异步操作，如果是同步操作，相当于函数调用一样，没什么问题。如果选择异步，那么必须监听该对象的变化状态来得到结果。
一般编程都是同步模型，例如调用一个方法，如果这个方法需要很长时间，也的等，一般也不会出现什么问题。异步模型偶只在JMS中用过点点，你发个消息，不用等消息发送成功与否，程序继续执行（可能消息接受者没收到，可能以后会收到）。这样看来异步操作也有用，但应该是在特定情况下。
[b]二、ajax框架的不负责任 [/b]
以prorotype.js为首，Ajax.Request 对同步(synchronous)请求的支持一直有bug（现在改了），估计作者眼中，ajax都是异步操作，但我们使用者呢，无形中给我们这种思想。
dwr,典型异步操作，让我们自己维护callback，代码丑陋，难于控制，还可能会出问题。http://agile.com/read.php?tid=232
dojo.io/qooxdoo.......
我不知道这些框架实现者中，ajax都是异步操作吗？下面我就来说说看！
[b]三、案例分析 [/b]
1、google maps
ajax御用例子，整个应用确实是异步的，异步的请求图片。请注意，这里的异步形成是根据<img>对象可以”自动“加载图片来实现的，并且也没有回调方法。
如果你说google maps之类的应用使用ajax的异步操作，我觉得不是很准确。
2、google mail
不停的点击收件箱，可以看到页面右上角那个　正在加载.......
　我估计用的是异步操作，但这里我看不错异步操作能带来什么好处，但服务器的压力是加大很多。
　　你也可以点击收件箱，然后F5。看到有很多请求被别的请求”覆盖了“。（可能f5不是很合适）
　　也可以乱点，相信你很快就和我一样，gmail出现异常了，不让访问了。

　　我不认为web mail中的有些操作适合异步操作。
３、google suggest
我认为它是很适合异步操作的。为什么呢，因为这里需要”覆盖请求“。例如我期望得到　Chinese。我输入　chi　这时候可能就向服务器发送请求了，可还没有返回，也有可能已经返回一些建议了。我还会输入下去，也可能输错，删除几个单词。（这样说下去就复杂了）　但无论怎么样，最后一个请求的结果是用户希望看到的，前面的所有请求只是可能的最终结果，所以我觉得web”请求覆盖“是异步操作的主要标志之一。
[b]四、从软件应用类型分析 [/b]　　

ajax in action让偶接触的软件可用性。[emot]grin[/emot]
transient(瞬态的)／sovereign(独占的)　的使用方式。从字面上相信都清楚了。这里我不想详细说了，大家可以看看ajax in action体会一下，讲了也不多，但能启发你。
　　是否异步操作与它们有很大关系。
[b]五、怎么样确定异步还是同步 [/b]　
　如果你和我同样的考虑以后，相信我们面对的太多应用，或者用例都应该是同步操作（当然异步也可以实现）。如果你习惯了用ajax的异步通信，那赶快改过来吧，同步模型会让你的软件更稳定，开发更简单。
　　相信我，大家的很多时候都滥用的异步操作！
　　当然异步带来的好处也很多，给软件的可用性，用户体验提升是巨大的，可困难也是巨大的。
[b]六、总结 [/b]　
　我们大部分的web应用都是同步操作，也习惯了点击触发一个事件，等待它完成的习惯。
　　异步操作能带给我们很多想象之外的效果，但绝对不是代替同步操作。