mule3中ajax组件的使用

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

一.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" onclick="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.youkuaiyun.com/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" onclick="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页面。