B/S架構(gòu)下Web數(shù)據(jù)提交與獲取原理分析

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

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

表單將表單內(nèi)數(shù)據(jù)提交上傳至Web服務(wù)器，獲取Web服務(wù)器的內(nèi)容并形成瀏覽器表單。

Form表單有以下附加屬性：

action URL：表單發(fā)送信息的地址，可以為內(nèi)部網(wǎng)址，可以為服務(wù)器目錄地址，也可以為外部網(wǎng)址。

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

autocomplete on、off：是否打開表單的自動(dòng)填寫功能。

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

method get、post：發(fā)送表單數(shù)據(jù)HTTP的請(qǐng)求方法等。

其中action屬性及method屬性為數(shù)據(jù)提交傳輸?shù)闹攸c(diǎn)屬性，action中的URL地址就是服務(wù)器端接收form的地址，method通俗講，即為兩種HTTP傳輸數(shù)據(jù)的方法，分別為post和get[3]。

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

2.1.2 Form模式下數(shù)據(jù)傳輸原理

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

2.2 Ajax方式提交

2.2.1 Ajax意義

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

2.2.2 Ajax提交數(shù)據(jù)方法

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

圖3 Ajax工作原理

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

Ajax核 心：XMLHttpRequestXMLHttpRequest對(duì)象是Ajax中最重要的一個(gè)對(duì)象[5]。XMLHttpRequest傳統(tǒng)的Web前后臺(tái)的數(shù)據(jù)傳輸原理為，瀏覽器直接訪問服務(wù)器的Web后臺(tái)服務(wù)程序來獲取數(shù)據(jù)。Web后臺(tái)服務(wù)程序通過轉(zhuǎn)發(fā)把數(shù)據(jù)發(fā)送給瀏覽器。當(dāng)我們使用Ajax之后，瀏覽器會(huì)先把HTTP請(qǐng)求發(fā)送到XMLHttpRequest對(duì)象之中，XMLHttpRequest對(duì)象對(duì)HTTP請(qǐng)求進(jìn)行封裝，然后再發(fā)送給Web服務(wù)器。Web服務(wù)器的應(yīng)答方式不是轉(zhuǎn)發(fā)而是以流的方式把數(shù)據(jù)回傳給瀏覽器XMLHttpRequest異步對(duì)象，并且XMLHttpRequest對(duì)象會(huì)不斷監(jiān)聽服務(wù)器狀態(tài)的變化，將得到服務(wù)器返回的數(shù)據(jù)寫到瀏覽器指定位置上。因?yàn)椴皇寝D(zhuǎn)發(fā)的方式，所以不刷新就能夠獲取服務(wù)器端的數(shù)據(jù)。

創(chuàng)建獲取Ajax對(duì)象的方法及發(fā)送接收數(shù)據(jù)的方法：

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

var time=ajax.responseText;

//要將這個(gè)數(shù)據(jù)直接賦值給一個(gè)一個(gè)標(biāo)簽

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

Post方式發(fā)送數(shù)據(jù)或獲得數(shù)據(jù)，設(shè)置ajax請(qǐng)求的方法：

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

//發(fā)送數(shù)據(jù)

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

以上即為完整的創(chuàng)建獲取Ajax對(duì)象的方法以及發(fā)送接收數(shù)據(jù)方法，其主要核心即為XMLHttpRequestXMLHttpRequest對(duì)象。

2.2.3 Ajax請(qǐng)求和Form表單的區(qū)別

Ajax在提交或者接收服務(wù)器端數(shù)據(jù)時(shí)是異步進(jìn)行的，原網(wǎng)頁不需要整體刷新；

Form在提交或者接收服務(wù)器端數(shù)據(jù)時(shí)是同步進(jìn)行的，原網(wǎng)頁需要整體刷新；

Ajax在提交時(shí)，是保留本網(wǎng)頁，然后直接向Web服務(wù)器后臺(tái)程序新建一個(gè)請(qǐng)求；

Form需要刷新原網(wǎng)頁，而后再請(qǐng)求；

Ajax必須要使用JavaScript實(shí)現(xiàn)，必須使用支持JavaScript的瀏覽器；

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

Ajax在請(qǐng)求、提交、接收時(shí)，需要特殊的服務(wù)器后臺(tái)程序?qū)?shù)據(jù)進(jìn)行處理；

Form提交時(shí)，不需要專用的服務(wù)器后臺(tái)程序；

2.2.4 Ajax模式下數(shù)據(jù)傳輸原理

基于原生JS實(shí)現(xiàn)Ajax

創(chuàng)建一個(gè)Ajax對(duì)象

let xhr=new XMLHttpRequest();

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

打開請(qǐng)求地址（可以理解為一些基礎(chǔ)配置，但是并沒有發(fā)送請(qǐng)求）

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

//監(jiān)視Ajax狀態(tài)，及時(shí)得到響應(yīng)信息（得到響應(yīng)頭、主體信息）

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

GET請(qǐng)求和POST請(qǐng)求，在項(xiàng)目實(shí)戰(zhàn)中存在很多區(qū)別：

GET請(qǐng)求傳輸數(shù)據(jù)比POST請(qǐng)求更少：GET請(qǐng)求傳遞給服務(wù)器內(nèi)容保存在URL地址參數(shù)后面，POST請(qǐng)求是在HTTP的body體里面，而URL地址是有長(zhǎng)度限制的，超過的部分，瀏覽器會(huì)自動(dòng)刪除。

GET請(qǐng)求會(huì)出現(xiàn)緩存：因?yàn)槭褂肬RL傳遞數(shù)據(jù)，數(shù)據(jù)會(huì)被客戶端瀏覽器緩存，這個(gè)是無法控制的。用GET傳遞數(shù)據(jù)時(shí)要防止瀏覽器從緩存中讀取數(shù)據(jù)。

3 結(jié)語

B/S架構(gòu)下無論是Form表格提交還是Ajax數(shù)據(jù)提交，其本質(zhì)都是將對(duì)服務(wù)器端的TCP請(qǐng)求先轉(zhuǎn)化為HTTP請(qǐng)求報(bào)文，并發(fā)送給服務(wù)器的Web服務(wù)器程序處理，即所有對(duì)服務(wù)器發(fā)送和接收的數(shù)據(jù)都先封裝為HTTP幀進(jìn)行通信，然后Web服務(wù)器再和服務(wù)器數(shù)據(jù)庫進(jìn)行通信（對(duì)比C/S架構(gòu)則為客戶端程序直接與服務(wù)器數(shù)據(jù)庫進(jìn)行通信）。HTTP請(qǐng)求報(bào)文幀格式如圖4所示：

圖4 HTTP請(qǐng)求報(bào)文幀格式

一個(gè)POST或者GET請(qǐng)求無論是Form表格提出或是Ajax提出的都可以形成如下類似HTTP請(qǐng)求報(bào)文：

即瀏覽器端需要獲取服務(wù)器中123.txt文檔的內(nèi)容，服務(wù)器將會(huì)回復(fù)HTTP響應(yīng)報(bào)文，并將123.txt中的內(nèi)容傳輸至發(fā)送請(qǐng)求報(bào)文的瀏覽器中，即為整個(gè)完整的B/S數(shù)據(jù)請(qǐng)求傳輸過程。HTTP定義的多種請(qǐng)求方法中有GET、POST、HEAD、PUT等，其中GET和POST方法即為和Html Form表格和Ajax的GET、POST相對(duì)應(yīng)的方法。