一步一步學Mule ESB——（第二篇：Ajax篇）

待完成功能

1. 使用Ajax請求向后端發送請求
2. 把網頁的數據轉換成請求的處理流
3. 使用XSL and Mule Transformers轉換成Google API可以理解的格式
4. 創建一個Google API的拼寫檢查，處理網頁輸入
5. 返回XML數據到頁面
6. 實施一個Jetty服務器在流程中

創建工程

創建工程ajaxflow，然后在ajaxflow.mflow中加入以下組件：

　　　　　　　　　　　　　　圖：ajax請求流程

添加和配置Ajax接口

在ajaxflow.mflow中選擇Global Elements：

　　　　圖：選擇全局元素

點擊Create，出現Choose Global Type窗口。

打開Connectors，然后選擇Ajax

　　　　　　　　　　　　圖：選擇接口中的Ajax

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

http://127.0.0.1:8090/Ajax

和 src/main/app/docroot

　　　　　　　　　　　　圖：Ajax設置

點擊OK完成就可以在列表中看到Ajax接口了。

　　　　　　　　　　圖：Ajax接口

然后雙擊flow中的Ajax元素，配置Ajax Endpoint，設置Channel：

　　　　　　　　　　圖：Channel設置

然后設置引用：

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

配置XSLT轉換

下載xsl文件：

transform.xsl file

保存進你的MuleStudio > examples > AjaxSpellChecker > TransformFile目錄中

然后右鍵工程，選擇Import，選擇File System，導入剛才保存好的transform.xsl，將導入的文件放到工程的src\main\app目錄下。

做完上面的步驟，雙擊XSLT transformer會出現Pattern Properties窗口，配置如下參數：

　　　　　　　　　　　　圖：轉換屬性配置

配置Http請求

雙擊HTTP Endpoint出現Endpoint Properties窗口。

進行設置如下：

　　　　　　　　　　　　圖：Http Endpoint設置

然后設置HTTP Settings，Content Type屬性：

　　　　　　　　　　　　圖：HTTP Settings設置

導入頁面並測試

先新建文件夾，New > Folder. 名稱為/main/app/docroot，然后在新建的文件夾上點右鍵，導入示例頁面，

頁面的位置在MuleStudio > examples > AjaxSpellChecker >HTMLfile中的SpellChecker.html文件。

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

　　　　　　　　圖：ajaxflow啟動應用

然后打開瀏覽器輸入http://127.0.0.1:8090/Ajax/SpellChecker.html

　　　　　　　　圖：Ajax請求頁面

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

　　　　　　　　　　圖：控制台打出的日志信息

 

1. 一步一步學Mule ESB——（第一篇：基礎篇）
2. 一步一步學Mule ESB——（第二篇：Ajax篇）