jQuery篇——Ajax之post请求

post请求

继上篇学习完get请求之后，这次来学习一下post请求。
同get请求一样创建异步对象等五步操作，将请求方式改成post，如果要传参，则需在open和send之间加一行代码

                // var xhr = new XMLHttpRequest();
                xhr.open("POST","08-ajax-post.php",true);
                // 注意点: 以下代码必须放到open和send之间
                xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xhr.send("userName=zs&userPwd=321");

post请求的封装

即在get请求中添加type类型进行判断，其余代码相同，即可兼容两种请求的封装

function obj2str(data) {
    /*
    {
        "userName":"lnj",
        "userPwd":"123456",
        "t":"3712i9471329876498132"
    }
    */
    data = data || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象
    data.t = new Date().getTime();
    var res = [];
    for(var key in data){
        // 在URL中是不可以出现中文的, 如果出现了中文需要转码
        // 可以调用encodeURIComponent方法
        // URL中只可以出现字母/数字/下划线/ASCII码
        res.push(encodeURIComponent(key)+"="+encodeURIComponent(data[key])); // [userName=lnj, userPwd=123456];
    }
    return res.join("&"); // userName=lnj&userPwd=123456
}
function ajax(option) {
    // 0.将对象转换为字符串
    var str = obj2str(option.data); // key=value&key=value;
    // 1.创建一个异步对象
    var xmlhttp, timer;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 2.设置请求方式和请求地址
    /*
    method：请求的类型；GET 或 POST
    url：文件在服务器上的位置
    async：true（异步）或 false（同步）
    */
    if(option.type.toLowerCase() === "get"){
        xmlhttp.open(option.type, option.url+"?"+str, true);
        // 3.发送请求
        xmlhttp.send();
    }else{
        xmlhttp.open(option.type, option.url,true);
        // 注意点: 以下代码必须放到open和send之间
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send(str);
    }

    // 4.监听状态的变化
    xmlhttp.onreadystatechange = function (ev2) {
        /*
        0: 请求未初始化
        1: 服务器连接已建立
        2: 请求已接收
        3: 请求处理中
        4: 请求已完成，且响应已就绪
        */
        if(xmlhttp.readyState === 4){
            clearInterval(timer);
            // 判断是否请求成功
            if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
                xmlhttp.status === 304){
                // 5.处理返回的结果
                // console.log("接收到服务器返回的数据");
                option.success(xmlhttp);
            }else{
                // console.log("没有接收到服务器返回的数据");
                option.error(xmlhttp);
            }
        }
    }
    // 判断外界是否传入了超时时间
    if(option.timeout){
        timer = setInterval(function () {
            console.log("中断请求");
            xmlhttp.abort();
            clearInterval(timer);
        }, option.timeout);
    }
}

post封装后的调用

            oBtn.onclick = function (ev1) {
                ajax("POST", "08-ajax-post.php",{
                    "userName":"lnj",
                    "userPwd":"321"
                }, 3000, function (xhr) {
                    alert(xhr.responseText);
                }, function (xhr) {
                    alert("请求失败");
                });
            }

jQuery中Ajax封装的使用

传入一个对象，内包含了url和type，data和成功失败两个函数，引入了jQuery库之后即可直接使用

                $.ajax({
                    url: "09-ajax-jquery.php",
                    type: "get",
                    data: "userName=lnj&userPwd=654321",
                    success: function(msg){
                        alert(msg );
                    },
                    error: function (xhr) {
                        alert(xhr.status);
                    }
                });