YUI学习笔记（三）------Connection Manager

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;

    }

}