2015年4月23日 星期四

AJAX 入門:第四個範例


AJAX 入門:第四個範例

The following examples had been tested on Mozilla's Firefox and Microsoft's IE. The document is provided as is. You are welcomed to use it for non-commercial purpose.
Written by: 國立中興大學資管系呂瑞麟

請勿轉貼
看其他教材

在這個範例中,我們需要寫一個網頁來讀取 XML 檔案;使用者有兩種方式來決定 XML 檔案的名稱,一種是讓使用者輸入該 XML 檔案的 URL,另一種是讀取伺服器端 的 XML 檔。如果使用者選擇 URL,則網頁出現一個文字欄位讓使用者輸入 URL; 若使用者選擇讀取伺服器端的 XML 檔,則網頁出現下拉式選單顯示伺服器端所有的 XML 檔的檔名(須能自動產生);最後,當使用者按確定後,則出現 XML 檔案的內容。

請選擇: 自行輸入網址 選擇現有的 XML 檔

請至 demo 網頁(由於 Tomcat 對於網路的存取要求變高,在不開放的權限的情形下,是不能利用輸入 URL 的方式來執行 servlet。目前已知有些 XML 檔案攻擊的手法, 在沒改寫程式前,頃向不開放。)

範例說明:
  • 設計 HTML 元件,其內容如下:
    <form name="myform" method="GET" action="/jlu/servlet/DOMServ">
    請選擇:
    <input type="radio" name="xml" value="url"
           onClick="display();">自行輸入網址</input>
    <input type="radio" name="xml" value="xml"
           onClick="callServer();">選擇現有的 XML 檔</input>
    <br/>
    <div id="label" class="on">
    </div>
    </form>
     
    元件的設計原則大約是一旦使用者確定了 XML 檔案的位置(可以是檔案或者 是遠端的 URL)之後,按下確定按鈕,伺服器端的 DOMServ 會被呼叫;這樣的 設計還是會使用到同步化的方式。至於 DOMServ 的寫法跟課本的範例很像, 比較不一樣的地方在於:如果讀的是檔案,我們使用 java.io.*;而如果讀 的是 URL 的話,我們使用 java.net.URL。請自行閱讀 DOMServ.java 的程式碼(你必須了解 servlet 以及 DOM 的寫法)。 HTML 元件的其他部分,大略和第三個範例相同:如果使用者選擇"自行輸入網址", 一個可以輸入 URL 的文字區塊會出現;而如果使用者選擇"選擇現有的 XML 檔", 我們利用 AJAX 的方式呼叫後端的 servlet,而該 servlet 會從其目錄中找出 所有副檔名為 xml 的檔案並將其名稱回傳,最後 AJAX 程式會依照像第三個範例 一樣產生一個下拉式選單。

  • 如果使用者選擇"自行輸入網址",display() 會被呼叫,其程式碼如下。該程式碼 只是把文字欄位以及確定按鈕加到 label 內。
      function display() {
        // 顯示文字欄位
        document.getElementById("label").innerHTML = '請輸入網址:' + 
        '<input type="text" name="file" size="40"></input>
         <input type="submit" value="確定"></input>';
      }
     
    如果使用者選擇"選擇現有的 XML 檔",則 callServer() 會被呼叫。callServer() 的程式碼跟第三個範例幾乎完全相同,我們就不再描述;其中它呼叫遠端的 servlet 的原始碼 retFiles.java 請自行閱讀。
  •  
  • 完整原始碼:
    <script type="text/javascript" language="javascript">
      function display() {
        // 顯示文字欄位
        document.getElementById("label").innerHTML = 
    '請輸入網址:<input type="text" name="file" size="40"></input>
    <input type="submit" value="確定"></input>';
      }
     
      function callServer() {
        document.getElementById("label").innerHTML = "";
        var http_request = false;
     
        if (window.XMLHttpRequest) { // Mozilla, Safari,...
          http_request = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // IE
          try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
          } catch (e) {
            try {
              http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
          }
        }
     
        if (!http_request) {
          alert('Giving up :( Cannot create an XMLHTTP instance');
          return false;
        }
        // 定義事件處理函數為 alterContents()
        http_request.onreadystatechange = function() { 
                                          alertContents(http_request); };
        var url = "/jlu/servlet/retFiles";
        http_request.open('GET', url, true);
        http_request.send(null);
      }
     
      function alertContents(http_request) {
        if (http_request.readyState == 4) {
          if (http_request.status == 200) {
            var restext = http_request.responseText.split("|");
            var mesg = '<select name="file">';
            for(var i=0; i<restext.length-1; i++) {
              mesg += '<option value="' + restext[i];
              if(i == 0)
                mesg += '" selected="1">';
              else
                mesg += '">';
              mesg += restext[i] + '</option>';
            }
            mesg += '</select>';
            mesg += '<input type="submit" value="確定"></input>';
            document.getElementById("label").innerHTML = mesg;
          } else {
            alert('There was a problem with the request.');
          }
        }
      }
    </script>
    



Last Updated:
Written by: 國立中興大學資管系呂瑞麟

沒有留言:

張貼留言