本身動手簡單封裝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請求。