ajax XMLHttpRequest post get

本文介绍了一种在JavaScript中处理AJAX请求的方法,特别关注如何正确处理中文参数以避免乱码问题。文中提供了使用GET和POST方法发送带有中文的数据的具体实现,并说明了不同情况下编码与解码的重要性。

/*在有中文参数时,接收方需要使用UTF-8方式对数据进行解码
*不支持post附件
*/

function getXmlHttpRequest() {
    var xmlHttpRequest = null;
    try {
        xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e1) {
        try {
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e2) {
            xmlHttpRequest = null;
        }
    }
    if (xmlHttpRequest == null && typeof(XMLHttpRequest) != 'undefined') {
        xmlHttpRequest = new XMLHttpRequest();
    }
    return xmlHttpRequest;
}

/*使用post方式发送数据
*url:submit路径
*arguments:参数,如name=jese&sex=womanz,中文数据时使用'name='+getEncodeURIComponent('李四')+'&sex='+getEncodeURIComponent('男')进行编码
*synchFlag:同步标记,false为同步方式,true为异步方式
*returnType:返回内容类型0=responseBody;1=responseStream;2=responseText;3=responseXML
*execute:为异步方式提交后的回调函数,此函数用于处理返回数据,格式为function (obj){},obj为返回内容
*/

function postData(url, arguments, synchFlag, returnType, execute) {
    var xmlHttpRequest = getXmlHttpRequest();
    if (xmlHttpRequest == null) return false;
    xmlHttpRequest.open("POST", url, synchFlag);
    xmlHttpRequest.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded");
    xmlHttpRequest.setRequestHeader("Content-Length", arguments.length);
    if (synchFlag) {
        xmlHttpRequest.onreadystatechange = function() {
            if (xmlHttpRequest.readyState == 4) {
                switch (returnType) {
                    case 0: execute(xmlHttpRequest.responseBody); break;
                    case 1: execute(xmlHttpRequest.responseStream); break;
                    case 2: execute(xmlHttpRequest.responseText); break;
                    case 3: execute(xmlHttpRequest.responseXML); break;
                    default: alert("error");
                }
            }
        }
    }
    xmlHttpRequest.send(arguments);
    if (!synchFlag) {
        switch (returnType) {
            case 0: return xmlHttpRequest.responseBody; break;
            case 1: return xmlHttpRequest.responseStream; break;
            case 2: return xmlHttpRequest.responseText; break;
            case 3: return xmlHttpRequest.responseXML; break;
            default: return false;
        }
    }
}

/*
*使用get方式发送数据
*url:submit路径
*arguments:参数,如name=jese&sex=男,中文数据部需要进行编码
*synchFlag:同步标记,false为同步方式,true为异步方式
*returnType:返回内容类型0=responseBody;1=responseStream;2=responseText;3=responseXML
*execute:为异步方式提交后的回调函数,此函数用于处理返回数据,格式为function (obj){},obj为返回内容
*/

function getData(url, arguments, synchFlag, returnType, execute) {
    var xmlHttpRequest = getXmlHttpRequest();
    if (xmlHttpRequest == null) return false;
    xmlHttpRequest.open("GET", url + "?" + arguments, synchFlag);
    if (synchFlag) {
        xmlHttpRequest.onreadystatechange = function() {
            if (xmlHttpRequest.readyState == 4) {
                switch (returnType) {
                    case 0: execute(xmlHttpRequest.responseBody); break;
                    case 1: execute(xmlHttpRequest.responseStream); break;
                    case 2: execute(xmlHttpRequest.responseText); break;
                    case 3: execute(xmlHttpRequest.responseXML); break;
                    default: alert("error");
                }
            }
        }
    }
    xmlHttpRequest.send();
    if (!synchFlag) {
        switch (returnType) {
            case 0: return xmlHttpRequest.responseBody; break;
            case 1: return xmlHttpRequest.responseStream; break;
            case 2: return xmlHttpRequest.responseText; break;
            case 3: return xmlHttpRequest.responseXML; break;
            default: return false;
        }
    }
}

/*
*post中文数据时使用,get时不需要使用
*/
function getEncodeURIComponent(arguments) {
    return encodeURIComponent(arguments);
}

 

/*
*使用例子
*alert(postData('t.jsp','name='+getEncodeURIComponent('深深深'),false,2,null));
*alert(getData('t.jsp','name=大大的',false,2,null));
*postData('t.jsp','name='+getEncodeURIComponent('深深深'),true,2,function (obj){alert(obj);});
*getData('t.jsp','name=大大的',true,2,function (obj){alert(obj);});
*/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值