B/S架構下Web數據提交與獲取原理分析

表單的輸入元素可以有Text、select、checkbox、button等。

表單還可以包含option、fieldset、密碼域和上傳域等元素。

表單將表單內數據提交上傳至Web服務器，獲取Web服務器的內容并形成瀏覽器表單。

Form表單有以下附加屬性：

action URL：表單發送信息的地址，可以為內部網址，可以為服務器目錄地址，也可以為外部網址。

accept-charset：處理提交的表單使用何種字符集。

autocomplete on、off：是否打開表單的自動填寫功能。

enctype ：表單的編碼格式。（如果需要傳輸文件，不能使用默認設置。）

method get、post：發送表單數據HTTP的請求方法等。

其中action屬性及method屬性為數據提交傳輸的重點屬性，action中的URL地址就是服務器端接收form的地址，method通俗講，即為兩種HTTP傳輸數據的方法，分別為post和get[3]。

以下代碼為表單post提交示例：

2.1.2 Form模式下數據傳輸原理

Form表單提交模式下action屬性即為數據向后臺提交的地址，此地址可以為一個公網或者內網網址，即form action=http://currentPage.xxx（公網網址）或form action=http://localhost:8080/user（內網網址）；也可以為服務器內部的具體地址，即form action="/goods/selGoods"。在這3個地址里，可通過前臺和后臺程序改寫某一個具體的文本文件或其他文件內容。如果表單提交是查詢或者搜索，并且內容不含保密數據，可以使用GET，因為使用GET時，表單提交的數據在URL中是明文；如果表單內容是需要保密的數據，那么就需要使用POST，因為POST提交的數據在URL是不可見的。

2.2 Ajax方式提交

2.2.1 Ajax意義

Ajax即Asynchronous JavaScript and XML的縮寫（中文意思為異步的JavaScript和XML）。Ajax并不是編程語言，而是一種網頁交互數據和更新顯示的方法，不需要重新加載整個網頁就可以與服務器交換數據并更新部分網頁的內容。使用表單模式提交數據后需要刷新整個網頁，而使用Ajax向服務器提交數據后不需要刷新網頁，網頁的特定部分內容就可以更新。

2.2.2 Ajax提交數據方法

Ajax主要通過使用JavaScript操作文檔對象模型（Document Object Model，DOM）來執行；使用XSLT和XML操作數據；使用XMLHttpRequest對象或Fetch API與網頁服務器進行異步數據交換。Ajax工作原理如圖3所示：

圖3 Ajax工作原理

Ajax主要是聯合使用XMLHttpRequest 對象、JavaScript/DOM、CSS、XML四者分別得到與服務器異步的交換數據[4]；通過信息顯示/交互、數據定義樣式等方式作為交換數據的格式來實現異步的數據與服務器的交換。

Ajax核 心：XMLHttpRequestXMLHttpRequest對象是Ajax中最重要的一個對象[5]。XMLHttpRequest傳統的Web前后臺的數據傳輸原理為，瀏覽器直接訪問服務器的Web后臺服務程序來獲取數據。Web后臺服務程序通過轉發把數據發送給瀏覽器。當我們使用Ajax之后，瀏覽器會先把HTTP請求發送到XMLHttpRequest對象之中，XMLHttpRequest對象對HTTP請求進行封裝，然后再發送給Web服務器。Web服務器的應答方式不是轉發而是以流的方式把數據回傳給瀏覽器XMLHttpRequest異步對象，并且XMLHttpRequest對象會不斷監聽服務器狀態的變化，將得到服務器返回的數據寫到瀏覽器指定位置上。因為不是轉發的方式，所以不刷新就能夠獲取服務器端的數據。

創建獲取Ajax對象的方法及發送接收數據的方法：

判斷服務器是否成功響應if(ajax.status==200){//說明服務器的響應是正確的

var time=ajax.responseText;

//要將這個數據直接賦值給一個一個標簽

Get方法數據傳輸（放到URL后面）ajax.open("GET","${pageContext.request.contextPath}/dates.acti on?userName=qianyu&password=123");

Post方式發送數據或獲得數據，設置ajax請求的方法：

ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

//發送數據

ajax.send("userName=qianyu&password=123");

以上即為完整的創建獲取Ajax對象的方法以及發送接收數據方法，其主要核心即為XMLHttpRequestXMLHttpRequest對象。

2.2.3 Ajax請求和Form表單的區別

Ajax在提交或者接收服務器端數據時是異步進行的，原網頁不需要整體刷新；

Form在提交或者接收服務器端數據時是同步進行的，原網頁需要整體刷新；

Ajax在提交時，是保留本網頁，然后直接向Web服務器后臺程序新建一個請求；

Form需要刷新原網頁，而后再請求；

Ajax必須要使用JavaScript實現，必須使用支持JavaScript的瀏覽器；

Form是所有瀏覽器都能夠支持的，不需要支持JavaScript；

Ajax在請求、提交、接收時，需要特殊的服務器后臺程序對數據進行處理；

Form提交時，不需要專用的服務器后臺程序；

2.2.4 Ajax模式下數據傳輸原理

基于原生JS實現Ajax

創建一個Ajax對象

let xhr=new XMLHttpRequest();

//不兼容IE6及更低版本瀏覽器 (用 IE6：ActiveXObject)

打開請求地址（可以理解為一些基礎配置，但是并沒有發送請求）

xhr.open([method],[url],[async],[username],[user password]) （后邊兩參數一般不用）

//監視Ajax狀態，及時得到響應信息（得到響應頭、主體信息）

GET和POST任意一種請求方式，B/S瀏覽器都可以把信息發送給服務器端[6]，服務器端也可以把瀏覽器請求信息返還給瀏覽器，但是采用GET模式的話一般以獲得信息為主，采用POST模式一般以向服務器發送信息為主。比如，瀏覽器端需要獲取一些動態展示的圖片、文字、音頻，一般采用GET請求告訴服務器端我們想要什么，服務器端就會把我們想要的數據返回；在實現在線用戶注冊功能的時候，需要把用戶輸入的注冊加密信息發送給服務器，這時候我們一般使用POST請求。

GET請求和POST請求，在項目實戰中存在很多區別：

GET請求傳輸數據比POST請求更少：GET請求傳遞給服務器內容保存在URL地址參數后面，POST請求是在HTTP的body體里面，而URL地址是有長度限制的，超過的部分，瀏覽器會自動刪除。

GET請求會出現緩存：因為使用URL傳遞數據，數據會被客戶端瀏覽器緩存，這個是無法控制的。用GET傳遞數據時要防止瀏覽器從緩存中讀取數據。

3 結語

B/S架構下無論是Form表格提交還是Ajax數據提交，其本質都是將對服務器端的TCP請求先轉化為HTTP請求報文，并發送給服務器的Web服務器程序處理，即所有對服務器發送和接收的數據都先封裝為HTTP幀進行通信，然后Web服務器再和服務器數據庫進行通信（對比C/S架構則為客戶端程序直接與服務器數據庫進行通信）。HTTP請求報文幀格式如圖4所示：

圖4 HTTP請求報文幀格式

一個POST或者GET請求無論是Form表格提出或是Ajax提出的都可以形成如下類似HTTP請求報文：

即瀏覽器端需要獲取服務器中123.txt文檔的內容，服務器將會回復HTTP響應報文，并將123.txt中的內容傳輸至發送請求報文的瀏覽器中，即為整個完整的B/S數據請求傳輸過程。HTTP定義的多種請求方法中有GET、POST、HEAD、PUT等，其中GET和POST方法即為和Html Form表格和Ajax的GET、POST相對應的方法。