mule3中ajax组件的使用

最新推荐文章于 2020-12-17 18:58:40 发布

S_First

最新推荐文章于 2020-12-17 18:58:40 发布

阅读量377

点赞数

分类专栏： mule 文章标签： mule ajax组件

本文链接：https://blog.csdn.net/S_First/article/details/84646192

版权

mule 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

话不多说，直接怎么使用。

一.HTML页面等资源由mule自己管理，访问mule的ajax服务器：

xml配置：

<ajax:connector name="Ajax" serverUrl="http://0.0.0.0:8080/test" jsonCommented="true" doc:name="Ajax" resourceBase="${app.home}/docroot"/>
<flow name="ajax_servletFlow">
<ajax:inbound-endpoint channel="/services/serverEndpoint" responseTimeout="10000" doc:name="Ajax" connector-ref="Ajax"/>
<component class="com.eshore.GetAjaxData" doc:name="Java"/>
</flow>

前端页面:hello.html(所在位置，src/main/app/docroot/hello.html)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello</title>

function publishToMule() {
var data = new Object();
data.phrase = document.getElementById('phrase').value;
data.user = document.getElementById('user').value;
/* mule.rpc("/services/echo", str, rpcEchoResponse); //第一个参数：ajax服务器通道，第二个参数：传递的字符串值，第三个参数：回调函数
mule.subscribe("/football/scores", scoresCallback);//第一个参数：ajax服务器通道，第二个参数：回调函数
mule.publish("/services/serverEndpoint", str); //第一个参数：ajax服务器通道，第二个参数：传递的字符串值
*/
var str = JSON.stringify(data);
mule.rpc("/services/serverEndpoint", str, rpcEchoResponse);
}

function rpcEchoResponse(message){
   var data = message.data;
   var div = document.getElementById('returnData');
   div.innerHTML = data;
}
</script>
</head>
<body>
<div>
姓名： <input id="name" type="text"/>
年龄：<input id="age" type="text"/>
<input id="sendButton" type="submit" name="Go" value="Send" οnclick="publishToMule();"/>
</div>
   <div id="returnData"></div>

<a href="http://localhost:8080/test/index.html">首页</a>
</body>
</html>

注：浏览器输入请求路径：http://localhost:8080/test/hello.html定位到HTML页面，点击其按钮可实现ajax的局部刷新，点击首页超链接可跳转到index.html页面。

二.自定义页面访问mule的ajax服务器：

xml配置：

<ajax:connector name="Ajax" serverUrl="http://0.0.0.0:8080/test" jsonCommented="true" doc:name="Ajax" resourceBase="${app.home}/webapps"/>
<flow name="ajax_servletFlow">
<ajax:inbound-endpoint channel="/services/serverEndpoint" responseTimeout="10000" doc:name="Ajax" connector-ref="Ajax"/>
<component class="com.eshore.GetAjaxData" doc:name="Java"/>
</flow>

前端页面:hello.html(所在位置，src/main/app/webapps/WEB-INF/hello.html)

导入mule.js（mule.js在mule-mule-transport-ajax-3.8.0.jar中，用解压软件解压把其中的js目录复制到WEB-INF目录下。）

下载链接：https://download.csdn.net/download/s_first/10974031

maven引入：

<dependency>
<groupId>org.mule.transports</groupId>
<artifactId>mule-transport-ajax</artifactId>
<version>3.8.0</version>
</dependency>

页面代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello</title>

<a href="http://localhost:8080/test/WEB-INF/index.html">首页</a>
</body>
</html>

注：浏览器输入请求路径：http://localhost:8080/WEB-INF/hello.html定位到HTML页面，点击其按钮可实现ajax的局部刷新，点击首页超链接可跳转到index.html页面。

S_First

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mule3中ajax组件的使用

话不多说，直接怎么使用。一.HTML页面等资源由mule自己管理，访问mule的ajax服务器：xml配置： &lt;ajax:connector name="Ajax" serverUrl="http://0.0.0.0:8080/test" jsonCommented="true" doc:name="Ajax" resourceBase="${app.home}/docro...
复制链接

扫一扫

专栏目录