一步一步學Mule ESB——（第二篇：Ajax篇）待完成功能建立工程 添加和配置Ajax接口 配置XSLT轉換 配置Http請求 導入頁面并測試

使用Ajax請求向後端發送請求

把網頁的資料轉換成請求的處理流

使用XSL and Mule Transformers轉換成Google API可以了解的格式

建立一個Google API的拼寫檢查，處理網頁輸入

傳回XML資料到頁面

實施一個Jetty伺服器在流程中

建立工程ajaxflow，然後在ajaxflow.mflow中加入以下元件：

　　　　　　　　　　　　　　圖：ajax請求流程

在ajaxflow.mflow中選擇Global Elements：

　　　　圖：選擇全局元素

點選Create，出現Choose Global Type視窗。

打開Connectors，然後選擇Ajax

　　　　　　　　　　　　圖：選擇接口中的Ajax

分别在Server URL和Resource Base中輸入:

<a href="http://127.0.0.1:8090/Ajax">http://127.0.0.1:8090/Ajax</a>

和 src/main/app/docroot

　　　　　　　　　　　　圖：Ajax設定

點選OK完成就可以在清單中看到Ajax接口了。

　　　　　　　　　　圖：Ajax接口

然後輕按兩下flow中的Ajax元素，配置Ajax Endpoint，設定Channel：

　　　　　　　　　　圖：Channel設定

然後設定引用：

選擇我們上邊設定的Ajax全局接口。

下載下傳xsl檔案：

<a href="http://www.mulesoft.org/documentation/download/attachments/57049117/transform.xsl?version=2&amp;modificationDate=1341008752741">transform.xsl file</a>

儲存進你的MuleStudio &gt; examples &gt; AjaxSpellChecker &gt; TransformFile目錄中

然後右鍵工程，選擇Import，選擇File System，導入剛才儲存好的transform.xsl，将導入的檔案放到工程的src\main\app目錄下。

做完上面的步驟，輕按兩下XSLT transformer會出現Pattern Properties視窗，配置如下參數：

　　　　　　　　　　　　圖：轉換屬性配置

輕按兩下HTTP Endpoint出現Endpoint Properties視窗。

進行設定如下：

　　　　　　　　　　　　圖：Http Endpoint設定

然後設定HTTP Settings，Content Type屬性：

　　　　　　　　　　　　圖：HTTP Settings設定

先建立檔案夾，New &gt; Folder. 名稱為/main/app/docroot，然後在建立的檔案夾上點右鍵，導入示例頁面，

頁面的位置在MuleStudio &gt; examples &gt; AjaxSpellChecker &gt;HTMLfile中的SpellChecker.html檔案。

然後啟動Run as Mule Application，啟動成功後我們能看到：

　　　　　　　　圖：ajaxflow啟動應用

　　　　　　　　圖：Ajax請求頁面

根據輸入内容的不同，控制台就會輸出對應的處理内容了。

　　　　　　　　　　圖：控制台打出的日志資訊

<a href="http://www.cnblogs.com/skyme/archive/2012/08/08/2627587.html">一步一步學Mule ESB——（第一篇：基礎篇）</a>

<a href="http://www.cnblogs.com/skyme/archive/2012/08/10/2631244.html">一步一步學Mule ESB——（第二篇：Ajax篇）</a>