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);
        }
    });
}