一步一步学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请求页面

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

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

 

 

目录
相关文章
|
6月前
|
XML 前端开发 JavaScript
ajax原理是什么?如何实现?
ajax原理是什么?如何实现?
87 0
|
Web App开发 前端开发 JavaScript
Ajax:服务器的基本概念与初识
Ajax:服务器的基本概念与初识
75 2
|
XML 前端开发 JavaScript
Ajax之二 Ajax基础(上)
Ajax之二 Ajax基础
32 0
|
XML 开发框架 前端开发
Ajax之二 Ajax基础(下)
Ajax之二 Ajax基础(下)
60 0
|
SQL 开发框架 前端开发
AJAX之四 Ajax控件工具集(下)
AJAX之四 Ajax控件工具集(下)
46 0
|
3月前
|
XML 存储 前端开发
后端程序员的前后端交互核心-Ajax
后端程序员的前后端交互核心-Ajax
54 6
后端程序员的前后端交互核心-Ajax
|
6月前
|
XML 前端开发 JavaScript
AJAX概念及入门案例
AJAX概念及入门案例
47 0
|
前端开发
前端学习案例2-ajax得兼容和适用场景
前端学习案例2-ajax得兼容和适用场景
61 0
前端学习案例2-ajax得兼容和适用场景
|
XML 存储 前端开发
JavaWeb中异步交互的关键——Ajax
JavaWeb中异步交互的关键——Ajax
211 0
|
XML JSON 缓存
前端必看之AJAX功能原理详解篇
jax 这个概念是由 Jesse James Garrett 在 2005 年发明的。它本身不是单一技术,是一串 技术的集合,主要有: 1.JavaScript,通过用户或其他与浏览器相关事件捕获交互行为; 2.XMLHttpRequest 对象,通过这个对象可以在不中断其它浏览器任务的情况下向服务 器发送请求; 3.服务器上的文件,以 XML、HTML 或 JSON 格式保存文本数据; 4.其它 JavaScript,解释来自服务器的数据(比如 PHP 从 MySQL 获取的数据)并将其 呈现到页面上。
157 0
前端必看之AJAX功能原理详解篇