在Ajax中GET與POST的使用詳解
- php中世界最好的语言原創
- 2018-04-02 14:54:471497瀏覽
這次帶給大家在Ajax中GET與POST的使用詳解，在Ajax中GET與POST使用的注意事項有哪些，下面就是實戰案例，一起來看一下。
在之前的隨筆中,本著懷舊的態度總結了一篇兼容不同瀏覽器建立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只是發送機制不同，並不是一個取一個發！
總之，這兩種表單提交方式並沒有優劣之分，只有不同的適應場景，這需要我們日常工作中去根據需求把握。
後面，我將總結一下，在瀏覽器與伺服器之間的互動中，路徑的幾種不同書寫方法。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是在Ajax中GET與POST的使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！