表單和ajax送出淺析

在網頁中常用的資料送出送出有兩種：表單和ajax送出。下面将簡單介紹一下它們各自的特點及優缺點。

    表單在​​網頁​​​中主要負責​​資料采集​​功能。一個表單有三個基本組成部分：

表單标簽：<form></form>用于申明表單，定義采集資料的範圍。這裡面包含了處理表單資料所用CGI程式的URL以及資料送出到伺服器的方法。

文法：

<form id="form1"method="post" action="tw_upgrade.cgi"enctype="multipart/form-data" target="file_frm_uploader"></form>

屬性解釋：

Id 是表單的辨別符，用于區分不同表單；

method=get或post指明送出表單的HTTP方法.可能的值為： post：POST方法在表單的主幹包含名稱/值對并且無需包含于action特性的URL中. get：不贊成。GET方法把名稱/值對加在action的URL後面并且把新的URL送至伺服器.這是往前相容的預設值.這個值由于國際化的原因不贊成使用.

action=url指定用來處理送出表單的格式.它可以是一個URL​​位址​​​(送出給程式)或一個​​電子郵件​​位址.在BCM　11AC項目中為broadcom.c檔案中的mime_handlers表裡的一個接口。

enctype屬性為編碼方式，常用有兩種：application/x-www-form-urlencoded和multipart/form-data，預設為application/x-www-form-urlencoded，不能用于檔案上傳；隻有使用了multipart/form- data，才能完整的傳遞檔案資料，且傳遞的資料為二進制，用request就會傳遞不成功。

target ="..."指定送出的結果文檔顯示的位置： _blank ：在一個新的、無名浏覽器視窗調入指定的文檔； _self ：在指向這個目标的​​元素​​​的相同的​​架構​​中調入文檔； _parent ：把文檔調入目前框的直接的父FRAMESET框中；這個值在目前框沒有父框時等價于_self； _top ：把文檔調入原來的最頂部的浏覽器視窗中(是以取消所有其它架構)；這個值等價于目前框沒有你框時的_self.

 ​​表單域​​​：包含了​​文本框​​​、密碼框、​​隐藏域​​​、​​多行文本框​​​、​​複選框​​​、​​單選框​​、下拉選擇框和檔案上傳框等，用于采集使用者的輸入或選擇的資料。 送出時浏覽器将為我們把表單裡的資料解析為名/值對的形式。是以name屬性必須唯一。

表單按鈕：包括送出按鈕、複位按鈕和一般按鈕；用于将​​資料傳送​​​到伺服器上的CGI​​腳本​​或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。代碼格式：<input type="submit" name="..."value="...">。

送出、複位、一般的type分别為：submit/reset/button。

         Ajax送出是通過js來送出請求，請求與響應均由js引擎來處理，頁面不會重新整理，使用者感覺不到實際上浏覽器發出了請求。采用jquery的ajax，具有更好的封裝性，簡單易用。文法：

$.post(url,[data],[callback],[type]);

參數解釋：

urlString

發送請求位址。

data(可選)Map

待發送 Key/value 參數。

callback(可選)Function

發送成功時回調函數。

type(可選)String

傳回内容格式，xml, html, script,json, text, _default。

下面列出兩種送出方式的幾點差別：

1. Ajax在送出、請求、接收時，都是異步進行的，網頁不需要重新整理；

   Form送出則是建立一個頁面，哪怕是送出給自己本身的頁面，也是需要重新整理的；

2. Ajax在送出時，是在背景建立一個請求；

   Form卻是放棄本頁面，而後再請求；

3. Ajax必須要使用JS來實作，不啟用JS的浏覽器，無法完成該操作；

   Form卻是浏覽器的本能，無論是否開啟JS，都可以送出表單；

4. Ajax在送出、請求、接收時，整個過程都需要使用程式來對其資料進行處理；

   Form送出時，卻是根據你的表單結構自動完成，不需要代碼幹預。

有時候我們需要用表單送出，但又不想重新整理頁面怎麼辦？下面将介紹一個送出表單但不重新整理頁面的方法：

在頁面中定義一個隐藏的div和iframe

<divid="file_uploader" style="display: none;">
     <iframe name='file_frm_uploader' allowTransparency='true'frameborder='0' src='about:blank'></iframe>
     </div>      

将該頁面中form的target屬性設定為target="file_frm_uploader"即可實作不重新整理頁面地送出表單。在表單處理完後，傳回一段javascript代碼，就可以回調該頁面中的方法：