Ajax 利用 prototype javascript framework

prototype 是一個十分優秀的 javascript framework, 他會改變你寫 javascript 的想法以及重新思考如何寫出較為 OO 的 javascript 以方便程式開發及維護.

他有一點點不是很容易上手這裡有一些文件可供參考

• Quick Guide to Prototype
• Developer Notes for prototype.js
• the Prototype JavaScript framework documentation

我們在 RUNEC/WE 程式裡已經架在 prototype 上開發.

• 很 OO 你可以寫一個 javascript class 專門處理相關工作
• 可以用 bindAsEventListener 將某個 button event 處理程式連回你的 javascript class
• $(), $F()... 程式較乾淨

重點不在這, 介紹一下簡單的 AJAX 應用, 你可以先到 wikipedia 看一下相關文章對 AJAX 的介紹後有些概念其它工作就簡單一點. 其實會需要寫一些 javascipt 來處理, 所以一個好的 javascript framework 是需要的.

• Client 端利用 prototype Ajax.Request 將參數送到某個 url 傳送到 Server 端
  當按下某個 button 後 javascript 會送出 HTTPXMLRequest 給 Server
• Server 處理後將結果轉成 xml 送回 client
• 然後 client 端 onSuccess 時收到 xml 資料, 再做處理
  

  //button for xxx
  //"src" is the xxx button element
  //"next" is a boolean variable to decide which type we used function
  btnXXX(src, next) {
    //找到 form 以便取得 form 內其它參數值
    var form = src.form;
    var opt = {
      method: 'post',
  
      // 處理接收到的 xml 資料
      onSuccess: function(x) {
        //alert("Received data"+x.responseText);
        var dt = x.responseXML.getElementsByTagName("docType")[0];
        dt = dt.childNodes[0].nodeValue;
        var id = x.responseXML.getElementsByTagName("id")[0];
        id = id.childNodes[0].nodeValue;
        dt = dt.replace(/^\s+/g, '').replace(/\s+$/g, ''); //trim
        id = id.replace(/^\s+/g, '').replace(/\s+$/g, ''); //trim
  
        //利用 javascript 處理所取得的資料
        var uri = '/id/view/'+dt+'/'+id;
        document.location.replace(uri);
      },
  
      // Handle 404
      on404: function(x) {
        alert('Error 404: location "' + x.statusText + '" was not found.');
      },
  
      // Handle other errors
      onFailure: function(x) {
        alert('Error ' + x.status + ' -- ' + x.statusText);
      }
    };
  
  
    //處理參數, 從 form 中取得 id & i_doc_type 兩個 input 值
    //$F(xxx) 可以取出 input 值
    opt.postBody = 'type='+((next) ? encodeURIComponent('next') : encodeURIComponent('prev'))+
                   '&docType='+encodeURIComponent($F(form.elements['i_doc_type']))+
                   '&id='+encodeURIComponent($F(form.elements['id']));
  
    //送出到參數到 url
    new Ajax.Request('/biz/trans/transNextPrev.xml.jsp', opt);
  }

• Server 端對此 url 及參數處理後, 要輸出 xml 結果
  這和一般開發 Web 程式一樣, 只要能輸出 xml 結果即可
  你可以試試 openrico 的一個輸出 xml 結果資料, Try it.
  這是我們 JSP/Servelet 的處理

<?xml version="1.0" encoding="UTF-8"?>
<%@ page contentType="text/xml;charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="/WEB-INF/tld/sat/core.tld" prefix="c" %>
<%@ taglib uri="/WEB-INF/tld/sat/xml.tld" prefix="x" %>
<c:header name="Cache-Control" value="no-cache"/>
<c:header name="Pragma" value="no-cache"/>

<c:doc docType="biz.trans.TransNextPrev">
<c:set var="rows"
 value="=dataSource('com.potix.sat.report.biz.trans.TransNextPrevDataSource')"/>

<transNextPrev>
<c:for-each-row value="=rows" docType="biz.trans.TransNextPrevRow">
 <docType><c:out value="=docType"/></docType>
 <id><c:out value="=t"/></id>
</c:for-each-row>
</transNextPrev>
</c:doc>

• 以下是產生出來的 xml 檔

<?xml version="1.0" encoding="UTF-8" ?>
<transNextPrev>
 <docType>acc.trans.Entry</docType>
 <id>060113001</id>
</transNextPrev>



• Client 端要處理收到的 xml 資料
  見 btnXXX() 內 onSuccess 處理