FORM表单请求和AJAX请求使用和适用场景

最常使用的两种信息提交处理方式

第一种：表单提交FORM Submit 方式

FROM提交是我们经常适用的向后台提交数据的一种方式，Form Tag 适用方法 参考：

<form action="form_action.asp" method="get" onsubmit="">    <p>First name: <input type="text" name="fname" /></p>    <p>Last name: <input type="text" name="lname" /></p>    <input type="submit" value="Submit" /></form>

action设置提交目的URL，method设置提交方法，后文会对不同的提交请求方式对比处理。

FORM提交数据验证：

我们对用户输入内容格式会有一定的规则要求，HTML5引入了简单的验证数据非空提示处理。如下input输入为空时表单提交被拒绝，同时input标签的type设置也会对输入做一些简单的验证，比如type设置为email时输入框对邮箱格式做简单的验证。

<input required="required"><input type="email" required="required">

如果需要对用户输入做一些特殊的验证和customize处理，可以使用onsubmit验证，onsubmit事件是在点击表单提交按钮时发生，在表单添加事件触发代码，或者定义js函数处理，并且返回一个Boolean值，返回false时拒绝提交。

onsubmit="SomeJavaScriptCode"

表单提交后后台对提交的数据处理并指定页面跳转或路由指定。action默认值为空，当action值为空时按照当前页面URL提交处理，并刷新页面。

第二种：Ajax异步请求点击按钮提交方式

Ajax提交是异步处理数据的并获取返回值的常用方式：

常用一些input、textarea tag 为用户提供输入框，设置一个submit button，并为submit button添加点击事件，在点击事件中添加异步请求操作。

Ajax提交数据验证：

首先需要通过js获取用户输入，然后对获取的输入作customize验证处理，一般对邮箱的验证采用js正则表达式的方式处理，还有一些基本的输入非空验证，在验证通过后执行异步请求操作。

Ajax Post 异步请求：

Ajax请求处理一般使用JQuery的ajax方法或者post方法做请求处理，下面两种使用方式等效。

$.ajax({  type: 'POST',  url: url,  data: [        param1="param1",        param1="param2",        param1="param3",        param1="param4",        ],  success: success,  dataType: dataType});$.post(url,data,success(data, textStatus, jqXHR),dataType)

url对应提交的url地址，data对应提交数据（值，变量，数组形式都可以），success对应请求成功后执行的回调函数，dataType对应服务响应的数据类型，默认是异步请求，如果想实现同步请求可以设置sync对应为false。

上述两种提交方式的区别和适用场景说明

情况一：提交并刷新当前页面，或者提交后跳转到其他页面。
情况二：提交数据并展示后台返回的处理信息。
情况一比较适合采用FORM提交的方式处理，简单方便，还可以使用HTML5新添加的一些基本验证。情况二比较适合采用Ajax提交的方式处理，在success函数中对返回的信息做一些需要的操作处理，不过需要通过js对用户输入做取出操作，通过参数传递给后台处理。
根据不同的情况选择不同的处理方式，一般FORM提交处理的方式比较多的使用，Ajax更多的使用在动态加载更多元素。
FORM和Ajax使用的最大区别是：FORM需要刷新页面，而Ajax可以在不刷新页面的情况下执行数据请求或者提交数据等操作，如果需要在Ajax提交成功后刷新页面，可以调用window对象的location属性的load()方法重新加载当前文档。

HTTP 请求拓展

HTTP 定义了一组请求方法, 以表明要对给定资源执行的操作。

GET:GET方法请求一个指定资源的表示形式. 使用GET的请求应该只被用于获取数据.
HEAD:HEAD方法请求一个与GET请求的响应相同的响应，但没有响应体.
POST:POST方法用于将实体提交到指定的资源，通常导致状态或服务器上的副作用的更改.
PUT:PUT方法用请求有效载荷替换目标资源的所有当前表示。
DELETE:DELETE方法删除指定的资源。
CONNECT:CONNECT方法建立一个到由目标资源标识的服务器的隧道。
OPTIONS:OPTIONS方法用于描述目标资源的通信选项。

GET和POST是常用的两种请求方法，GET方法用来请求数据，参数会在URL中发送，请求可以被缓存并保留在浏览器的历史记录中，敏感数据应该避免使用GET请求方法；Post方法请求不会被缓存也不会在浏览器中保留记录表数据长度没有要求，可以处理敏感数据（用户密码等），关于Post方法的详细讲解参考。