Ajax原理及应用

  [b]1、当我们在浏览器地址栏中输入地址，或者点击一个按钮、超链接是，浏览器将向Web服务器发送请求，请求发送后，浏览器将等待服务器对请求的处理，直到接收到到服务器响应的内容后，浏览器将内容显示给用户，由于数据量、网络传输以及服务器处理等各种原因，浏览器等待服务器处理请求的过程可能是漫长的。而在这个过程中，客户端的其他操作被阻止，用户只能等待，停止与页面的交互，并且，这种请求每次都需要重新刷新(重载)页面以显示新的响应内容，在复杂的web应用中，当用户需要频繁与服务器进行交互时，客户端需要频繁向服务器发送请求，这种等待与频繁的刷新页面对应用系统是致命的。而Ajax技术使这种交互的等待时间仅可能短，不再刷新页面，使Web应用系统操作更流畅和联系，使客户端得到更丰富的应用体验和交互操作。
  2、Ajax是Asynchronous JavaScript and XML的缩写称为异步 JavaScript和XML,是一种创建交互式Web应用程序的开发技术，Ajax并不是一种设计语言，而是综合运行各种已有开发技术的一种新的Web开发方式，Ajax应用涉及HTML、XML、DOM、CSS以及JavaScript。
   3、Ajax用于创建富客户端应用程序，富客户端是指表现能力丰富的客户端，包括多种方式的输入，直观、及时的反馈，以及丰富、高效的用户交互。在说明Ajax如何实现富客户端之前，首先说明传统的Web应用处理方式。
   4、看一下普通的桌面应用程序，例如Word，这些程序被安装在本地计算机上，数据文件也存储到本地计算机上，程序总是运行流畅，用户操作总能得到迅速的反馈，基本上不需要等待。Web应用程序实现桌面应用无法完成的任务。但对于Web应用程序，程序在远程服务上运行，客户端需要向服务器发送请求，然后等待服务器处理请求，在服务器处理请求后将结果返回给客户端，客户端浏览器将响应呈现给用户，在这种处理模式下，响应效率自然无法与操作本地桌面应用程序相比，用户请求到服务器返回相应之间必须存在延迟，用户必须等待，而且传输网络的不稳定更使这种相应效率变得不稳定。当这种延迟稍长时会使用户操作出现停顿。甚至用户无法操作而放弃请求。而随着Web应用程序的功能日益复杂，客户端与服务端需要更频繁的交互，传输的数量日益加大，这种延迟将被扩大。
  5、传统的请求处理方式下，当用户单击超链接，或者提交表单时，浏览器向服务器发送HTTP请求并等待服务器响应。服务器接收并处理客户端请求，处理完毕后将处理结果返回给客户端， 客户端浏览器接收服务器端响应，刷新页面以显示响应内容，这种方式的问题在于：。

• HTTP请求是同步的，当浏览器发送请求后，浏览器需要等待服务器响应，在接收到服务器响应之前，客户端不能做任何事，用户只能等待。
• 服务器返回给客户端的内容包括无用的数据，在传统方式下，服务器返回的结果总是包括完整的页面内容，而在这些内容中，大部分内容与原来页面中的内容相同。无用的数据增加了响应的延迟。
• 客户端浏览器接收到服务器响应时，浏览器刷新整个页面以显示服务器的相应内容。而不是只更新那些变化的内容。

等待、无用的数据、刷新页面，这些因素使传统的处理方式无法满足功能日益复杂的Web应用程序，而Ajax技术能解决这些问题。与传统Web应用相比较，Ajax具有如下主要内容特点：

• HTTP请求是异步的，Ajax通过异步请求方式处理请求，请求由脚本通过后台发送，用户不会感觉到发送的过程，当发送请求后，客户端不需要等待服务器响应。对服务器响应内容的处理由JavaScript脚本在后台进行处理，在服务器处理请求的过程中，用户可以继续其他操作。页面中的链接，表单等元素仍然可用。注意：异步请求并不是没有延迟，只不过这样延迟对客户端用户来说是感觉不到的。
• 服务器返回的响应内容只包括需要的那部分数据，不包括无用的数据，减少处理数据的时间。
• 浏览器不需要刷新整个页面，而是通过JavaScript更新也慢中的部分内容。

6、异步请求、精简的数据以及避免页面的刷新，这些使得基于Ajax的Web应用操作流畅和连续、能够给客户端提供直观、及时的反馈和丰富、高效的用户交互体验。
7、 那么，Ajax如何实现这种处理方式的呢？
Ajax的核心技术是XMLHttpRequest对象，XMLHttpRequest使JavaScript脚本能够在后台发送HTTP请求并获取和处理服务器的响应的内容。通过XMLHttpRequest对象提供的open()、send()方法，可以向服务器发送请求，open()方法可以将请求设置为异步方式，在服务器处理请求的过程中。客户端不需要等待，不影响客户端用户的其他操作，当接收到服务区响应后，JavaScript脚本通过XMLHttpRequest对象的responseTest或者responseXML获取响应内容。结合DOM，JavaScript可以将响应内容添加到当前页面中指定的位置。例如：将返回的内容添加到某个表单元素，或者通过insertHTML属性将响应内容放置到某个页面元素中。或者通过appendChild()方法将响应的内容添加为指定节点的子节点。因为服务器返回的内容是通过JavaScript脚本添加到页面中，所以服务器返回的响应内容可以只是需要更新的部分内容，而不需要返回完整的HTML文件，浏览器也不需要刷新整个页面。而只是通过JavaScript脚本更新需要更新的部分内容。