2015年4月28日 星期二

jQuery 常用語法的整理

jQuery 既然是 Javascript 的 framework,他在決定(或者存取)特定的 element 或者 form 中的元素值自然要比較簡潔有力。在這一篇文章中,我試圖盡量利用範例來介紹 jQuery 的語法。

jQuery 語法的設計理念是選擇一個特定的 element 並在該 element 上執行某個特定的功能,因此它的基本語法就是 $(selector).action(),其中 selector 的概念跟 CSS 類似,而 action() 即代表執行的功能。例如,在jQuery 的第一個範例中,我們用過
  1. $(xml).find("areas"):其中 $(xml) 中的 xml 代表 callback 執行後的結果,而這個回傳的結果代表一個 XML 文件,而 find("areas") 這個功能就是從該 XML 文件找出名稱為 areas 的節點。
  2. $(xml).find("areas").find("area"):$(xml).find("areas") 的結果是一棵樹的根結點,而 find("area") 就是從這個根節點找出所有名稱為 area 的子結點。
  3. $(xml).find("areas").find("area").each(function...):當找出所有的 area 子節點之後,each() 這個功能就是針對每一個節點進行處理,而處理的功能定義在 function() 內。
  4. $(this).text():$(this) 中的 this 代表目前的 context node,而 text() 功能就是回傳這個節點的文字內容。

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

請勿轉貼
看其他教材

這個範例跟第四個範例非常類似,主要不同的地方在於這次我們增加了一個使用 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>