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相对应的方法。