Connection Manager 是一个很好的 Ajax 工具。其实, Connection Manager 就是 Ajax 技术用到的 XMLHttpRequest 的 library 。
首先,先要把用到的 js 文件 include 进来, Connection Manager 中使用了如下文件:
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../build/event/event.js"></script>
<script type="text/javascript" src="../../build/connection/connection.js"></script>
其中, yahoo.js 是所有 library 都需要的,不过之需要 include 一次即可。
下面我们来对 Connection Manager 说明一下,其中建立连接时,我们要使用 YAHOO.util.Connect.asyncRequest 方法。例如:
<script>
var transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);
</script>
参数说明:
l 第一个参数是提交数据的 HTTP 方法,这里使用 GET ,其他还有 POST , HEAD , PUT , DELETE ,比较常用的就是 GET 和 POST
l 第二个参数是 URL
l 第三个参数是一个 callback ,一个用来处理服务器 response 的对象的引用, callback 其实就是一个类
l 第四个参数只有当第一个参数是 POST 是才有效,是用来传输 POST 数据的
下面我们来做一个例子,主要功能是:当输入 userid 后,点击按钮检查该 userid 是否已经存在。
建立一个名为 post_clean.html 的 HTML 文件,主要内容如下:
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="container"></div><br/>
<div id="showmsg" align="center"></div>
<div align="center">
<form>
<input type="text" id="userid" name="userid" ><br/>
<input name="button" type="button" onClick="makeRequestReturnText();" value="Send a POST Request Return Text">
<input name="button" type="button" onClick="makeRequestReturnXml();" value="Send a POST Request Return Xml">
</form>
</div>
<script>
var div1 = document.getElementById('container');
var div = document.getElementById('showmsg');
var globalEventsText = {
start:function(type, args){
div.innerHTML = "<img src='indicator.gif'/>";
},
complete:function(type, args){
div.innerHTML = "<img src='indicator.gif'/>";
},
success:function(type, args){
//div.innerHTML = "success";
if(args[0].responseText !== undefined){
div.innerHTML = args[0].responseText;
}
},
failure:function(type, args){
div.innerHTML = "failure";
},
abort:function(type, args){
div.innerHTML = "abort";
}
};
var globalEventsXml = {
start:function(type, args){
div.innerHTML = "<img src='indicator.gif'/>";
},
complete:function(type, args){
div.innerHTML = "<img src='indicator.gif'/>";
},
success:function(type, args){
//div.innerHTML = "success";
var root = args[0].responseXML.childNodes[0];
var oRetValue = root.getElementsByTagName('retvalue')[0].childNodes[0].nodeValue;
div.innerHTML = oRetValue;
},
failure:function(type, args){
div.innerHTML = "failure";
},
abort:function(type, args){
div.innerHTML = "abort";
}
};
/* Please see the Success Case section for more
* details on the response object's properties.
* o.tId
* o.status
* o.statusText
* o.getResponseHeader[ ]
* o.getAllResponseHeaders
* o.responseText
* o.responseXML
* o.argument
*/
var handleSuccess = function(o){
YAHOO.log("The success handler was called. tId: " + o.tId + ".", "info", "example");
if(o.responseText !== undefined){
div1.innerHTML = "<li>Transaction id: " + o.tId + "</li>";
div1.innerHTML += "<li>HTTP status: " + o.status + "</li>";
div1.innerHTML += "<li>Status code message: " + o.statusText + "</li>";
div1.innerHTML += "<li>HTTP headers received: <ul>" + o.getAllResponseHeaders + "</ul></li>";
div1.innerHTML += "<li>JSP response Text: " + o.responseText + "</li>";
if (o.responseXML.childNodes.length!=0) {
// || o.responseXML.childNodes.length!=0
div1.innerHTML += "<li>JSP response XML: " + o.responseXML.childNodes[0].tagName;
}
div1.innerHTML += "<li>Argument object: Array ([0] => " + o.argument[0] +
" [1] => " + o.argument[1] + " )</li>";
}
};
var handleFailure = function(o){
YAHOO.log("The failure handler was called. tId: " + o.tId + ".", "info", "example");
if(o.responseText !== undefined){
div1.innerHTML = "<li>Transaction id: " + o.tId + "</li>";
div1.innerHTML += "<li>HTTP status: " + o.status + "</li>";
div1.innerHTML += "<li>Status code message: " + o.statusText + "</li>";
}
};
var callback =
{
success:handleSuccess,
failure:handleFailure,
//upload: function(o) {/*upload handler code*/},
//scope: AjaxObject={ handleSuccess:function(o){this.processResult(o);}, handleFailure:function(o){},processResult:function(o){},startRequest:function(){}},
//timeout: 5000,
argument:['foo','bar']
};
// Start the transaction.
//AjaxObject.startRequest();
function makeRequestReturnText(){
/* Subscribe to global listeners */
// Create a shorthand variable for YAHOO.util.Connect
var YCM = YAHOO.util.Connect;
YCM.startEvent.unsubscribeAll();
YCM.completeEvent.unsubscribeAll();
YCM.successEvent.unsubscribeAll();
YCM.failureEvent.unsubscribeAll();
YCM.abortEvent.unsubscribeAll();
YCM.startEvent.subscribe(globalEventsText.start);
YCM.completeEvent.subscribe(globalEventsText.complete);
YCM.successEvent.subscribe(globalEventsText.success);
YCM.failureEvent.subscribe(globalEventsText.failure);
YCM.abortEvent.subscribe(globalEventsText.abort);
var sUrl = "connectionCtrl.do?exec=checkUserId";
var postData = "userid=" + document.getElementById('userid').value;
var request = YAHOO.util.Connect.asyncRequest('POST', sUrl, callback, postData);
YAHOO.log("Initiating request; tId: " + request.tId + ".", "info", "example");
}
function makeRequestReturnXml(){
/* Subscribe to global listeners */
// Create a shorthand variable for YAHOO.util.Connect
var YCM = YAHOO.util.Connect;
YCM.startEvent.unsubscribeAll();
YCM.completeEvent.unsubscribeAll();
YCM.successEvent.unsubscribeAll();
YCM.failureEvent.unsubscribeAll();
YCM.abortEvent.unsubscribeAll();
YCM.startEvent.subscribe(globalEventsXml.start);
YCM.completeEvent.subscribe(globalEventsXml.complete);
YCM.successEvent.subscribe(globalEventsXml.success);
YCM.failureEvent.subscribe(globalEventsXml.failure);
YCM.abortEvent.subscribe(globalEventsXml.abort);
var sUrl = "connectionCtrl.do?exec=checkUserIdReturnXml";
var postData = "userid=" + document.getElementById('userid').value;
var request = YAHOO.util.Connect.asyncRequest('POST', sUrl, callback, postData);
YAHOO.log("Initiating request; tId: " + request.tId + ".", "info", "example");
}
YAHOO.log("As you interact with this example, relevant steps in the process will be logged here.", "info", "example");
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
其中 handleSuccess 是 Ajax 请求成功返回 response 后要执行的函数,参数为 response 对象,详细属性如下:
* o.tId
* o.status
* o.statusText
* o.getResponseHeader[ ]
* o.getAllResponseHeaders
* o.responseText
* o.responseXML
* o.argument
例子中我们还用到了 Event ,可以在 Ajax 的 start , complete , success , failure , abort 时,做不同的操作。
返回的 response 可以是普通的文本( responseText )也可以是 XML 格式( responseXML ),具体实现代码,请参照 source
Server 端主要是 ConnectionCtrl.java 文件,主要代码如下:
package com.sys.ajax.web.controller;
import java.io.PrintWriter;
import java.util.HashMap;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.context.ApplicationContextException;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.multiaction.MultiActionController;
public class ConnectionCtrl extends MultiActionController {
public ConnectionCtrl() throws ApplicationContextException {
super();
// TODO Auto-generated constructor stub
}
public ConnectionCtrl(Object arg0) throws ApplicationContextException {
super(arg0);
// TODO Auto-generated constructor stub
}
/**
* Start View.
*
* @param request
* @param response
* @return
*/
public ModelAndView start(HttpServletRequest request,
HttpServletResponse response) {
return new ModelAndView("start", new HashMap());
}
/**
*
* @param request
* @param response
* @return
*/
public ModelAndView checkUserId(HttpServletRequest request,
HttpServletResponse response) throws Exception {
System.out.println("url = " + request.getRequestURL() + "?" + request.getQueryString());
String userid = request.getParameter("userid");
System.out.println("userid = " + userid);
StringBuffer result = new StringBuffer();
if ("12345".equals(userid)) {
result.append(userid + " exists!");
} else {
result.append(userid + " don't exists!");
}
System.out.println("response = " + result);
response.setContentType("application/text");
PrintWriter pw = response.getWriter();
pw.write(result.toString());
pw.close();
return null;
}
/**
*
* @param request
* @param response
* @return
*/
public ModelAndView checkUserIdReturnXml(HttpServletRequest request,
HttpServletResponse response) throws Exception {
System.out.println("url = " + request.getRequestURL() + "?" + request.getQueryString());
String userid = request.getParameter("userid");
System.out.println("userid = " + userid);
StringBuffer result = new StringBuffer();
//result.append("<?xml version=/"1.0/" encoding=/"UTF-8/" standalone=/"yes/" ?>");
//result.append("<xml>");
result.append("<root>");
result.append("<retvalue>");
if ("12345".equals(userid)) {
result.append(userid + " exists!");
} else {
result.append(userid + " don't exists!");
}
result.append("</retvalue>");
result.append("</root>");
//result.append("</xml>");
System.out.println("response = " + result);
response.setContentType("text/xml");
PrintWriter pw = response.getWriter();
pw.write(result.toString());
pw.close();
return null;
}
}