JAVA流通桥

JAVA启发者

统计

留言簿(3)

AJAX相关网址

Eclipse相关网址

Hibernate

java相关网址

LINUX相关网址

webwork相关网址

友好链接

阅读排行榜

评论排行榜

Rico入门

0. 簡介。
一個支援 AJAX的 javascript library，夠簡單吧。

1. 下載 Rico的 js file。
到 http://openrico.org/ 下載 prototype.js 和 rico.js。

2. include js file。
網頁裡加上下面兩個設定(假設步驟一下載的檔案放在scripts目錄)。 
1
2
<script src="scripts/prototype.js"></script>
<script src="scripts/rico.js"></script>


3. 在網頁裡設定 request。
一個網頁可以設定多個request，而且這個最好設定成全域變數，
這樣就可以共用這個 request URL，requestName只是識別用，所以可以任意命名。 
1
2
3
ajaxEngine.registerRequest("requestName","requestURL");
//例如
ajaxEngine.registerRequest("getPersonInfo","getPersonInfo.do");


4. 設定回傳時要對應的物件。
設定回傳時要對應的物件的目的，是要指定回傳資料內容，對應到網頁那個物件，或交由誰處理。
Rico的回傳物件有兩種，一種是element一種是object，
差別在於element是任意格式，但只能對應單一網頁物件，object可以多筆，可以寫自己的回傳事件。
另外設定的時間點也要注意，就是說如果網頁物件還沒產生，就先設定，那麼會不 work。

4-1 設定回傳後會變更網頁的那個 element。
registerAjaxElement如果只給一個參數，則自動對應同名ID的網頁物件，
回傳時直接用回傳內容修改對應網頁物件的innerHTML，所以沒有可自己處裡的事件。 
1
2
3
4
//對應到同名的 elementId
ajaxEngine.registerAjaxElement("elementId");
//回傳的 fromElementId內容，會變更 toElementId物件
ajaxEngine.registerAjaxElement("fromElementId",$("toElementId"));


4-2 設定回傳後要由哪個 object處理。
Rico會將回傳資料當參數，傳給對應 object的 ajaxUpdate，所以自己寫的object必須有這個method。
也就自己處理回傳後事件的起點。 
1
ajaxEngine.registerAjaxObject("objectId",new UserObject());


4-3 回傳的XML格式。
回傳值必須是下面格式的XML，所以回傳內容的 contentType必須是 application/xml，
還有中文在UTF8格式時可以正常顯示，其他編碼都會看到亂碼。 
1
2
3
4
5
6
7
8
9
10
11
12
13
<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就可以了。 
1
2
3
ajaxEngine.sendRequest("getPersonInfo", 
                        "firstName=" + firstName, 
                        "lastName=" + lastName );


5-1 post
如果要用poet的方式傳送資料，就比較麻煩，要用這種方式。 
1
2
3
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 主網頁
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<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" onclick="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" onclick="runMe2()">
<div id="result"></div>
</body>
</html>


6-2 returnElement.jsp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%@ 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
1
2
3
4
5
6
7
8
9
10
11
12
<%@ 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>

posted on 2007-03-29 10:09 朱岩 阅读(393) 评论(0)  编辑  收藏 所属分类: JavaScript文章


只有注册用户登录后才能发表评论。
网站导航: