簡單學習Ajax的GET & POST請求

1、Ajax簡介

我想若是使用過購物網站的話，想象一個場景，你在淘寶上看中一件物品，想加入購物車，可是呢，你點擊添加購物車後，整個頁面刷新了，你以前看的物品記錄也沒有了，這樣是否是很煩（這是由於沒有使用ajax更新數據時會請求整個頁面的數據，從新渲染）。碰到這種狀況，ajax就出場了，有了它，咱們能夠在點擊添加商品後，只更新購物車中的物品數量就能夠了，根本就不須要更新整個頁面，用官方一點的話來講，就是能夠控制網頁的局部刷新。

2、Ajax的GET & POST請求實現過程

Ⅰ、GET請求實現過程

一、建立一個異步對象

const xmlhttp = new XMLHttpRequest();
複製代碼

二、設置請求方式和請求地址

xmlhttp.open(type,url,true);
複製代碼

三、發送請求

xmlhttp.send();
複製代碼

四、監聽狀態的變化

xmlhttp.onreadystatechange = function (){
    if (xmlhttp.readyState === 4) {
        //處理返回的結果
    }
}
複製代碼

五、處理返回的結果

if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
    console.log(xmlhttp.responseText);
} else {
    console.log("沒有接收到服務器返回的數據");
}
複製代碼

Ⅱ、Ajax的POST請求實現過程

一、建立一個異步對象

//一、建立一個異步對象
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
複製代碼

二、設置請求方式和請求地址

//二、設置請求方式和請求地址
// 注意：在post方式中url後面不能加參數
xmlhttp.open("POST", "ajax-post.php", true);
複製代碼

三、添加參數*和發送請求

//三、添加參數
//若是須要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。
//而後在 send() 方法中規定您但願發送的數據：
//此方法必須在open() 方法和 send() 之間調用
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("userName=ljm&userPwd=123456");
複製代碼

四、監聽狀態的變化

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState === 4) {
        //code...
    }
}
複製代碼

五、處理返回的結果

if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
    console.log(xmlhttp.responseText);
} 
else {
    console.log("沒有接收到服務器返回的數據");
}
複製代碼

3、實例

Ⅰ、Ajax的GET請求方式過程的代碼實現

//一、建立一個異步對象
//檢查瀏覽器是否支持 XMLHttpRequest 對象
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//二、設置請求方式和請求地址
//解決IE緩存：在IE瀏覽器中若是經過Ajax發送起GET請求，那麼IE瀏覽器認爲同一個URL只有一個結果
xmlhttp.open("GET","ajax-get.txt?t=" + Math.random(),true);
//三、發送請求
xmlhttp.send();
//四、監聽狀態的變化
xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState === 4) {
        if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
            console.log(xmlhttp.responseText);
        } else {
            console.log("沒有接收到服務器返回的數據");
        }
    }
}
複製代碼

Ⅱ、Ajax的POST請求方式過程的代碼實現

if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

// 在post方式中url後面不能加參數
xmlhttp.open("POST", "ajax-post.php", true);

//若是須要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。
//而後在 send() 方法中規定您但願發送的數據：
//setRequestHeader方法必須在 open() 方法和 send() 之間調用
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("userName=ljm&userPwd=123456");

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState === 4) {
        if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304){
            console.log(xmlhttp.responseText);
        } else {
            console.log("沒有接收到服務器返回的數據");
        }
    }
}
複製代碼

4、XmlHttpRequest對象的方法和屬性

一、方法：

• abort(): 取消如今的鏈接，能夠將XmlHttpRequest對象的狀態值重置爲0
• open(): 初始化http的請求參數，可是不發送請求
• send(): 發送http請求
• setRequestHeader()：給一個打開可是未發送的請求設置參數

二、屬性：

• onreadystateChange: 狀態改變觸發的回調函數
• reposeText: 從服務器返回數據的字符串格式
• reposeXML: 從服務器返回兼容DOM的文檔數據對象
• status: 從服務器返回的狀態碼
• statusText: 伴隨狀態碼返回的信息，如status=200時，statusText=’OK’
• readyState: 對象狀態值
  • 0表示XmlHttpRequest對象已建立或者已經被abort()方法重置
  • 1表示對象已經初始化，可是請求還未發送（調用了open()方法，send()方法尚未調用）
  • 2表示請求已經發送，沒有接收到響應信息（sed()方法已經被調用）
  • 3表示已經接收到了全部的響應頭，響應體開始接收但未完成
  • 4表示響應信息已經所有接收

5、問題

Ⅰ、http狀態碼（status）和對象的狀態值(readyState)有什麼區別？

http狀態碼是指服務器接收到請求後返回的一個狀態碼，而對象的狀態值，是針對XmlHttpRequest對象的

Ⅱ、GRT請求和POST請求的不一樣

1. 發送的數據數量 在 GET 中，只能發送有限數量的數據，由於數據是在 URL 中發送的。 在 POST 中，能夠發送大量的數據，由於數據是在正文主體中發送的。
2. 安全性 GET 請求發送的數據不受保護，由於數據在 URL 欄中公開，這增長了漏洞和黑客攻擊的風險。 POST 請求發送的數據是安全的，由於數據未在URL欄中公開，還能夠在其中使用多種編碼技術，這使其有彈性。
3. 加入書籤中 GET 查詢的結果能夠加入書籤中，由於它以 URL 的形式存在；而 POST 查詢的結果沒法加入書籤中。
4. 編碼 在表單中使用 GET 請求時，數據類型中只接受 ASCII 字符。 在表單提交時，POST 請求不綁定表單數據類型，並容許二進制和 ASCII 字符。
5. 可變大小 GET 請求中的可變大小約爲 2000 個字符。 POST 請求最多容許 8 Mb 的可變大小。
6. 緩存 GET 請求的數據是可緩存的，而 POST 請求的數據是沒法緩存的。
7. 主要做用 GET 請求主要用於獲取信息。而 POST 方法主要用於更新數據。 ##Ⅲ、什麼是同步方式與異步方式？

一、同步方式發送請求

發送一個請求，須要等待響應返回，而後纔可以發送下一個請求，若是該請求沒有響應，不能發送下一個請求，客戶端會處於一直等待過程當中。 同步請求：客戶端提交請求->等待服務器處理->處理完畢返回 這個期間客戶端瀏覽器不能幹任何事

舉個例子: 例如中午食堂吃飯: 同步就是男生請女生去吃飯，女生一開始是拒絕和你吃飯；你就不停的邀請她…一直等待…連菜都不敢點，直到對方贊成..，才一塊兒去吃飯,期間不能離開. 上述場景: 適用於準情侶或者情侶!

二、異步方式發送請求

發送一個請求，不須要等待響應返回，隨時能夠再發送下一個請求，即不須要等待。 異步: 客戶端請求經過事件觸發->服務器處理（此時瀏覽器仍然能夠做其餘事情）->服務器處理完畢,異步的給予瀏覽器響應。

直白的說吧: 異步就是老公叫老婆吃飯，此時老婆可能在忙,那麼老公此時可能沒等老婆回覆,就開始下單,點菜…等老婆回覆時,此時菜飯已經點好了，開吃吧。 上述場景:適用於老夫老妻.

6、總結

一、能夠看出，所謂的Ajax就是發起一個http請求。 二、使用JavaScript在指定的位置，顯示響應數據，從而局部修改頁面的數據，達到局部刷新目的 三、服務器響應數據給ajax引擎AJAX引擎得到服務器響應的數據，經過執行JavaScript的回調函數將數據更新到瀏覽器頁面具體位置。