话不多说,直接怎么使用。
一.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>
<script type="text/javascript" src="mule-resource/js/mule.js"></script>
<script type="text/javascript">
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>
<script type="text/javascript" src="js/mule.js"></script>
<script type="text/javascript">
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/WEB-INF/index.html">首页</a>
</body>
</html>
注:浏览器输入请求路径:http://localhost:8080/WEB-INF/hello.html定位到HTML页面,点击其按钮可实现ajax的局部刷新,点击首页超链接可跳转到index.html页面。