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

一步一步学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篇）
   

 

 

 

如果，您认为阅读这篇博客让您有些收获，不妨点击一下右下角的【推荐】按钮。
如果，您希望更容易地发现我的新博客，不妨关注一下 skyme。
因为，我的写作热情也离不开您的肯定支持。
未注明转载的文章，版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

 

分类:  SOA