利用 reco 來編寫 Ajax 應用

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

利用 reco 來編寫 Ajax 應用

這個基本上是照搬 reco 的入門教程。

在 reco 中，對 Ajax 機製做了物件導向封裝，並設計了兩種簡單的響應模式，一種是元素更新；一種是JS響應。這裡只看一下元素更新。

純粹從0開始寫一個AJAX應用是比較麻煩的，不過，利用別人寫好的庫就事半功倍了。用 reco 只需三部曲：

一、註冊 Ajax 要求處理常式。就是發送 Ajax 請求的東東。如下面的第一行代碼。註冊響應處理器，在元素更新模式下，處理器就是某個元素，這裡只需將元素的ID註冊，如第二行代碼，AJAX響應會自動更新到元素裡面。

  function bodyOnLoad() {   ajaxEngine.registerRequest("getxx", "hotman_x.xml");  //1   ajaxEngine.registerAjaxElement("xx");  // 2  }

一般把這個函數作為body的onload事件來啟用。從名字就能看出來了，呵呵。

二、寫出HTML主體，當然，你得有一個ID為xx，且能夠有內容的HTML元素供更新。象<br>之類的元素是不行滴。

三、發出 AJAX 請求： ajaxEngine.sendRequest("getxx"); 當然，為了執行這個語句，你需要一個方法來調用它，比如放個按鈕什麼的。

JS部分就完成了。後台還要做一點點事，那就是對相應的調用發回一個 xml 響應。注意上面的語句1，第二個參數就是請求一個XML文檔，這個文檔裡面帶有響應資料。這是為了簡單起見，在實際情況下，恐怕這個參數不會是靜態頁面，一般是個 JSP、ASP 之類的動態網頁面，這個動態網頁面會給出一個XML響應。不過這樣的話要注意一個小問題，那就是，HTTP回應標頭必須明確指出返迴文檔的MIME類型是XML，如在JSP中這樣寫：<% response.setHeader(“Content-Type”, “text/xml”); %>。

說了半天，其實不如看看代碼：

<pre><html>
<head>
 <script src="prototype.js"></script>
 <script src="rico.js"></script>
 <script>
  function bodyOnLoad() {
   ajaxEngine.registerRequest("getxx", "hotman_x_x.xml");
   ajaxEngine.registerAjaxElement("xx");
  }

  function requestIt() {
   ajaxEngine.sendRequest("getxx");
  }
 </script>
</head>

<body onload="javascript:bodyOnLoad()">
 <div id="xx"></div>
 <input type="button" onclick="javascript:requestIt()"/>
</body>
</html>

這裡是響應的XML，也有一定的格式要求：

<?xml version="1.0" encoding="ISO-8859-1"?>
<ajax-response>
 <response type="element" id="xx">
  <span>hello, world!</span>
 </response>
</ajax-response>

它的格式其實只有三點要注意：一是以 ajax-response 為根節點，二是所有根節點的下級子節點均為 response，且其屬性 type 設定為 element（即指定為元素更新模式），id應為註冊要更新的元素的註冊ID。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More