一步一步学Mule ESB——(第二篇:Ajax篇)

简介: 待完成功能 使用Ajax请求向后端发送请求 把网页的数据转换成请求的处理流 使用XSL and Mule Transformers转换成Google API可以理解的格式 创建一个Google API的拼写检查,处理网页输入 返回XML数据到页面 实施一个Jetty服务器在流程中 创建工程 创建工程ajaxflow,然后在ajaxflow.

待完成功能

  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 URLResource 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请求页面

根据输入内容的不同,控制台就会输出对应的处理内容了。

          图:控制台打出的日志信息

 

 

目录
相关文章
|
8月前
|
设计模式 前端开发 JavaScript
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
74 0
|
8月前
|
XML 前端开发 JavaScript
ajax原理是什么?如何实现?
ajax原理是什么?如何实现?
108 0
|
XML 前端开发 JavaScript
Ajax之二 Ajax基础(上)
Ajax之二 Ajax基础
37 0
|
XML 开发框架 前端开发
Ajax之二 Ajax基础(下)
Ajax之二 Ajax基础(下)
67 0
|
JSON 前端开发 JavaScript
|
8月前
|
设计模式 缓存 前端开发
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(下)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
58 1
|
8月前
|
前端开发 JavaScript fastjson
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(上)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
89 1
|
8月前
|
XML 前端开发 JavaScript
AJAX概念及入门案例
AJAX概念及入门案例
57 0
|
XML JSON 前端开发
JavaWeb开发 Ajax技术详解(一)
JavaWeb开发 Ajax技术详解(一)
|
前端开发
前端学习案例2-ajax得兼容和适用场景
前端学习案例2-ajax得兼容和适用场景
80 0
前端学习案例2-ajax得兼容和适用场景