关于纯xmlhttprequest请求服务器数据

今天我们的web技术已经相当的完善, 各种前端框架如jquery或者再深一点的工具APIcloud 的使用极大的方便了我们的开发工作.

 

今天我要分享一个纯javascript的方式来解决请求服务器数据或者异步请求数据来交互的方式.

 

因为我们的项目前端是ThunderAPP开发的android和IOS移动客户端, 使用完全封闭的APIcloud, 请求的形式都是AJAX

api.ajax({
    url : urlConstant.baseUrl + urlConstant.getUserMsgUrl + '?userId='
            + encodeURI(sellerId),
    method : 'get',
    timeout : 30,
    dataType : 'json',
    returnAll : false,
}, function(ret, err) {
    if (ret) {
        if (ret.status == 200) {
            $api.byId('userAccount').innerHTML = ret.name;
            console.log('@@##sellerAccount=' + ret.name);
        } else {
            if (ret.info == '获取用户信息失败') {
                api.alert({
                    msg : '卖家的用户名获取失败！'
                }, function(ret, err) {
                    if (ret.buttonIndex == 1) {
                        api.closeWin();
                    }
                });
            } else {
                api.alert({
                    msg : ret.info
                });
            }
        }
    } else {
        api.alert({
            msg : err.msg
        });
    }
});

 

接下来我们看一下传统的jquery封闭的ajax:

 

    $.ajax( {
        url : eval(uri).ihv_list,
        type : "post",
        dataType : "html",
        data : "page="+page+"&record="+record+"&"+params+"&orderType="+orderType+"&orderName="+orderName,
        contentType: "application/x-www-form-urlencoded; charset=UTF-8", 
        success : function(data, textStatus, jqXHR) {
            if(jqXHR.status == 0){
                alert('Unable to get the data, please check whether the network flow.');
            }else{
                $('#Searchresult').html(data);
                if(type == 1)initPagination($("#page_count").val());
            }
            
        },
        error : function(data, textStatus){
            //alert(textStatus);
            if("session timeout." == data.responseText){
                alert('session timeout.');
            }else{
                alert(data.responseText);
            }
            location.href = eval(uri).login_page;
        }
    });

以上两种封闭的代码只能和以下struts2的action交互:

    public void getGoodsById() throws IOException {
        String result = goodsService.getGoodsById(id);
        ActionContext context = ActionContext.getContext();
        HttpServletResponse response = (HttpServletResponse) context.get(ServletActionContext.HTTP_RESPONSE);
        OutputStream out = response.getOutputStream();
        out.write(result.getBytes("utf-8"));
        out.flush();
        out.close();
    }

 

然后我再提供我们的方案, 我们方案的出现是因为现在需要增加后台来管理, 这样我们的局限性在于必须接受服务器返回这种形式的结果,

我放弃了JSP这种服务器动态编译生成的网页返回的形式, 只能通过AJAX请求来完成与服务器的交互.

那么我们无非需要请求数据并且将取得的数据解析并更新到网页上去.

我们只有两个步骤:

1. 创建一个XMLHttpRequest对象, 来为各个需要调用ajax请求的地方提供一个对象可以访问服务器接口.

 

function MyXMLHttpRequest() {
    var xmlhttprequest;
    if (window.XMLHttpRequest) {
        xmlhttprequest = new XMLHttpRequest();
        if (xmlhttprequest.overrideMimeType) {
            xmlhttprequest.overrideMimeType("text/xml");
        }
    } else if (window.ActiveXObject) {
        var activeName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
        for (var i = 0; i < activeName.length; i++) {
            try {
                xmlhttprequest = new ActiveXObject(activeName[i]);
                break;
            } catch (e) {

            }
        }
    }

    if (xmlhttprequest == undefined || xmlhttprequest == null) {
        alert("XMLHttpRequest对象创建失败！！");
    } else {
        this.xmlhttp = xmlhttprequest;
    }
}

MyXMLHttpRequest.prototype = {
    send : function(method, url, data, callback, failback) {
        if (this.xmlhttp != undefined && this.xmlhttp != null) {
            method = method.toUpperCase();
            if (method != "GET" && method != "POST") {
                alert("HTTP的请求方法必须为GET或POST!!!");
                return;
            }
            if (url == null || url == undefined) {
                alert("HTTP的请求地址必须设置！");
                return;
            }
            var tempxmlhttp = this.xmlhttp;
            this.xmlhttp.onreadystatechange = function() {
                if (tempxmlhttp.readyState == 4) {
                    if (tempxmlhttp.status == 200) {
                        var responseText = tempxmlhttp.responseText;
                        var responseXML = tempxmlhttp.reponseXML;
                        if (callback == undefined || callback == null) {
                            alert("没有设置处理数据正确返回的方法");
                            alert("返回的数据：" + responseText);
                        } else {
                            callback(responseText, responseXML);
                        }
                    } else {
                        if (failback == undefined || failback == null) {
                            alert("没有设置处理数据返回失败的处理方法！");
                            alert("HTTP的响应码：" + tempxmlhttp.status
                                    + ",响应码的文本信息：" + tempxmlhttp.statusText);
                        } else {
                            failback(tempxmlhttp.status, tempxmlhttp.statusText);
                        }
                    }
                }
            }

            //解决缓存的转换  
        /*    if (url.indexOf("?") >= 0) {
                url = url + "&t=" + (new Date()).valueOf();
            } else {
                url = url + "?+=" + (new Date()).valueOf();
            }*/

            //解决跨域的问题  
            /*if (url.indexOf("http://") >= 0) {
                url.replace("?", "&");
                url = "Proxy?url=" + url;
            }*/
            this.xmlhttp.open(method, url, true);

            //如果是POST方式，需要设置请求头  
            if (method == "POST") {
                this.xmlhttp.setRequestHeader("Content-type",
                        "application/x-www-form-urlencoded");
            }
            this.xmlhttp.send(data);
            //this.xmlhttp.send(JSON.stringify(data));
        } else {
            alert("XMLHttpRequest对象创建失败，无法发送数据！");
        }
    },
    abort : function() {
        this.xmlhttp.abort();
    },
    
    test : function(){
        alert("1234");
    }
}

包含此对象文件

<script src="javascript/MyXMLHttpRequest.js" type="text/javascript"></script>

 

 

调用脚本处:

window.onload = function(){ 
    var submit = document.getElementById('loginSubmit');
    submit.onclick = function(){
        var name = document.getElementById("loginName").value;
        var pwd = document.getElementById("loginPwd").value;
        var data = "name=" + name + "&pwd=" + pwd;  //此处注意
        var request = new MyXMLHttpRequest();        
        request.send("POST", "login.do",data ,success_callback, error_callback);
    };
    
    function success_callback(responseText,responseXML){
        var obj = JSON.parse(responseText);    //返回的数据    
        switch(obj.status){
        case 200:            
            document.location.href = "index.jsp";
            break;
        default:
            alert(obj.info);
            break;
        
        }
    };
    function error_callback(status, statusText){
        alert(status + ", " + statusText);
    };
};

 

关于form表单字段上传到服务器的部分及服务器返回的数据需要特别注意.