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

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

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

 

 

目录
相关文章
|
5月前
|
XML 前端开发 JavaScript
ajax原理是什么?如何实现?
ajax原理是什么?如何实现?
39 0
|
7月前
|
XML 前端开发 JavaScript
Ajax之二 Ajax基础(上)
Ajax之二 Ajax基础
20 0
|
7月前
|
XML 开发框架 前端开发
Ajax之二 Ajax基础(下)
Ajax之二 Ajax基础(下)
32 0
|
8月前
|
Web App开发 前端开发 JavaScript
Ajax:服务器的基本概念与初识
Ajax:服务器的基本概念与初识
40 2
|
6天前
|
XML 前端开发 JavaScript
AJAX 工作原理
AJAX运用XMLHttpRequest进行异步数据交换,结合JavaScript/DOM处理显示,CSS控制样式,XML承载数据,实现跨平台的Web应用。Google Suggest于2005年通过AJAX技术提供实时搜索建议,提升了用户体验。
|
前端开发
前端学习案例2-ajax得兼容和适用场景
前端学习案例2-ajax得兼容和适用场景
45 0
前端学习案例2-ajax得兼容和适用场景
|
XML JSON 缓存
前端必看之AJAX功能原理详解篇
jax 这个概念是由 Jesse James Garrett 在 2005 年发明的。它本身不是单一技术,是一串 技术的集合,主要有: 1.JavaScript,通过用户或其他与浏览器相关事件捕获交互行为; 2.XMLHttpRequest 对象,通过这个对象可以在不中断其它浏览器任务的情况下向服务 器发送请求; 3.服务器上的文件,以 XML、HTML 或 JSON 格式保存文本数据; 4.其它 JavaScript,解释来自服务器的数据(比如 PHP 从 MySQL 获取的数据)并将其 呈现到页面上。
108 0
前端必看之AJAX功能原理详解篇
|
JSON 前端开发 数据格式
使用WCF实现SOA面向服务编程——使用AJAX+WCF服务“.NET技术”页面开发
  在上一篇讲到,如果将BLL层的每一个类都转化为*.svc,这是一个不实在的想法。它会使服务变化复杂,难于管理。   这时候,我们第一时间想到的是23个简单开发模式中的Factory,在这里,Factory正好派上用场。
1061 0
|
JSON 前端开发 数据格式
一起谈.NET技术,使用WCF实现SOA面向服务编程——使用AJAX+WCF服务页面开发
  在上一篇讲到,如果将BLL层的每一个类都转化为*.svc,这是一个不实在的想法。它会使服务变化复杂,难于管理。   这时候,我们第一时间想到的是23个简单开发模式中的Factory,在这里,Factory正好派上用场。
890 0
|
前端开发 数据格式 XML