自己动手简单封装ajax的get和post请求

前言

    每次在做项目的时候，在ajax这块，都是用的jqury框架本身封装的$.ajax,$.get,$.post等方法进行异步请求，但是还是想知道他到底是怎么进行异步请求的封装，于是自己动手封装了个最简单的get，post请求。

GET请求

    首先我们需要创建一个 XMLHttpRequest对象，XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力等。

 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

    ActiveXObject() 用于支持IE5,6浏览器

    构造好了XMLHttpRequest请求后就可以构造请求以及发送请求

 
    xhr.open('GET',url,true);//构造请求，url为请求的网址，true为是否进行异步请求
    xhr.send();//发送请求

    之后我们需要设置一个监听器来接受返回的数据

 xhr.onreadystatechange = function(){
        if( xhr.readyState == 4 && xhr.status == 200 ){
            alert(xhr.responseText);//xhr.responseText为请求所返回的内容
        }
    };

    这里通过监听返回码的变化来确定请求是否成功以及处理返回的数据

    之后只需要进行简单的封装之后，一个简单的ajax get请求就完成了，完整代码如下。

function get(url,callback){
 
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    function checkTimeout(){ 
        if(xhr.readyState !== 4){
            aborted = true;
            xhr.abort();//关闭请求
        }
    }
    setTimeout(checkTimeout,5*1000);//设置超时时间
    xhr.onreadystatechange = function(){
        if( xhr.readyState == 4 && xhr.status == 200 ){
            callback(xhr.responseText); 执行监听器方法
        }
    };
 
    xhr.open('GET',url,true);
    xhr.send();
}

    调用它其实很简单，需要设置一个方法监听器

    get('http://localhost:8087/rxd/pre/user/login',function(data){
       //执行你的操作 
    });

POST请求

    post请求和get请求差不多，区别主要的就是POST请求需要在发送的时候传递参数

xhr.send(params);

    完整代码如下：

function post(url,params,callback){
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    function checkTimeout(){
        if(xhr.readyState !== 4){
            aborted = true;
            xhr.abort();
        }
    }
    setTimeout(checkTimeout,5*1000);
    xhr.onreadystatechange = function(){
        if( xhr.readyState == 4 && xhr.status == 200 ){
            callback(xhr.responseText);
        }
    };
    xhr.open('POST',url,true);
    xhr.send(params);
}

    调用方法：

    post('http://localhost:8087/rxd/pre/user/login',{username:'asd',password:'asd'},function(data){
        alert(data);
    })

总结

    以上即是最简单的ajax的get和post封装，还有许许多多的地方没有处理，没有涉及，但是我们至少知道了平时我们是用的$.ajax,$.get,$.post是如何进行基本的网络请求的，以及自己也可以写出一个简单的ajax的gei，post请求。