在之前的隨筆中,本著懷舊的態度總結了一篇 兼容不同瀏覽器 建立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 的不同處詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！