关于纯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表单字段上传到服务器的部分及服务器返回的数据需要特别注意.

时间: 2024-09-28 20:51:43

关于纯xmlhttprequest请求服务器数据的相关文章

Ajax在jQuery中的应用(加载异步数据、请求服务器数据)

加载异步数据 jQuery中的load()方法 load(url,[data],[callback]) url:被加载的页面地址 [data]:可选项表示发送到服务器的数据,其格式为 key/value . [callback]:可选项表示加载成功后,返回至加载页的回调函数. 全局函数 getJSON() $.getJSON(url,[data],[callback]) <div class="container col-lg-12"> <div style=&quo

ajax在jQuery中的应用 (2)请求服务器数据

使用ajax()方法加载服务器数据

使用ajax()方法加载服务器数据 使用ajax()方法是最底层.功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值,它的调用格式如下: jQuery.ajax([settings])或$.ajax([settings]) 其中参数settings为发送ajax请求时的配置对象,在该对象中,url表示服务器请求的路径,data为请求时传递的数据,dataType为服务器返回的数据类型,success为请求成功的执行的回调函数,type为发送数据请求的

android客户端请求不到服务器数据

============问题描述============ 报错代码行 String url = "http://192.168.1.121:9090/shunfengche/requestMes?pageSize=" + pageSize + "&currentPageNumber=" + currentPageNumber; HttpClient client = new DefaultHttpClient(); HttpGet get = new Htt

使用getJSON()异步请求服务器返回json格式数据

我们可以使用jquery的getJSON()方法请求服务器返回json格式数据: js代码: function test(){ $.getJSON("JsonServlet",function(result){ alert(result.name); }); } 服务器端servlet响应: @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletEx

Android(java)学习笔记210:采用post请求提交数据到服务器

1.POST请求:  数据是以流的方式写给服务器 优点:(1)比较安全 (2)长度不限制 缺点:编写代码比较麻烦   2.我们首先在电脑模拟下POST请求访问服务器的场景: 我们修改之前编写的login.jsp代码,如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%@ page language="java"

ICE学习第四步-----客户端请求服务器返回数据

这次我们来做一个例子,流程很简单:客户端向服务器发送一条指令,服务端接收到这条指令之后,向客户端发送数据库中查询到的数据,最终显示在DataGridView上. 根据上一篇文章介绍的Slice语法,我们先来定义ICE文件.我定义两个ICE文件,一个用来描述测试数据库表中属性相关信息,另一个则是请求数据的方法. 结构如下:    定义结构体,和数据库中表的列对应,添加序列(相当于数组类型). 在获取表的方法中注意要记得#include带有结构的ice文件,并把接口函数的返回值类型写成之前定义的数组

iOS服务器数据请求&quot;汉字编码&quot;问题

下面记录一下数据请求问题: 1.不知道大家有木有遇到过,当数据请求的URL带有汉字的时候,请求数据肯定会报404错误,也就是参数或者是接口URL错误<虽然说404,500等错误一般都是服务器问题,可是......想说的是:大部分使我们请求参数或者URL问题哟!!! > 这时候你就要检查自己的请求参数和地址是不是有错哟! 2.当数据请求中带有汉字的时候,一般是要转成UTF8编码,才能进行数据请求的. NSString *searchStr1 = [searchStr stringByAdding

本地主机作服务器解决AJAX跨域请求访问数据的方法

近几天学到ajax,想测试一下ajax样例,由于之前在阿里租用的服务器过期了,于是想着让本地主机既做服务器又做客户端,只是简单地测试,应该还行. 于是,下载了xampp,下载网址http://www.apachefriends.org ,只需要解压傻瓜式地安装就可以. 找到安装软件的目录,点击xampp-control.exe然后启动Apache服务, 打开浏览器,在地址栏输入localhost,出现如下图片,说明安装启动都没问题 现在编写两个简单的文本,一个txt文件,一个html代码: 截图