本身动手简单封装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请求。