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>
  

---

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