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: 國立中興大學資管系呂瑞麟

請勿轉貼

看其他教材

---

這個範例跟第四個範例非常類似，主要不同的地方在於這次我們增加了一個使用 XMLHttpRequest 的地方，也就是選擇了 XML 檔案後，AJAX 會要求 server 將解析 之後的結果回傳；最後，AJAX 網頁將回傳的內容放置於如網頁中綠色的方塊中 （這效果是採用 CSS 的結果）。請參考 demo 網站。

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

---

範例說明：

• 在這個範例中，我們在"範例說明："之後，加了一段 div 區塊，其內容如下， 這個區塊也就是右邊綠色的方塊，該方塊的 id 為 rssBox：

  <div id="rssBox" class="on">
  </div>
  

  而 rssBox 的 CSS 設定內容下：（可以參考 CSS 簡介）

  #rssBox {
    width:350px;
    margin:5px;
    float:right;
    height:220px;
    border:1px dotted #317082;
    padding:3px;
    font-size:0.8em;
    background-color:#99FF99;
    overflow-x: scroll;
    overflow-y: scroll;
  }
  

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>

第二個範例：AJAX 網頁與伺服器端程式（以 servlet 為例）

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: 國立中興大學資管系呂瑞麟

請勿轉貼

看其他教材

---

在第一個範例中，為了簡化起見，我們只是將遠端的檔案下載下來，再經由 Javascript 的 DOM 功能來剖析 XML 文件。可是絕大多數的 AJAX 網頁都是 跟伺服器端的程式來做互動的，因此在第二個範例中，我們延續第一個範例， 差別只是在於這次我們呼叫的對象是伺服器端的程式，其他不變。 仔細檢查第一個範例的程式碼，我們發現在 HTML 元件的第一個 div 區塊，我們 利用 onclick="makeRequest('taichung.xml') 來啟動呼叫，而 taichung.xml 就變成了 makeRequest() 中的 url，而這個 url 變數的值就代表了伺服器的資源或者程式。我們可不可以使用之前非 AJAX 網頁中 所寫的 servlet 呢？嗯，試試看！

測試 jQuery 傳送中文資料給 Tomcat

測試 jQuery 傳送中文資料給 Tomcat

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: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

請勿轉貼

看其他教材

---

這個範例是對應 由 XMLHttpRequest 送出中文資料給 Tomcat，其主要的目的在於測試在 jQuery 的環境下，如何經資料（尤其是中文資料）傳送給 Tomcat。 在之前的對應文章中，我們說明了不同的開發環境以及瀏覽器對於傳送資料的作法不同， 而且目前也還沒有標準規範該如何做；我們經過多次實驗後得知，比較實用的做法是 瀏覽器端的 Javascript 在將資料送往 Tomcat 之前，最好先使用 encodeURIComponent() 對資料進行編碼。目前根據 jQuery 的文件，jQuery 在傳送資料給伺服器端之前， 會自動對傳送資料進行 encodeURIComponent() 編碼，這個功能讓我們的程式開發 又可以更輕鬆。 完成這個範例的步驟如下：

第二個範例：呼叫遠端 servlet

第二個範例：呼叫遠端 servlet

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: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

請勿轉貼

看其他教材

---

這個範例是對應 AJAX 入門：第二個範例。 在第一個範例中，為了簡化起見，我們只是將遠端的檔案下載下來， 再經由 jQuery 的內建功能（如 find() 和 text()）功能來剖析 XML 文件。可是 絕大多數的 jQuery 網頁都是跟伺服器端的程式來做互動的，因此在第二個範例中， 我們延續第一個範例，差別只是在於這次我們呼叫的對象是伺服器端的程式，其他不變。 雖然在本範例我們採用的遠端程式是 Java servlet，但是遠端程式可以是其他 開發環境，例如 php、asp、perl 等；另外，由於本例所使用的 servlet 程式跟 AJAX 對應文件的程式相同，我們就不再把 servlet 端的程式列示出來。 跟第一個範例主要的差別如下：

• 由於是呼叫遠端程式，所以按鈕中的 onclick="makeRequest('taichung.xml') 需要改變成遠端的網址，依據 servlet 的網址，該段設定需要改成 onclick="makeRequest('http://xml.nchu.edu.tw:8080/jlu/servlet/Taichung')。


• 由於 servlet 回傳的是一個 HTML 檔，而不是一個 XML 檔，所以 makeRequest() 並不需要處理 XML 的內容，而是直接接收即可，因此我們把它改成

    function makeRequest(str) {
      $.get(str, function(result) {
          $("#taichung").html(result);
      });
    }
  



• 最後完成的結果如下： （由於跨域的安全考量，下列按鈕無法執行，請至demo 網頁）
  
  取得台中行政區域