XML - 資料交換管理/AJAX

XML - 資料交換管理

章節

附錄

練習

相關主題

參與進來

上一章	下一章
← XUL	Web 服務 →

AJAX 如今是 WEB 2.0 時代最常用的詞語之一。雖然它歷史的起源並不完全清楚（類似的操縱網頁部分的邏輯早在 AJAX 術語出現之前就被認為是 DHTML，而且令人驚訝的是，它甚至使用了一些 DOM 型別），但它現在是現代網頁設計師使用的最重要技術之一。
但 AJAX 到底是什麼意思呢？ - 簡而言之，AJAX 代表 Asynchronous JavaScript and XML（非同步 JavaScript 和 XML）。它描述了一種在客戶端（通常是 Web 瀏覽器）和伺服器之間進行非同步資料傳輸（這裡：封裝在 XML 中的資料）的概念，只需要交換/更改網頁的一部分，而無需完全重新載入頁面。這意味著瀏覽器將在後臺發出 XMLHttpRequest，並且只接收頁面的一部分 - 通常與一個或多個包含 uid 的 HTML 標籤相關聯。

以下是 Ajax 程式設計模式的主要組成部分。

JavaScript - Web 上最流行的指令碼語言，所有主要瀏覽器都支援。Ajax 應用程式是用 JavaScript 構建的。
文件物件模型 (DOM) - 將網頁結構定義為一組可程式設計物件。在 Ajax 程式設計中，DOM 允許我們重新繪製頁面的一部分。
層疊樣式表 (CSS) - 提供一種定義網頁上元素視覺外觀的方法。
XMLHttpRequest - 允許客戶端指令碼執行 HTTP 請求，有效地消除了 Ajax 應用程式中的完全頁面重新整理或回發。
XML - 它有時用作在伺服器和客戶端之間傳輸資料的格式，但其他基於文字的格式也同樣適用。

Ajax 提供了許多優勢。以下列出了一些最重要的優勢。

頻寬需求降低：由於在請求附加資訊時無需完全重新載入頁面，因此可以最大限度地減少資料傳輸。透過在瀏覽器中本地生成 HTML，頻寬需求也降低了（注意：然而，由於我們有 JavaScript 嵌入帶來的額外開銷，因此只有當從同一站點進行多個或兩個以上的頁面請求時，這種情況才成立）。
無需瀏覽器外掛：Ajax 可以在支援 JavaScript 的所有瀏覽器中執行。不需要額外的外掛。與 Shockwave 或 Flash 等技術相比，這是一個優勢（注意：然而，在某些情況下，某些瀏覽器可能會表現不同；尤其是 IE 6 之前的版本以奇特的行為而聞名）。
資料和格式分離：這使得 Web 應用程式更高效。程式設計師可以將透過 Web 傳遞資訊的方法和格式分離。因此，他們可以使用他們熟悉的語言（注意：這是由於 CSS 而不是 AJAX）。
網站更友好：由於資料傳輸量減少，使用者操作的響應速度更快。此外，使用 Ajax 構建的介面可能更友好（注意：然而，沒有回退到普通 HTML 請求響應迴圈的 AJAX 以其對無障礙 Web 設計構成巨大障礙而聞名）。

經典請求響應與 AJAX 迴圈

如您在影像中所見，AJAX 迴圈在客戶端嵌入了一個額外的 JavaScript 庫。因此，JS 庫用於與伺服器通訊（如果使用 AJAX），以及操作它嵌入的 HTML 頁面。對於一個小例子，我們現在將看看所謂的自動完成（我們將在這裡看看基本處理，並跳過詳細的 JS-DOM 操作）。另一方面，傳統方法始終需要一個完整的請求響應迴圈，將整個頁面從伺服器傳送到瀏覽器。

一個簡單的例子：自動完成

此示例展示了一個來自 wicket 示例的簡單自動完成文字欄位（wicket 是 ASF 下的元件化 Java Web 框架 - http://wicket.apache.org/）。該示例線上即時演示，因此您不僅可以遵循程式碼，還可以即時檢視它的執行情況。

自動完成文字欄位背後的理念是在使用者填寫欄位時提供有用的可能性，以此來幫助使用者。想象一下，您在 amazon.com 上尋找產品“foo”，您將其填寫到搜尋欄中，只是為了發現它在提交後不存在 - 使用自動完成感知的欄位，您會在輸入一些字母后就已知曉。為了有一個簡單的例子，我們現在將看看一個單一的欄位，您可以在其中輸入國家/地區的名稱，例如“England”、“Germany”或“Austria”。

它背後的 HTML 相當簡單（必要的 JavaScript 會由 wicket 自動提供；類似於 prototype 等純 JS 庫所做的；當然，您可以提供自己的實現，即使這樣做沒有太大意義）。

... header containing CSS + HTML-head left out...
The textfield below will autocomplete country names. It utilizes AutoCompleteTextField in wicket-extensions.<br/><br/>

        <form wicket:id="form">
            Country: <input type="text" wicket:id="ac" size="50"/>
        </form>
...footer left out...

因此，我們目前只得到一個簡單的表單，其中包含一個普通的 <input />。 “wicket:id”僅用於將其繫結到 Java 程式碼，對 AJAX 沒有任何影響（實際上，在生產模式下，它會被剝離）。

Java 程式碼也不復雜

public class AutoCompletePage extends BasePage
{
    /**
     * Constructor of the AutoCompletePage
     */
    public AutoCompletePage()
    {
        Form form = new Form("form");
        add(form);

        final AutoCompleteTextField field = new AutoCompleteTextField("ac", new Model(""))
        {
            protected Iterator getChoices(String input)
            {
                if (Strings.isEmpty(input))
                {
                    return Collections.EMPTY_LIST.iterator();
                }

                List choices = new ArrayList(10);

                Locale[] locales = Locale.getAvailableLocales();

                for (int i = 0; i < locales.length; i++)
                {
                    final Locale locale = locales[i];
                    final String country = locale.getDisplayCountry();

                    if (country.toUpperCase().startsWith(input.toUpperCase()))
                    {
                        choices.add(country);
                        if (choices.size() == 10)
                        {
                            break;
                        }
                    }
                }

                return choices.iterator();
            }
        };
        form.add(field);

        ...more Java here, but not needed for this simple example case...

    }
}

因此，我們在這裡看到一個普通的頁面，它附加了一個表單。另一方面，該表單包含一個 已進行 Ajax 處理的 文字欄位版本。protected Iterator getChoices(String input) 函式是在按下鍵（透過使用鍵盤在欄位中輸入一些值）後由 AJAX 呼叫（我們稍後會看到） - 意味著該函式是 AJAX 業務邏輯的表示。在這裡，我們只檢查是否已經輸入了內容（使用者可能刪除了內容），如果是，那麼是否存在以已輸入字母開頭的國家/地區（例如：如果您輸入 Aus，它將找到像 Austria 和 Australia 這樣的國家/地區）。

最終的 Web 頁面將是

<html>
<head>
<script type="text/javascript"><!--/*--><![CDATA[/*><!--*/

var clientTimeVariable = new Date().getTime();

/*-->]]>*/</script>


	...title + css stripped out...
       <script type="text/javascript" src="resources/org.apache.wicket.markup.html.WicketEventReference/wicket-event.js"></script>
       <script type="text/javascript" src="resources/org.apache.wicket.ajax.WicketAjaxReference/wicket-ajax.js"></script>
       <script type="text/javascript" src="resources/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/wicket-ajax-debug.js"></script>
  
<script type="text/javascript" src="resources/org.apache.wicket.extensions.ajax.markup.html.autocomplete.AutoCompleteBehavior/wicket-autocomplete.js"></script>
<script type="text/javascript" ><!--/*--><![CDATA[/*><!--*/
Wicket.Event.add(window, "domready", function() { new Wicket.AutoComplete('i1','?wicket:interface=:1:form:ac::IActivePageBehaviorListener:1:&amp;wicket:ignoreIfNotActive=true',false);;});
/*-->]]>*/</script>

</head>
<body>
    
   ...head stripped out...
    

		The textfield below will autocomplete country names. It utilizes AutoCompleteTextField in wicket-extensions.<br/><br/>

		<form action="?wicket:interface=:1:form::IFormSubmitListener::" method="post" id="i2"><div style="display:none"><input type="hidden" name="i2_hf_0" id="i2_hf_0" /></div>
			
			Country: <input value="" autocomplete="off" type="text" size="50" name="ac" onchange="var 
                        wcall=wicketSubmitFormById('i2', '?wicket:interface=:1:form:ac::IActivePageBehaviorListener:3:&amp;wicket:ignoreIfNotActive=true', null,null,null, function() 
                        {return Wicket.$$(this)&amp;&amp;Wicket.$$('i2')}.bind(this));;" id="i1"/>
		</form>

		
<script type="text/javascript"><!--/*--><![CDATA[/*><!--*/

window.defaultStatus='Server parsetime: 0.0070s, Client parsetime: ' + (new Date().getTime() - clientTimeVariable)/1000 +  's';

/*-->]]>*/</script>

</body>
</html>

因此，我們現在得到了一個帶有大量 JS 資源（包含 DOM 解析器、轉換器等）以及使用 onchange="..." JS 方法對我們的 <input> 欄位進行 JS 行為的 HTML。

如果您現在開始在欄位中輸入一些字元，例如“au”，onchange 事件將被觸發，並將呼叫 wicketSubmitFormById() 方法，發出對伺服器的呼叫並接收 XML。

1  INFO: focus set on i4
2  INFO:
3  INFO: Initiating Ajax GET request on ?wicket:interface=:1:form:ac::IActivePageBehaviorListener:1:&wicket:ignoreIfNotActive=true&q=au&random=0.9530900388300743
4  INFO: Invoking pre-call handler(s)...
5  INFO: Received ajax response (85 characters)
6  INFO:
<ul><li textvalue="Austria">Austria</li><li textvalue="Australia">Australia</li></ul>
7  INFO:

在第 1 行，對欄位（這裡用 uid i4 表示）的焦點被設定。在我們輸入“au”到欄位中後，在第 3 行，一個 AJAX 請求被髮送到伺服器。第 4+5 行說明了預呼叫處理程式和 AJAX 響應的接收。第 6 行顯示了響應的已解碼內容，包含一個 <ul>，其中包含以“au”開頭的兩個預期國家/地區，現在這些國家/地區由 JS 頭部庫放置在頁面上的適當位置。

您現在已經看到了 AJAX 廣闊世界中一個小的、簡單的例子。要真正理解它，您應該線上觀看和使用它（不要忘記點選右下角的“wicket AJAX 除錯”連結，以便您能夠看到通訊）。在 http://wicketstuff.org/wicket13/ajax/ 中，您將找到更多執行示例，它們都包含程式碼。