Form表單提交，Ajax請求，$http請求的區別

作過前端同窗想必都避免不了要和後臺server打交道。而如下這三種與後臺交互的方式想必你們都不陌生。

Form表單提交，Ajax請求，Angular的$http請求

之前一直搞不清楚何時應該用哪一種方式請求數據，正好最近在作文件上傳相關業務，順便對這三種方式的使用場景及區別作個簡單總結。

用法

如下是三種請求方式的API詳細介紹：

Form：

https://www.w3schools.com/html/html_forms.asp

Ajax：

http://api.jquery.com/jQuery.ajax/

Angular $http:

https://angular.io/api/common/http

 

區別

Form VS Ajax, $http

一、提交方式

form表單一般是經過在HTML中定義的action，method及submit來進行表單提交，另外也能夠經過在js中調用submit函數來進行表單提交。

具體的提交方式有不少種，好比能夠經過封裝成XMLHttpRequest對象進行提交，這裏就不一一詳述了。

而另外兩種請求(Ajax，$http)都是基於XMLHttpRequest進行的。

二、頁面刷新

Form提交，更新數據完成後，須要轉到一個空白頁面再對原頁面進行提交後處理。哪怕是提交給本身自己的頁面，也是須要刷新的，所以侷限性很大。

Ajax，$http均可以實現頁面的局部刷新，整個頁面不會刷新。

三、請求由誰來提交

Form提交是瀏覽器完成的，不管瀏覽器是否開啓JS，均可以提交表單。

Ajax，$http是經過js來提交請求，請求與響應均由js引擎來處理，所以不啓用JS的瀏覽器，沒法完成該操做。

四、是否能夠上傳文件

最初，ajax出於安全性考慮，不能對文件進行操做，因此就不能經過ajax來實現文件上傳，可是經過隱藏form提交則能夠實現這個功能，因此這也是用隱藏form提交的主要用途。

後來XMLHttpRequest引入了FormData類型，使得經過Ajax也能夠實現文件上傳，稍後會詳細介紹。

Ajax VS $http

一、默認Content-type類型

Ajax默認的Content-type是 x-www-form-urlencoded

$http默認的Content-type是 application/json

二、async

Ajax支持同步通訊(async:false)

$http不支持async:false

三、參數處理

Ajax在post數據以前jQuery會對數據進行序列化，轉換成字符串："a=1&b=2"這種形式，而後把post的參數拼接到url上發送。

$http不會對數據作參數處理，數據將以json格式發送。

這樣就會致使一個問題：有些請求經過Ajax能夠請求成功，可是經過$http卻失敗了。

固然，咱們能夠經過作一些處理來實現這兩種請求的統一。

能夠從angular層面解決，把angular的post請求也按照jquery的方法作些改變，以下：

http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/

https://github.com/petersirka/total.js/issues/26

經過Ajax提交文件

前面講過，能夠經過傳統的form表單實現文件上傳，不過傳統的form表單提交會致使頁面刷新，可是在有些狀況下，咱們不但願頁面被刷新，

這種時候咱們都是使用Ajax的方式進行請求的。

這時候就要用到一個對象FormData。

FormData類型實際上是在XMLHttpRequest Level 2定義的，它是爲序列化表以及建立與表單格式相同的數據提供的。

目前幾乎全部的主流的瀏覽器都已經支持這個對象了。參見

https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

如下爲代碼實現：

<form id="id_form">
    <input type="text" name="name"/>
    <input type="number" name="age"/>
    <input type="file" name="fileName"/>
    <input type="button" value="sumbit" onclick="onSubmit();"/>
</form>

 

function onSubmit(){
    /* 能夠經過兩種方法獲取文件 */
    // // 方法一： 直接獲取表單值
    // var formData = new FormData(document.getElementById("id_form"));

    // 方法二：經過FormData的append方法動態添加屬性
    var nameVal = $("input[name='name']").val();
    var ageVal = $("input[name='age']").val();
    var files = document.querySelector('input[type=file]').files;
    var formData =  new FormData();
    formData.append("nameKey", nameVal);
    formData.append("ageKey", ageVal);
    formData.append("fileKey", files[0]);

    /* 能夠經過兩種方式實現文件上傳 */
    // // 方法一： 經過構建一個XMLHttpRequest對象實現上傳
    // var req = new XMLHttpRequest();
    // req.open("post", "http://xxx/public/upload", false);
    // req.send(formData);

    // 方法二：經過Ajax實現上傳
    $.ajax({
        url:"http://xxx/public/upload",
        type:"POST",
        data:formData,
        processData:false,
        contentType:false,
        success:function(data){
            console.log("response success: ", data);
        },
        error:function(error){
            alert("response error: ", error);
        }
    });
}