rico 入门与应用

最新推荐文章于 2018-07-31 12:24:28 发布

hynet

最新推荐文章于 2018-07-31 12:24:28 发布

阅读量1.3k

点赞数

分类专栏： JAVASCRIPT 文章标签： object javascript function parameters input button

JAVASCRIPT 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

0. 简介。

一个支持 AJAX的 javascript library，够简单吧。

1. 下载 Rico的 js file。

到 http://openrico.org/ 下载 prototype.js 和 rico.js。

2. include js file。

网页里加上下面两个设定(假设步骤一下载的档案放在scripts目录) 。

3. 在网页里设定 request。

一个网页可以设定多个request，而且这个最好设定成全域变量，

这样就可以共享这个 request URL，requestName只是识别用，所以可以任意命名。
ajaxEngine.registerRequest("requestName","requestURL");
//例如
ajaxEngine.registerRequest("getPersonInfo","getPersonInfo.do");

4. 设定回传时要对应的对象。
设定回传时要对应的对象的目的，是要指定回传数据内容，对应到网页那个对象，或交由谁处理。
Rico的回传物件有两种，一种是element一种是object，
差别在于element是任意格式，但只能对应单一网页对象，object可以多笔，可以写自己的回传事件。
另外设定的时间点也要注意，就是说如果网页对象还没产生，就先设定，那么会不 work。

4-1 设定回传后会变更网页的那个 element。
registerAjaxElement如果只给一个参数，则自动对应同名ID的网页对象，
回传时直接用回传内容修改对应网页对象的innerHTML，所以没有可自己处里的事件。

//对应到同名的 elementId
ajaxEngine.registerAjaxElement("elementId");
//回传的 fromElementId内容，会变更 toElementId对象
ajaxEngine.registerAjaxElement("fromElementId",$("toElementId"));

4-2 设定回传后要由哪个 object处理。
Rico会将回传数据当参数，传给对应 object的 ajaxUpdate，所以自己写的object必须有这个method。
也就自己处理回传后事件的起点。

ajaxEngine.registerAjaxObject("objectId",new UserObject());

4-3 回传的XML格式。
回传值必须是下面格式的XML，所以回传内容的 contentType必须是 application/xml，
还有中文在UTF8格式时可以正常显示，其它编码都会看到乱码。

<ajax-response>
<response type="element|object" id="elementId">
response可以有一或多个，也可以element object混用
</response>
</ajax-response>
//例如
<ajax-response>
<response type="object" id="objectId">
<returnObject name="Hello" age="1" />
<returnObject name="World" age="99" />
</response>
<response type="element" id="elementId">Hello World</response>
</ajax-response>

5. 网页事件。
当网页事件发生时，要做的就是送出request，此时会根据对应的 requestName，
找到对应的URL来传送数据，
只要再把要传递的参数传给 sendRequest就可以了。

ajaxEngine.sendRequest("getPersonInfo",
"firstName=" + firstName,
"lastName=" + lastName );

5-1 post
如果要用poet的方式传送数据，就比较麻烦，要用这种方式。

var params="rName="+document.getElementById("userName").value+"&rAge="+document.getElementById("age").value;
//post要小写。
ajaxEngine.sendRequest("hello",{method:"post",parameters:params});

6. 范例
最后来个矬矬的范例吧，把下面三个程序放在一起就可以测试了，当然，别忘了下载 Rico的js file。

6-1 主网页
<html>
<head>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/rico.js" type="text/javascript"></script>
<script language="javascript">
ajaxEngine.registerRequest("getElement", "returnElement.jsp");
ajaxEngine.registerRequest("getObject", "returnObject.jsp");

function runMe1() {
ajaxEngine.registerAjaxElement("helloId");
ajaxEngine.registerAjaxElement("sayHello");
ajaxEngine.registerAjaxElement("fromElementId",$("toElementId"));

var pramas = "Name="+document.getElementById("userName").value;
ajaxEngine.sendRequest("getElement",pramas);
}

ajaxEngine.registerAjaxObject("objectId",new UserObject());

function runMe2(){
ajaxEngine.sendRequest("getObject",
                       "rName="+document.getElementById("uName").value,
                       "rAge="+document.getElementById("age").value);
//这是post的方法
//var params="rName="+document.getElementById("userName").value+
//   "&rAge="+document.getElementById("age").value;
//ajaxEngine.sendRequest("hello",{method:"post",parameters:params});
}
function UserObject(){
this.ajaxUpdate=function(ajaxResponse){
   //alert(ajaxResponse);
   var objs = ajaxResponse.getElementsByTagName('returnObject');
   var tabStr="<table border='1'><tr><td>姓名</td><td>年龄</td></tr>"
   for(var i=0;i<objs.length;i++){
       tabStr+="<tr><td>";
     tabStr+=objs[i].getAttribute("name")+"</td><td>"+objs[i].getAttribute("age");
       tabStr+="</td></tr>";
   }
   tabStr+="</table>";

   this.setValue(tabStr);
}
this.setValue=function(str){
   document.getElementById("result").innerHTML=str;
}
}
</script>
</head>
<body>
<h3>Element Test</h3>
Your Name:<input type="text" id="userName" name="userName">
<input type="button" name="BT" value="click me" οnclick="runMe1()">
<table><tr><td><div id="helloId"></div></td><td><div id="toElementId"></div></td></tr></table>
<div id="sayHello"></div>
<hr>
<h3>Object Test</h3>
Your Name:<input type="text" id="uName" name="uName">
Your Age:<input type="text" id="age" name="age">
<input type="button" value="Click Me" οnclick="runMe2()">
<div id="result"></div>
</body>
</html>

6-2 returnElement.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
response.setContentType("application/xml");
%>
<ajax-response>
<response type="element" id="helloId"><span style="color:#008000">Hello</span></response>
<response type="element" id="fromElementId"><%=request.getParameter("Name")%></response>
<response type="element" id="sayHello">
<script language="javascript">
alert("Hello "+<%=request.getParameter("Name")%>);
</script>
</response>
</ajax-response>

6-3 returnObject.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
response.setContentType("application/xml");
%>
<ajax-response>
<response type="object" id="objectId">
<returnObject name="<%=request.getParameter("rName")%>-1" age="<%=request.getParameter("rAge")%>" />
<returnObject name="<%=request.getParameter("rName")%>-2" age="<%=request.getParameter("rAge")%>" />
<returnObject name="<%=request.getParameter("rName")%>-3" age="<%=request.getParameter("rAge")%>" />
</response>
</ajax-response>