日期:2014-05-16  浏览次数:20562 次

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脚本更新需要更新的部分内容。

http://shawnfree.iteye.com/blog/375454