在之前的隨筆中,本著懷舊的態度總結了一篇 兼容不同浏覽器 建立XHR對象的方法:
在建立好XHR對象之後,客戶端需要做的就是,將數據以某種方式傳遞到服務器,以獲得相應的響應,在這裡, Ajax技術總結的第二季,我將重點闡述 提交數據的兩種方式。
在這之前需要了解一下我們的HTTP傳輸協議:
HTTP 的工作方式是客戶機與服務器之間的請求-應答協議。
舉例：客戶端（浏覽器）向服務器提交 HTTP 請求；服務器向客戶端返回響應。響應包含關於請求的狀態信息以及可能被請求的內容。而想要基於HTTP協議進行數據傳輸,必然要用到兩種請求方式.
兩種 HTTP 請求方法：GET 和 POST
在客戶機和服務器之間進行請求-響應時，兩種最常被用到的方法是：GET 和 POST。
- GET - 從指定的資源請求數據。
- POST - 向指定的資源提交要被處理的數據
這是W3C上對GRT與POST的使用場景描述,從字面上來理解，就是： GET是用來從服務器獲取數據的，POST是用來向服務器傳送數據的
這一點，我們從提交路徑與數據的URL中就可以看出來：
可以用來指向URL的屬性有：
1. 表單中的 action；
2. a 標簽中的 href
3. img script 中的 src 屬性（此屬性不受“ 同源策略 ”限制，可以利用來進行“跨域”，我想近期總結一片關於跨域的問題，在這裡先挖個坑）
這裡，我們講一講form表單提交中他們的不同
一 、Ajax的表單提交中，get 使用 open（）函數來提交數據，其中，數據以 URL? key & value 的形式拼接在URL後面：
xhr.open('get','xxx.php?name=tom & age=18');
xhr.send(null);
在浏覽器的URL中是這樣的:
get 提交 URL
這裡可以看出:GET是把參數數據隊列加到提交表單的action屬性所指的URL中，值和表單內各個字段一一對應，在URL中可以看到。ID的url長度是有限制的，當url過長時會自動截取超長字符。這樣就容易引發一個問題：當傳遞的參數過多，導致url過長時，url自動截取超長字符，最終傳遞參數部分獲取不到。這也限制了GET傳送的數據大小一般不能超過2KB;
而且,從URL截圖中可以看出: GET安全性非常低，當通過GET方法提交數據時，用戶名和密碼將出現在URL上。如果：
- 登陸頁面可以被浏覽器緩存；
- 其他人可以訪問客戶的這台機器。
那麼，別人即可以從浏覽器的歷史記錄中，讀取到此客戶的賬號和密碼。所以，在某些情況下，GET方法會帶來嚴重的安全性問題。
並不是說GET方法沒有優點，在速度測試中，get提交的速度是POST方式的數十倍。
二 、Ajax的表單提交中，POST 在 open（）函數中只需要提供URL，由send（）函數提交數據:
//獲取form數據
var formDom = document.querySelector('form');
var formData = new FormData(formDom);
//發送數據
xhr.open('post',formDom.action);
xhr.send(formData);
POST是:通過HTTPPOST機制，將表單內各個字段與其內容放置在HTML HEADER內一起傳送到action屬性所指的URL地址。用戶看不到這個過程。安全性較高
POST傳送的數據量較大，一般被默認為不受限制。可以用這段demo中FormData對象的方式傳遞圖片,富文本等文件,這是get所做不到的。
總結一下，Get是向服務器發索取數據的一種請求，而Post是向服務器提交數據的一種請求，在FORM（表單）中，Method默認為"GET"，
實質上，GET和POST只是發送機制不同，並不是一個取一個發！
總之，這兩種表單提交方式並沒有優劣之分，只有不同的適應場景，這需要我們日常工作中去根據需求把握。
後面，我將總結一下，在浏覽器與服務器之間的交互中，路徑的幾種不同書寫方法。
以上所述是小編給大家介紹的Ajax 入門之 GET 與 POST 的不同處詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！