您当前的位置:首页>教育科研>教研论文

浅谈Ajax在WEB开发中的使用

【文章来源:】 【发布人:邸锦华】 【发布时间:2012-12-04】 【点击量:

浅谈Ajax在WEB开发中的使用 -ISHANGNET-

浅谈AjaxWEB开发中的使用

邸锦华

摘要:与传统的桌面应用程序相比,Web 应用程序有很多优势:可拥有更多用户、更容易安装和维护、更容易开发。但是, 应用程序不总是象传统应用程序那样强大和友好。通过 AJAX,可以使 Internet 应用程序更加强大(更轻巧、更快速,且更易使用)。

关键词: AJAXXMLHttpRequestWEB应用

AJAX Asynchronous JavaScript And XML 的首字母缩写。AJAX 并不是一种新的编程语言,而仅仅是一种新的技术,它可以创建更好、更快且交互性更强的 web 应用程序。Ajax的优点是更迅捷的响应速度传统的web应用允许用户填写表单(form),当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单,然後返回一个新的网页。这个做法浪费了许多带宽,因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。与此不同,AJAX应用可以仅向服务器发送并取回必需的数据,它使用SOAP或其它一些基于XMLweb service接口,并在客户端采用JavaScript处理来自服务器的响应。因此在服务器和浏览器之间交换的数据大量减少,结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器的处理时间也减少了。使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变过的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHTML应用程序那样,Ajax应用程序必须在众多不同的浏览器和平台上经过严格的测试。随着Ajax的成熟,一些简化Ajax使用方法的程序库也相继问世。同样,也出现了另一种辅助程序设计的技术,为那些不支持JavaScript的用户提供替代功能。AJAX 使用 JavaScript web 浏览器与 web 服务器之间来发送和接收数据。通过在幕后与 web 服务器交换数据,而不是每当用户作出改变时重载整个 web 页面,AJAX 技术可以使网页更迅速地响应。

XMLHttpRequest AJAX 的基础。所有现代浏览器均支持 XMLHttpRequest 对象(IE5 IE6 使用 ActiveXObject)。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

XMLHttpRequest 对象用于和服务器交换数据。

如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() send() 方法:

xmlhttp.open(\"GET\",\"test1.txt\",true);

xmlhttp.send();

POST 相比,GET 更简单也更快,并且在大部分情况下都能用。然而,在以下情况中,请使用 POST 请求:无法使用缓存文件(更新服务器上的文件或数据库) 向服务器发送大量数据(POST 没有数据量限制)发送包含未知字符的用户输入时,POST GET 更稳定也更可靠

如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText responseXML 属性。

responseText 属性

如果来自服务器的响应并非 XML,可以使用 responseText 属性。responseText 属性返回字符串形式的响应,因此我们可以这样使用:

document.getElementById(\"myDiv\").innerHTML=xmlhttp.responseText;

responseXML 属性
如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性:请求 books.xml 文件,并解析响应:

xmlDoc=xmlhttp.responseXML;

txt=\"\";

x=xmlDoc.getElementsByTagName(\"ARTIST\");

for (i=0;i<x.length;i++)

  {  txt=txt + x[i].childNodes[0].nodeValue + \"<br />\";  }

document.getElementById(\"myDiv\").innerHTML=txt;

Ajax的缺点

对应用Ajax最主要的批评就是,它可能破坏浏览器后退按钮的正常行为。在动态更新页面的情况下,用户无法回到前一个页面状态,这是因为浏览器仅能记下历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙;用户通常都希望单击后退按钮,就能够取消他们的前一次操作,但是在Ajax应用程序中,却无法这样做。不过开发者已想出了种种办法来解决这个问题,当中大多数都是在用户单击后退按钮访问历史记录时,通过建立或使用一个隐藏的IFRAME来重现页面上的变更。(例如,当用户在Google Maps中单击后退时,它在一个隐藏的IFRAME中进行搜索,然后将搜索结果反映到Ajax元素上,以便将应用程序状态恢复到当时的状态。)

进行Ajax开发时,网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。不给予用户明确的回应 ,没有恰当的预读数据 ,或者对XMLHttpRequest的不恰当处理,都会使用户感到延迟,这是用户不欲看到的,也是他们无法理解的。通常的解决方案是,使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。 用JavaScript作的Ajax引擎,JavaScript的兼容性不是很好;Ajax的无刷新重载,由于页面的变化没有刷新重载那么明显,所以容易给用户带来困扰,用户不太清楚现在的数据是新的还是已经更新过的;现有的解决有:在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等。

(本文发表于《计算机光盘与应用》2012.13期刊上