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

Ajax概述及浅谈其与服务器的交互过程

概念:

       首先AJAX不只是一个特定的客户端技术,更应算是一种技巧。Ajax技术的核心操作是用XmlHttpRequest(下称XHR)对象进行异步数据处理。

       所谓异步,即通过 AJAX,JavaScript 无需等待服务器的响应,而是:

  ?  在等待服务器响应时执行其他脚本

  ?  当响应就绪后对响应进行处理

作用:

       在AJAX技术中,主要利用JavaScript的XHR对象来传递用户界面上的数据到服务端并返回结果。XHR对象用来响应通过HTTP传递的数据,一旦数据返回到客户端就可以立刻使用DOM(是页面的一个完全面向对象的表示)技术来操作数据并显示到网页上。

       AJAX的最终目的是创建更好更快以及交互性更强的 Web 应用程序。

 

与传统的web 请求/相应 模式相比:

       优点:传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面;AJAX应用可以仅向服务器发送并取回必需的数据,通过在后台与服务器进行少量数据交换,实现网页的异步更新。避免了在网络上发送那些没有改变过的信息。就是能在不更新整个页面的前提下维护数据,就是允许浏览器与服务器进行通信而无需刷新页面,这使得Web应用程序能够更为迅捷地回应用户动作。

      缺点:传统的遵循请求/响应模式的应用,对于每个请求都会加载整个页面,所以,原来查看的页面都会放到浏览器的历史栈中。而Ajax用XHR对象做出的请求不会记录在浏览器的历史中。如果你的用户习惯使用浏览器的“后退”按钮在Web应用中进行导航,就可能会产生问题。

 

通过AJAX与服务器的交互的过程:

大体上一般的交互过程只需要简单的三步即可完成

 

 

下面谈一下标准的AJAX交互过程:

 

 

 

1.    一个客户端事件触发一个Ajax事件,例如

<input type="text" id="txtEmail" onblur=“showHint(str)”/>

2.   创建XHR对象的一个实例,使用open()方法建立调用,并设置URL以及所希望的HTTP方法(get或post)。请求实际上通过一个send()方法调用触发