本篇博客有以下两大内容：
- 原生的Ajax和jQuery的ajax(即$.ajax())方法的使用
- jQuery的API中提供的五种快捷Ajax方法的使用
在开始之前,先做一个小提醒,如果你的项目是基于SSM框架,在处理ajax请求的handller方法上一定不要忘了打上@ResponseBody这个注解呀,ψ(._. )>或者,你可以试试不加看看前端页面有没有反应,嘿嘿~
还有一点，再使用时jQuery时请别忘记在页面上引入你喜欢版本的jQuery.js库
ps:因为CSDN编辑器的小问题,在编辑时加$有时候会转义成格式,就不显示 $ 所以有的地方我在$ .get()中间加了一个空格,是为了调整博客不显示的问题,实际上写的时候不加空格的,haha,你们明白就好~
1 原生Ajax和$.ajax()
- 原生的Ajax和$.ajax()适合发送put，delete请求（get，post当然也可，你需要对“restful”有一定的了解）或者发送json字符串时使用。
1.1 原生Ajax
原生的Ajax(Asynchronous JavaScript And XML),翻译过来就是异步的JavaScript和XML
意味着可以在不重新加载整个网页的情况下，对网页的某部分内容进行更新。
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
ajax GET/POST
"button" value="ajax发送get请求" onclick="ajaxDoGet()">
"button" value="ajax发送post请求" onclick="ajaxDoPost()">
1.2 $.ajax()
- 这个是仙鱼最喜欢的一个方法,对的记住这个方法是大boss就好啦~
常用的两种方法：$ .ajax(url,[settings])和$.ajax(settings),此时url是setting的一个属性
我喜欢用第二种方法,强迫症必须一排属性排好,哈哈,接下来分别说一下属性们:
处理响应结果的回调函数:success:请求成功之后的回调函数,error:请求失败之后的回调函数,statusCode:指明了返回某种状态码对应的回调函数,complete:请求不管是成功还是失败的回调函数
请求数据:data,processData(指定data是否进行转码:true/false,默认为true),contentType,traditional
相应数据:dataType,dataFilter:对返回的原始数据预处理
请求类型:type:get|post|put|delete…默认为get
同步异步:async:true/false,默认为true(异步)
是否缓存:cache:true/false,默认为true
前置处理:beforeSend
headers:设置请求头
2
3
4
5
6
7
8
9
10
11
12
13
14
15"text/javascript" >
$.ajax({
url:"${pageContext.request.contextPath}/user/getAllUsers",
type:'post',
//data可以直接拼接在url后面,也可以在下面进行设置
data:"name=张三&age=19",
contentType:"application/x-www-form-urlencoded",
//dataType:"html",
dataFilter:"json",
async:true,//默认是异步,你觉得这个还需要写吗?
success:function(data){
alert(data);
},
});
2 jQuery五种快捷API方法
在说这五种快捷API方法之前你要明白一点，前面的$ .ajax()方法是一个超级强大的方法，后面的这五种快捷API方法最终都是调用的$.ajax()方法完成的最终请求，后面的只是使用便捷而已，前面大佬方法一定要熟练使用
当中需要发送普通的Json对象或键值对时，使用jQuery的API中提供的五种快捷方法更加便捷
这五种快捷方法都只能处理请求成功时候的回调函数，对于请求失败我们看不到任何的响应
2.1 $ .get()/$.post()
$.get(url,[data],[callback],[type])
$.post(url,[data],[callback],[type])
上面两种方法的在参数、使用方法、API中完全相同，唯一不同点就是请求的方式（method）不同，一个是get，一个是post
下面分别介绍一下参数：
url：请求路径，是唯一的必要参数
[data]：请求数据，这里必须是key-value的形式，若是get请求，在编码后会附加到url的后面，如果是post请求，编码后会放到request的body里面
[callback]：请求成功之后的回调函数，可以接收请求成功之后的服务器响应的数据(data(相应数据),callbacktype(永远是success),jqXHR)
[type]：指定当前请求返回数据的编码格式，若不指定type，程序会根据响应头中的ContentType来决定编码格式，如：text|html|json|script
2
3
4
5
6
7
8
9
10
11
12
13
2.2 $(selector).load(url,[data],[callback])
到后端加载一个页面片段，放到selector所代表的容器中
调用者是一个dom结点，注意区分
与上面的$ .get()/$ .post()方法相比，少了第四个type参数，因为不管返回的数据是什么类型，$(selector).load()最后都会将返回数据转化成文本，在插入到容器中,但是啊,就是有那么个例外,当返回值对象为json字符串时，需要解析成 js对象,记得欧~
若只有url,那默认发送的是get请求，若是url+[data]，那会自动转化为post请求
2
3
4
5
6
7
8"text/javascript" >
function doLoad(){
//mydiv为我自己定义的一个div的id
$("#mydiv").load("${pageContext.request.contextPath}/user/getAllUsers",function(){
alert("Success!");
});
}
2.3 $ .getJSON()/$.getScript()
$.getJSON(url,[data],[callback])
$.getScript(url,[callback])
