如何使所有服务共用一个xmlHttpRequest对象发送请求

如何使所有服务共用一个xmlHttpRequest对象发送请求

---

最近用原生js、jsp、Servlet写了一个简单的管理系统，为了实现动态修改页面，使用了很多xmlHttpRequest的请求，在每个jsp页面对应的js文件中都写了一套请求的代码。
我觉得很冗余，于是尝试着重构了一下，把这部分代码都重构到了公用的common.js中。

首先，先给出一个xmlHttpRequest需要的代码（js方面）

var xmlHttp,responseText;
//初始化XMLHTTPRequest对象
function createXMLHttpRequest(){
    if(window.ActiveXObject){
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest()){
        xmlHttp = new XMLHttpRequest();
    }
}
//触发动态修改事件时调用这个方法
function verify(){
    createXMLHttpRequest();

    try{
        //绑定xmlHttp监测事件方法为handleStateChange
        xmlHttp.onreadystatechange = handleStateChange;
        //此处给出了get方法的写法，post方法有所不同，这里不赘述。
        xmlHttp.open("get","servlet服务地址",true);
        xmlHttp.send(null);
    }catch(exception){
        alert("您要访问的资源不存在");
    }
}

//这里是xmlHttp的监测事件方法
function handleStateChange(){
    //监测是否成功收到回复
    if(xmlHttp.readyState == 4){
        if(xmlHttp.status == 200 || xmlHttp.status == 0){
            //接收servlet发回的报文
            responseText = xmlHttp.responseText;
            /*
             *此处写根据报文采取的不同操作
             */
        }
    }
}

其中不难看到，整个流程有两个地方是根据不同的请求而各异的，一个是请求的servlet地址和参数，另一个则是收回报文之后的操作。
第一个很好解决，只要在访问verify方法的时候传入参数即可，但是第二个就不好办了，因为这个具体的操作方法不在verify方法中调用。
如果我们把不同服务所需要的方法提取出来，那么handleStateChange就需要传入这个方法的引用，如下：

function handleStateChange(fun){
    //监测是否成功收到回复
    if(xmlHttp.readyState == 4){
        if(xmlHttp.status == 200 || xmlHttp.status == 0){
            //接收servlet发回的报文
            responseText = xmlHttp.responseText;
            fun(responseText);
        }
    }
}
function myFun1(responseText){
    //这里写不同服务的操作
}
function myFun2(responseText){
    //这里写不同服务的操作
}

如果这样写了，在绑定xmlHTTPRequest对象的onreadystatechange的时候无法将fun这个参数指定，也就无法在handleStateChange函数执行的时候获取fun的引用了。

为了解决这个问题，我使用了一种巧妙的方法，就是在verify方法中将fun的引用赋值给xmlHTTPRequest对象的属性，然后在handleStateChange函数执行时再把这个属性取出来，这样就实现了传参。具体的代码如下：

/*
 *触发动态修改事件时调用这个方法
 *url：servlet服务的地址
 *handleFun：各个服务收到报文后调用的不同方法的引用
 */
function verify(url,handleFun){
    createXMLHttpRequest();

    try{
        //在xmlHTTPRequest对象中新增一个属性handle，赋值为handleFun方法的引用
        xmlHttp.handle=handleFun;
        //绑定xmlHttp监测事件方法为
        handleStateChange
        xmlHttp.onreadystatechange = handleStateChange;
        //此处给出了get方法的写法，post方法有所不同，这里不赘述。
        xmlHttp.open("get","servlet服务地址",true);
        xmlHttp.send(null);
    }catch(exception){
        alert("您要访问的资源不存在");
    }
}

//这里是xmlHttp的监测事件方法
function handleStateChange(){
    //监测是否成功收到回复
    if(xmlHttp.readyState == 4){
        if(xmlHttp.status == 200 || xmlHttp.status == 0){
            //接收servlet发回的报文
            responseText = xmlHttp.responseText;
            //将存进xmlHTTPRequest对象中的handle函数取出来使用。
            xmlHttp.handle(responseText);
        }
    }
}

使用以上的方法时，只需要在调用verify函数时将两个参数传入即可，例如：

function myHandleFun(responseText){
    if(responseText == "true"){
        //提交表单
        $("#form").sumbit();
    }else{
        alert("验证失败");
    }
}

$("#login").onclick = function(){
    var username = $("#username").val();
    var password = $("password").val();
    verify("check?username="+username+"&password="+password,myHandleFun);
}

这样就实现了公用的xmlHTTPRequest操作，不用再在每一个js中都写一遍了。

---