利用 reco 来编写 Ajax 应用

最新推荐文章于 2018-08-22 15:35:27 发布

xiaocon

最新推荐文章于 2018-08-22 15:35:27 发布

阅读量874

点赞数

分类专栏： JavaScript技术文章标签： ajax javascript function xml 文档 jsp

本文链接：https://blog.csdn.net/xiaocon/article/details/454303

版权

JavaScript技术专栏收录该内容

23 篇文章 0 订阅

订阅专栏

利用 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 οnlοad="javascript:bodyOnLoad()">
 <div id="xx"></div>
 <input type="button" οnclick="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。