1. 程式人生 > >深入理解AJAX系列第二篇--GET請求和POST請求的區別

深入理解AJAX系列第二篇--GET請求和POST請求的區別

我們在使用Ajax時,當我們向伺服器傳送資料時,我們可以採用Get方式請求伺服器,也可以使用Post方式請求伺服器.那麼,Get請求和Post請求的區別到底在哪呢?
GET請求
get是最常見的請求,最常用於向伺服器查詢某些資訊。必要時,可以將查詢字串引數追加到URL的末尾,以便將資訊傳送給伺服器,對XHR而言,位於傳入open( )方法的URL末尾的查詢字串必須經過正確的編碼才行,即查詢字串的每個引數的名稱和值都 必須使用encodeURIComponent()進行編碼,然後才能放到URL的末尾,而且所有的名-值對都必須由&號分隔;

xhr.open( "get", "example.php?name1=value1&name2=value2"
,true );

下面這個函式整可以輔助向現有URL的末尾新增查詢字串引數:

function addURLParam(){
    url += ( url.indexOf("?") == -1 ? "?" : "&" );
    url += encodeURLComponent(name) + "=" + encodeURLComponent( value );
    return url;
}

POST請求
使用頻率僅次於GET的是POST請求,通常用於向伺服器傳送應該被儲存的資料。
POST請求應該把資料作為請求的主體提交,其請求的主體可以包含非常多的資料,而且格式不限。
POST請求必須設定Content-Type值為application/x-form-www-urlencoded;如果不設定Content-Type 頭部資訊,那麼傳送給伺服器的的資料就不會出現在$_POST超全域性變數中。
傳送請求時POST請求在使用send方法時,需賦予其引數;
Get請求和Post請求的區別


(1)使用Get請求時,引數在URL中顯示,而使用Post請求,則不會顯示出來;
(2)Post傳輸的資料量大,可以達到2M,而Get方法由於受到URL長度的限制,只能傳遞大約1024位元組.
(3)Get請求請求需注意快取問題,Post請求不需擔心這個問題;
(4)Post請求必須設定Content-Type值為application/x-form-www-urlencoded;
(5)傳送請求時,因為Get請求的引數都在url裡,所以send函式傳送的引數為null,而Post請求在使用send方法時,卻需賦予其引數;
(6)GET方式請求的資料會被瀏覽器快取起來,因此其他人就可以從瀏覽器的歷史記錄中讀取到這些資料,例如賬號和密碼等。在某種情況下,GET方式會帶來嚴重的安全問題。而POST方式相對來說就可以避免這些問題。
下面用程式碼來說明兩者的區別

get請求

function getMethod(){

    var xhr = new createXHR();

    var userName = document.getElementById("userName").value;
    var age = document.getElementById("age").value;

    //新增引數,以求每次訪問不同的url,以避免快取問題
    xhr.open( "get", "example.php?userName=" + encodeURTComponent( userName ) + "&age=" + encodeURTComponent( age ) + "&random=" + Math.random(), true );

    xhr.onreadystatechange = function(){

        if( xhr.readyState == 4 && xhr.status == 200 ){

            document.getElementById("result").innerHTML = xhr.responseText;
        }
    }

    //傳送請求,引數為null
    xhr.send( null );
}

GET請求

function postMethod(){

    var xhr = new createXHR();

    var userName = document.getElementById("userName").value;
    var age = document.getElementById("age").value;
    var data = "userName=" + encodeURTComponent( userName ) + "&age=" + encodeURTComponent( age );

    //不用擔心快取問題
    xhr.open( "post", "example.php", true );

    //必須設定,否則伺服器端收不到引數
    xhr.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );

    xhr.onreadystatechange = function(){

        if( xhr.readyState = 4 && xhr.status == 200 ){
            document.getElementById("result").innerHTML = xhr.responseText;
        }
    }

    //傳送請求,要data資料
    xhr.send( data );

}