DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX基礎知識 >> Ajax 入門之 GET 與 POST 的不同處詳解
Ajax 入門之 GET 與 POST 的不同處詳解
編輯:AJAX基礎知識     

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved