前言

最近在公司做项目时，前端ajax交互用到的比较多，才发现自己对ajax一知半解，好多概念还没有搞清楚，故整理该篇文章以待日后翻阅。

常用的ajax请求方式

• $.ajax({name:value, name:value, … })

  只有一个参数且该参数是一组key/value对象，包含各选项及回调函数信息。

    $.ajax({
        type: "post",
        url: 'http://www.example.com/user/query',
        data:{username:"zhangsan"},
        success: function (data) {console.log(data);}
    });
  

• $.get(url,data,function(data,status,xhr),dataType)

$.get(
    "http://www.example.com/user/query",
    {username: "zhangsan"},
    function(data){
        alert(data);
    }
);

• $.post(url,data,function(data,status,xhr),dataType)

$.post(
    "http://www.example.com/user/query",
    {username: "zhangsan"},
    function(data){
        alert(data);
    }
    })

• $.getJSON(url,data,success(data,status,xhr))

$.getJSON(
    "http://www.example.com/user/query?username=zhangsan",
    function(data){
        console.log(data);
    }
);

ajax请求简单参数解释

ajax请求重要参数解释

• data

  Object或String类型的参数，发送到服务器的数据。如果不是字符串，将自动转换为字符串格式。
  get请求中会将参数序列化附加在url后。例如{username:”jack”,age:”18”}转换为&username=jack&age=18附加在请求url后面。如果需要防止这种自动转换，可以设置processData（防止自动转换）为false。

• dataType

  这个是预期服务器返回的数据类型，而不是你发送给服务器的数据类型。如果不指定，jquery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：

  • xml：返回XML文档
  • html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
  • script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
  • json：返回JSON数据。
  • jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
  • text：返回纯文本字符串。

• contentType：

  内容编码类型默认为”application/x-www-form-urlencoded”。该默认值适合大多数应用场合。

• processData：

  默认为true的情况下，发送的数据将被转换为对象(即&username=jack&age=18这样的形式),以配合默认内容类型”application/x-www-form-urlencoded”。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。processData 默认为true，当设置为false的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data

ajax请求头添加Content-Type的两种方式

• 方式一

        $.ajax({
            type: "post",
            url: 'http://www.example.com/user/query',
            data:{username:"zhangsan"},
            contentType:"application/json",
            success: function (data) {console.log(data);}
        }
        });
  

• 方式二：

        $.ajax({
            type: "post",
            url: 'http://www.example.com/user/query',
            data:{username:"zhangsan"},
               beforeSend:function (xhr) {
                        xhr.setRequestHeader("Content-Type", "application/json");      
                },
            success: function (data) {console.log(data);}
        }
  

  application/x-www-form-urlencoded 和 application/json 两种类型的数据的区别

  ajax 请求默认使用contentType等于"application/x-www-form-urlencoded"这种格式的特点就是如果你的请求数据是简单的json对象类型如data:{username:"zhangsan",age:18}则也会被ajax会序列化成user=张三&age=18 这种形式发送到服务端，需要注意一点这种转换时只能识别json对象类型，不能识别json字符串类型，如果是get请求则附在在请求url后面， 而 post 请求则是使用请求体，参数不在请求url 中，在请求体中的参数表现形式也是 user=zhangsan&age=18 的形式。
  当contentType等于"application/json"时，这表示发送的数据是json格式的字符串，如果ajax中设置为该类型，则发送的json对象必须要使用JSON.stringify进行序列化成字符串才能和设定的这个类型匹配。

Spring如何接收ajax传递的数据

当contentType没有设置即表示采用ajax默认的"application/x-www-form-urlencoded"，后台可通过以下方式获取参数

• 原生的Servlet使用request.getParameter(“user”)获取参数；
• spring mvc中框架可自动根据参数名进行匹配，即表单元素的name属性和接收参数的名称一样时即可自动匹配；如果不一样，还可以使用@RequestParam,@ModelAttribute以及@RequestBody 的方式匹配。

当contentType设置成即"application/json"，后台可通过以下方式获取参数

• 需要使用@RequestBody来注解，这样才能将发送过来的json字符串解析绑定到对应的 pojo 属性上。另外，需注意一点，json字符串在书写时名称部分需要加上“”双引号，以免一些json解析器无法识别。

ajax如何传递multipart/form-data类型数据

解决这个问题需要用到FormData，该对象用以将数据编译成键值对的形式来发送数据。一般都是用于发送表单数据，但也可以用于手动构造键值对数据，而独立于表单使用。

var avatar=$("input[type='file']")[0];
var formData = new FormData();
formData.append("username", "zhangsan");
formData.append("password",123456789);
formData.append("avatar", avatar.files[0]);
    $.ajax({
        url:'http://www.example.com/user/avatar/upload/',
        dataType:'json',
        type:'POST',
        data: formData,
        processData : false, // 关闭默认的数据处理即不做处理
        contentType : false, // 不要默认设置Content-Type请求头
        success: function(data){
            console.log(data);
        },
        error:function(response){
            console.log(response);
        }
    });

ajax请求数据中文编码问题

如果你是通过form提交的，那就不需要对参数进行编码，但是如果是由ajax发送请求到后台的，就需要对参数进行encodeURI编码，否则，会导致后台出现各种乱码。

• url中参数处理

  如果参数是通过URL传递那么需要编码两次;第一次编码是对中文进行编码；第二次是对转码后的%进行编码处理；

    //encodeURI("张三")="%E5%BC%A0%E4%B8%89"`;
    //encodeURI("%E5%BC%A0%E4%B8%89")="%25E5%25BC%25A0%25E4%25B8%2589"
    var username=encodeURI(encodeURI("张三"))
    $.ajax({
            type: "get",
            url: 'http://www.example.com/user/query?username='+username,
            success: function (data) {console.log(data);}
        }
    });
  

• 请求体中参数处理

  如果是请求体中含有中文参数，那么只需要编码一次即可。

    $.ajax({
            type: "get",
            url: 'http://www.example.com/user/query',
            data:{username:encodeURI("张三")}
            success: function (data) {console.log(data);}
        }
    });
  

  是那么后台在获取到参数需要通过URLDecoder.decode(username,"utf-8");进行解码即可。