前言

经过上文的了解，我们已经了解了AJAX，并且封装了GET请求。那么POST请求是不是也得完善上去呢？

本节来看AJAX的POST请求

POST请求

其实与GET相类似，但凡我们要发送一个AJAX请求，都需要做5步操作：

AJAX五部曲

1. 创建一个异步对象xmlhttp；

new XMLHttpRequest(); 
new ActiveXObject("Microsoft.XMLHTTP"); 

2. 设置请求方式和请求地址；

xmlhttp.open("POST","01-ajax-get.php",true);

3. 发送请求；

xmlhttp.send();

4. 监听状态的变化； 通过onreadystatechange 事件来监听发送的状态变化，readyState状态为4时，请求结束。

5. 处理返回的结果； 通过status来判断请求是否是成功,处理返回的结果

特别注意的是：如果需要像 HTML 表单那样 POST 数据，请使用setRequestHeader()来添加 HTTP 头。然后在send()方法中规定您希望发送的数据：

xmlhttp.open("POST","ajax_test.html",true); 
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
xmlhttp.send("fname=Henry&lname=Ford");

所以完善一下之前封装好的ajax代码： 即添加一个请求的类型参数type

function ajax(type,url,obj,timeout,success,error){
    //  0.将对象转换成字符串
    var str = objToString(obj); 

    //  1.创建一个异步对象xmlhttp；
    var xmlhttp,timer; 
    if (window.XMLHttpRequest){
      xmlhttp=new XMLHttpRequest(); 
    } else{// code for IE6, IE5 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    }

    //  2.设置请求方式和请求地址； 
    // 判断请求的类型是POST还是GET
    if (type === 'GET') {
            xmlhttp.open(type,url+"?t=" +str,true);
    //  3.发送请求；
        xmlhttp.send();
    }else{
                    xmlhttp.open(type,url,true);
                    // 注意：在post请求中，必须在open和send之间添加HTTP请求头：setRequestHeader(header,value);
                    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
            //  3.发送请求；
                    xmlhttp.send(str);

    }   

    //  4.监听状态的变化；
    xmlhttp.onreadystatechange = function(){
            clearInterval(timer);
        if (xmlhttp.readyState === 4) {
            if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status == 304) {
                //  5.处理返回的结果；
                success(xmlhttp);//成功后回调；
            }else{
                error(xmlhttp);//失败后回调；
            }                   
        }
    }
    }

    //处理obj 
    function objToString(obj){
      obj.t = new Date().getTime();
      var res =[];
      for(var key in obj){
            //需要将key和value转成非中文的形式，因为url不能有中文。使用encodeURIComponent();
        res.push(encodeURIConponent(key) + " = " +encodeURIConponent(obj.[key]));
      }
      return res.join("&");
    }

    //判断外界是否传入了超时时间
    if(timeout){
            timer = setInterval(function(){
                    xmlhttp.abort();//中断请求
                    clearInterval(timer);
            },timeout);
    }
}

于是我们就封装好的POST请求

END

以上就是本文的所有内容

如有问题欢迎留言评论~