Ajax 入門(mén)之 GET 與 POST 的不同處詳解

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

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

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

HTTP 的工作方式是客戶機(jī)與服務(wù)器之間的請(qǐng)求-應(yīng)答協(xié)議。

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

兩種 HTTP 請(qǐng)求方法：GET 和 POST

在客戶機(jī)和服務(wù)器之間進(jìn)行請(qǐng)求-響應(yīng)時(shí)，兩種最常被用到的方法是：GET 和 POST。

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

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

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

  可以用來(lái)指向URL的屬性有：

1. 表單中的 action；

2. a 標(biāo)簽中的 href

3. img script 中的 src 屬性（此屬性不受“ 同源策略 ”限制，可以利用來(lái)進(jìn)行“跨域”，我想近期總結(jié)一片關(guān)于跨域的問(wèn)題，在這里先挖個(gè)坑）

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

一 、Ajax的表單提交中，get 使用 open（）函數(shù)來(lái)提交數(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ù)隊(duì)列加到提交表單的action屬性所指的URL中，值和表單內(nèi)各個(gè)字段一一對(duì)應(yīng)，在URL中可以看到。ID的url長(zhǎng)度是有限制的，當(dāng)url過(guò)長(zhǎng)時(shí)會(huì)自動(dòng)截取超長(zhǎng)字符。這樣就容易引發(fā)一個(gè)問(wèn)題：當(dāng)傳遞的參數(shù)過(guò)多，導(dǎo)致url過(guò)長(zhǎng)時(shí)，url自動(dòng)截取超長(zhǎng)字符，最終傳遞參數(shù)部分獲取不到。這也限制了GET傳送的數(shù)據(jù)大小一般不能超過(guò)2KB;

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

- 登陸頁(yè)面可以被瀏覽器緩存；
- 其他人可以訪問(wèn)客戶的這臺(tái)機(jī)器。

那么，別人即可以從瀏覽器的歷史記錄中，讀取到此客戶的賬號(hào)和密碼。所以，在某些情況下，GET方法會(huì)帶來(lái)嚴(yán)重的安全性問(wèn)題。

并不是說(shuō)GET方法沒(méi)有優(yōu)點(diǎn)，在速度測(cè)試中，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是:通過(guò)HTTPPOST機(jī)制，將表單內(nèi)各個(gè)字段與其內(nèi)容放置在HTML HEADER內(nèi)一起傳送到action屬性所指的URL地址。用戶看不到這個(gè)過(guò)程。安全性較高

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

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

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

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

后面，我將總結(jié)一下，在瀏覽器與服務(wù)器之間的交互中，路徑的幾種不同書(shū)寫(xiě)方法。

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