待完成功能
- 使用Ajax请求向后端发送请求
- 把网页的数据转换成请求的处理流
- 使用XSL and Mule Transformers转换成Google API可以理解的格式
- 创建一个Google API的拼写检查,处理网页输入
- 返回XML数据到页面
- 实施一个Jetty服务器在流程中
创建工程
创建工程ajaxflow,然后在ajaxflow.mflow中加入以下组件:
图:ajax请求流程
添加和配置Ajax接口
在ajaxflow.mflow中选择Global Elements:
图:选择全局元素
点击Create,出现Choose Global Type窗口。
打开Connectors,然后选择Ajax
图:选择接口中的Ajax
分别在Server URL和Resource Base中输入:
和 src/main/app/docroot
图:Ajax设置
点击OK完成就可以在列表中看到Ajax接口了。
图:Ajax接口
然后双击flow中的Ajax元素,配置Ajax Endpoint,设置Channel:
图:Channel设置
然后设置引用:
选择我们上边设置的Ajax全局接口。
配置XSLT转换
下载xsl文件:
保存进你的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请求页面
根据输入内容的不同,控制台就会输出对应的处理内容了。
图:控制台打出的日志信息