前言
最近在公司做项目时,前端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)
参数 描述 url 必需。请求URL。 data 可选。请求数据。 success 可选。当请求成功时运行的函数;函数形式:function(data,status,xhr){…},其中参数data表示服务器返回的数据;status表示请求的状态;xhr表示XMLHttpRequest 对象 dataType 可选。预期的服务器响应的数据类型。默认jQuery 会根据请求响应头智能判断 $.get( "http://www.example.com/user/query", {username: "zhangsan"}, function(data){ alert(data); } );
- $.post(url,data,function(data,status,xhr),dataType)
参数 描述 url 必需。请求URL。 data 可选。请求数据。 success 可选。当请求成功时运行的函数;函数形式:function(data,status,xhr){…},其中参数data表示服务器返回的数据;status表示请求的状态;xhr表示XMLHttpRequest 对象 $.post( "http://www.example.com/user/query", {username: "zhangsan"}, function(data){ alert(data); } })
- $.getJSON(url,data,success(data,status,xhr))
参数 描述 url 必需。请求URL。 data 可选。请求数据。 success 可选。当请求成功时运行的函数;函数形式:function(data,status,xhr){…},其中参数data表示服务器返回的数据;status表示请求的状态;xhr表示XMLHttpRequest 对象 $.getJSON( "http://www.example.com/user/query?username=zhangsan", function(data){ console.log(data); } );
ajax请求简单参数解释
参数 | 描述 |
---|---|
url | 请求地址 |
type | 请求类型,默认get |
timeout | 请求超时时间 |
async | 是否异步请求,默认为true |
cache | 是否从缓存中加载请求信息,默认为true |
dataFilter | 该参数是对ajax返回的原始数据进行预处理,提供data和type两个参数。data是Ajax返回的原始数据,type则是dataType参数。 |
beforeSend | 发送请求前运行的函数,函数形式:function(data,status,xhr){…},其中参数data表示服务器返回的数据;status表示请求的状态;xhr表示XMLHttpRequest 对象。若函数返回false可以取消本次ajax请求 |
success | 当请求成功时运行的函数,函数形式同上面的beforeSend |
error | 如果请求失败要运行的函数,函数形式同上面的beforeSend |
complete | 请求完成时运行的函数(在请求成功或失败之后均调用),函数形式同上面的beforeSend |
ifModified | 若为true则表示仅在服务器数据改变时获取新数据。默认为false,即忽略头信息。服务器数据改变判断的依据是Last-Modified头信息 |
username | 要求为String类型的参数,用于响应HTTP访问认证请求的用户名 |
password | 要求为String类型的参数,用于响应HTTP访问认证请求的密码 |
scriptCharset | 规定请求的字符集。 |
jsonp | 在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分。 |
global | 表示是否触发全局ajax事件,要求为Boolean类型的参数,默认为true |
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");
进行解码即可。