利用 reco 来编写 Ajax 应用

利用 reco 来编写 Ajax 应用

    这个基本上是照搬 reco 的入门教程。

    在 reco 中,对 Ajax 机制做了面向对象封装,并设计了两种简单的响应模式,一种是元素更新;一种是JS响应。这里只看一下元素更新。

    纯粹从0开始写一个AJAX应用是比较麻烦的,不过,利用别人写好的库就事半功倍了。用 reco 只需三部曲:

    一、注册 Ajax 请求处理器。就是发送 Ajax 请求的东东。如下面的第一行代码。注册响应处理器,在元素更新模式下,处理器就是某个元素,这里只需将元素的ID注册,如第二行代码,AJAX响应会自动更新到元素里面。

 

  function bodyOnLoad() {
   ajaxEngine.registerRequest("getxx", "hotman_x.xml");  //1
   ajaxEngine.registerAjaxElement("xx");  // 2
  }

一般把这个函数作为body的onload事件来激活。从名字就能看出来了,呵呵。

 

    二、写出HTML主体,当然,你得有一个ID为xx,且能够有内容的HTML元素供更新。象<br>之类的元素是不行滴。

 

    三、发出 AJAX 请求: ajaxEngine.sendRequest("getxx"); 当然,为了执行这个语句,你需要一个方法来调用它,比如放个按钮什么的。

 

    JS部分就完成了。后台还要做一点点事,那就是对相应的调用发回一个 xml 响应。注意上面的语句1,第二个参数就是请求一个XML文档,这个文档里面带有响应数据。这是为了简单起见,在实际情况下,恐怕这个参数不会是静态页面,一般是个 JSP、ASP 之类的动态页面,这个动态页面会给出一个XML响应。不过这样的话要注意一个小问题,那就是,HTTP响应头必须明确指出返回文档的MIME类型是XML,如在JSP中这样写:<% response.setHeader(“Content-Type”, “text/xml”); %>。

说了半天,其实不如看看代码:

 

<pre><html>
<head>
 <script src="prototype.js"></script>
 <script src="rico.js"></script>
 <script>
  function bodyOnLoad() {
   ajaxEngine.registerRequest("getxx", "hotman_x_x.xml");
   ajaxEngine.registerAjaxElement("xx");
  }
  function requestIt() {
   ajaxEngine.sendRequest("getxx");
  }
 </script>
</head>
<body onload="javascript:bodyOnLoad()">
 <div id="xx"></div>
 <input type="button" onclick="javascript:requestIt()"/>
</body>
</html>

这里是响应的XML,也有一定的格式要求:

<?xml version="1.0" encoding="ISO-8859-1"?>
<ajax-response>
 <response type="element" id="xx">
  <span>hello, world!</span>
 </response>
</ajax-response>

它的格式其实只有三点要注意:一是以 ajax-response 为根节点,二是所有根节点的下级子节点均为 response,且其属性 type 设置为 element(即指定为元素更新模式),id应为注册要更新的元素的注册ID。

你可能感兴趣的:(JavaScript,jsp,xml,Ajax,function,文档)