ajax(提交表单、同步/异步请求)

一般的ajax提交表单方式
$.ajax({
                url:"${pageContext.request.contextPath}/public/testupload",//提交的地址
                type:"post",//提交的方式(GET/POST)
                data:{username:username},//提交的参数
                success:function(data){ //成功的操作
                    window.clearInterval(timer);
                    console.log("over..");
                },
                error:function(e){//失败的操作
                    alert("错误！！");
                    window.clearInterval(timer);
                }
            });
或者
$.post(path,{data:data},function(data){
    ...
},"json");
其中
path是请求地址，必须值
data是需要传递的参数，可选，参数为key/value形式
function为回调函数，在请求完成后执行(返回为success才调用)
"json"是返回参数的类型，可选，可以是string,json或者xml等


以上为一般的ajax提交表单或者请求的方法，虽然具有一定的可操作性，但是，当你需要提交许多参数的时候，就不得不写很多获取参数的js了，
所以，接下来介绍两种简单的方法
方法1：使用jquery.form.js
Jquery.form.js是一个强大的表单插件提供了大量的表单操作方法，这里不做具体分析，有兴趣的同学可以上网百度
这里讲一下Jquery.form.js的表单插件来提交表单
<form id="tf">
            <input type="file" name="img"/>
            <input type="text" name="username"/>
            <input type="button" value="提" οnclick="test();"/>
        </form>


$("#tf").ajaxSubmit();
就是这么简单，它会将表单以ajax的方式提交，同时支持文件上传；
方法2：使用FormData对象
FormData对象是html5的一个对象，虽然目前大部分主流的浏览器都已兼容，但还是有部分浏览器不兼容，所以，当不兼容的时候，建议还是使用方法1
FormData是一个对象，可以直接申明，然后直接往对象中添加参数，最后还可以直接提交，不需要任何页面代码，这种方式在收集用户信息等不需要用户填写
的情况下非常适用
 var form = new FormData();
          form.append("username","zxj");
          form.append("password",123456);
          var req = new XMLHttpRequest();
          req.open("post", "${pageContext.request.contextPath}/public/testupload", false);
          req.send(form);
当然，也可以用ajax的一般提交方式，将form当成参数提交
其次FormData还支持直接从html中的表单生成数据，就是在html页面中已经有数据了，然后FormData可以直接把这个表单的数据写入这个对象，然后直接提交给后台
<form id="tf">
            <input type="file" name="img"/>
            <input type="text" name="username"/>
            <input type="button" value="提" οnclick="test();"/>
                        .............
 </form>


 function test(){
            var form = new FormData(document.getElementById("tf"));
//             var req = new XMLHttpRequest();
//             req.open("post", "${pageContext.request.contextPath}/public/testupload", false);
//             req.send(form);
            $.ajax({
                url:"${pageContext.request.contextPath}/public/testupload",
                type:"post",
                data:form,
                processData:false,
                contentType:false,
                success:function(data){
                    window.clearInterval(timer);
                    console.log("over..");
                },
                error:function(e){
                    alert("错误！！");
                    window.clearInterval(timer);
                }
            });        
            get();//此处为上传文件的进度条
        }
大家应该也注意到，这里也是可以上传文件的
注意：使用FormData提交的时候，大家会注意到表单提交的是request payload，具体有兴趣的同学可以自己百度，它不是之前的Form data提交的，所以后台也是要经过处理的，比如springMVC就需要配置


<!-- 配置nultipartresolver,注意：id名必须这样写，不然会报错 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="UTF-8"></property>
        <property name="maxInMemorySize" value="10240000"></property>
    </bean>


ajax异步请求详解
ajxa定义：异步的JavaScript和xml
1、XMLHttpRequst的出现才有了异步处理
2、创建XmlHttpRequest对象
var request=new XMLHttpRequest();
注意：如果要兼容IE6以下浏览器则需要编写如下代码
        var request;
         if(window.XMLRequest){
               request=new XMLRequestHttpRequest();  //IE7、IE8、360等
          }else{
               request=new ActiveXObject("Microsoft.XMLHTTP");//IE5、IE6
           }
3、XMLHttpRequest发送请求
(1)open(method,url,async)，参数的意义如下
method:GET或者POST请求方法
url:相对地址或者绝对地址
async:true或者false，默认是true,表示异步
(2)send(String)
GET请求无参数，POST请求时一定要有参数
举例A：
request。open("GET",'getDate',true);
request.send();
举例B:
request.open("POST","getDate",true)
//默认是"application/x-www-from"-urlencoden"方式提交，如果是提交文件，则需要修改成为multipart/form-data方式提交
request.setRequestHeader("Content-type","application/x-www-from"-urlencoden");
request.send("name=王二&age=25");
4、XMLHttpRequest取得响应
(1)responseText:获得字符串形式的响应数据
(2)responseXML:获得xml形式的响应数据
(3)status和statusText：以数字和文本形式返回Http转态码
(4)getAllResponseHeader():获得所以得响应报头
(5)getResponseHeader():查询响应中的某个字段的值
(6)readState属性
"0"请求未初始化，open还未调用
"1":服务器连接已经建立，open已调用
"2":请求已接收，也就是接收到头信息了
"3":请求处理中，也就是接收到响应主体了
"4":请求已经完成，且响应就绪，响应完成了
举例：
       var  request;
      request.open("GET","getDate",true);
      request.send();
      //监听返回的转态，200和4代表响应成功
      request.onreadystatechange=fuction(){
         if(request.readstate==4&&request.status==200){
               //需要处理的事务
         }
      }
6、HTTP请求:是一种规则，无状态，无记忆
  HTTP请求过程
（1）建立TCP连接
（2）web浏览器向web服务器发送请求指令
（3）web浏览器发送请求头信息
（4）web服务器应答
（5）web服务器发送应答头信息
（6）web服务器向浏览器发送数据
（7）web服务器关闭TCP连接
A、HTTP请求的4个·组成部分
     a、HTTP请求方法或者动作(GET/POST)
     b、正在请求的URL
     c、请求头，包含客户环境信息、身份信息等
     d、请求体（正文），包含客户提交的查询字符串信息、表单信息
B、POST和GET方法
     GET:(1)用于信息获取
         (2)使用URL传递参数
         (3)String<=2000个字符左右
     POST:(1)用于修改服务器上的资源
          (2)String<=无穷大
C、一个HTTP响应由三个部分组成
       a、一个数字和文字组成的转态码。作用：显示请求是否成功
       b、响应头，包含服务器类型、日期、内容类型、长度等
       c、响应体，即响应正文，字符串、HTML等
D、HTTP状态码由3个数字构成，其中首位数字定义了状态码的类型
    1^^：信息类，表示收到web请求，正在进行处理中
    2^^：成功，表示用户请求被正确接收、理解和处理，如200
    3^^：重定向，表示请求未成功，客户必须采取动作
    4^^：客户端错误，客户提交的信息有误，如400
    found:意味着请求中所引用的文档不存在
    5^^：服务器错误（最难处理的问题）,表示服务器不能完成请求处理，如500


====一道面试题=建立异步请求过程的4个步骤：============
a:new一个XHR对象
b:调用open方法
c:send一些数据
d:对过程进行监听，来知道服务器是不是正确地做出了响应，接着可以做一些事情


出自：https://www.cnblogs.com/yufeiyu/p/6637563.html