JAVA流通橋

JAVA啟發者

文章分類

隨筆檔案

2006年8月 (1)

文章檔案

統計

隨筆 - 1
文章 - 46
評論 - 4
引用 - 0

留言簿(3)

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，所以沒有可自己處裡的事件。

//對應到同名的 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格式時可以正常顯示，其他編碼都會看到亂碼。

<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 主網頁

<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

<%@ 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>

posted on 2007-03-29 10:09 朱巖閱讀(408) 評論(0) 編輯收藏所屬分類: JavaScript文章

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: jQuery中文入門指南 showModelessDialog()使用詳解 Javascript里延遲函數的復習 automation服務器不能創建對象”的問題的解決方案大全深入認識JavaScript中的函數用層模擬的小窗口(可拖動展合) Javascript----文件操作 JS腳本加密方法 js小技巧 JavaScript使用cookie

JAVA流通橋

導航

文章分類

隨筆檔案

文章檔案

統計

留言簿(3)

AJAX相關網址

Eclipse相關網址

Hibernate

java相關網址

LINUX相關網址

webwork相關網址

友好鏈接

閱讀排行榜

評論排行榜

Rico入門