在之前的隨筆中,本著懷舊的態(tài)度總結了一篇 兼容不同瀏覽器 建立XHR對象的方法:

  在建立好XHR對象之后,客戶端需要做的就是,將數(shù)據(jù)以某種方式傳遞到服務器,以獲得相應的響應,在這里,  Ajax技術總結的第二季,我將重點闡述 提交數(shù)據(jù)的兩種方式。

  在這之前需要了解一下我們的HTTP傳輸協(xié)議:

HTTP 的工作方式是客戶機與服務器之間的請求-應答協(xié)議。

舉例：客戶端（瀏覽器）向服務器提交 HTTP 請求；服務器向客戶端返回響應。響應包含關于請求的狀態(tài)信息以及可能被請求的內(nèi)容。而想要基于HTTP協(xié)議進行數(shù)據(jù)傳輸,必然要用到兩種請求方式.

兩種 HTTP 請求方法：GET 和 POST

在客戶機和服務器之間進行請求-響應時，兩種最常被用到的方法是：GET 和 POST。

• GET - 從指定的資源請求數(shù)據(jù)。
• POST - 向指定的資源提交要被處理的數(shù)據(jù)

  這是W3C上對GRT與POST的使用場景描述,從字面上來理解，就是： GET是用來從服務器獲取數(shù)據(jù)的，POST是用來向服務器傳送數(shù)據(jù)的

這一點，我們從提交路徑與數(shù)據(jù)的URL中就可以看出來：

  可以用來指向URL的屬性有：

1. 表單中的 action；

2. a 標簽中的 href

3. img script 中的 src 屬性（此屬性不受“ 同源策略 ”限制，可以利用來進行“跨域”，我想近期總結一片關于跨域的問題，在這里先挖個坑）

  這里，我們講一講form表單提交中他們的不同

一 、Ajax的表單提交中，get 使用 open（）函數(shù)來提交數(shù)據(jù)，其中，數(shù)據(jù)以 URL? key & value 的形式拼接在URL后面：

xhr.open('get','xxx.php?name=tom & age=18');
xhr.send(null);

  在瀏覽器的URL中是這樣的:

get 提交 URL

這里可以看出:GET是把參數(shù)數(shù)據(jù)隊列加到提交表單的action屬性所指的URL中，值和表單內(nèi)各個字段一一對應，在URL中可以看到。ID的url長度是有限制的，當url過長時會自動截取超長字符。這樣就容易引發(fā)一個問題：當傳遞的參數(shù)過多，導致url過長時，url自動截取超長字符，最終傳遞參數(shù)部分獲取不到。這也限制了GET傳送的數(shù)據(jù)大小一般不能超過2KB;

  而且,從URL截圖中可以看出: GET安全性非常低，當通過GET方法提交數(shù)據(jù)時，用戶名和密碼將出現(xiàn)在URL上。如果：

- 登陸頁面可以被瀏覽器緩存；
- 其他人可以訪問客戶的這臺機器。

那么，別人即可以從瀏覽器的歷史記錄中，讀取到此客戶的賬號和密碼。所以，在某些情況下，GET方法會帶來嚴重的安全性問題。

并不是說GET方法沒有優(yōu)點，在速度測試中，get提交的速度是POST方式的數(shù)十倍。

二 、Ajax的表單提交中，POST 在 open（）函數(shù)中只需要提供URL，由send（）函數(shù)提交數(shù)據(jù):　　

//獲取form數(shù)據(jù)
var formDom = document.querySelector('form');
var formData = new FormData(formDom);
//發(fā)送數(shù)據(jù)
xhr.open('post',formDom.action);
xhr.send(formData);

POST是:通過HTTPPOST機制，將表單內(nèi)各個字段與其內(nèi)容放置在HTML HEADER內(nèi)一起傳送到action屬性所指的URL地址。用戶看不到這個過程。安全性較高

 POST傳送的數(shù)據(jù)量較大，一般被默認為不受限制?？梢杂眠@段demo中FormData對象的方式傳遞圖片,富文本等文件,這是get所做不到的。

總結一下，Get是向服務器發(fā)索取數(shù)據(jù)的一種請求，而Post是向服務器提交數(shù)據(jù)的一種請求，在FORM（表單）中，Method默認為"GET"，

實質(zhì)上，GET和POST只是發(fā)送機制不同，并不是一個取一個發(fā)！

總之，這兩種表單提交方式并沒有優(yōu)劣之分，只有不同的適應場景，這需要我們?nèi)粘９ぷ髦腥ジ鶕?jù)需求把握。

后面，我將總結一下，在瀏覽器與服務器之間的交互中，路徑的幾種不同書寫方法。

以上所述是小編給大家介紹的Ajax 入門之 GET 與 POST 的不同處詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論