什么是AJAX?
AJAX(Asynchronous Javascript And XML),即异步的js和xml.
用途 : 不重新刷新整个页面的情况下,与服务器交互并局部更新页面内容.
实现AJAX的两个步骤
1.前端用JS写AJAX代码
2.后端响应AJAX请求
一.前端AJAX代码
AJAX有两种写法,分别是:
1).用javascript写
2).用js框架写(如jQuery)
AJAX主要用两种请求方式:
1).GET ==> @请求参数写在url后,不安全
@发送数据量有限制(url长度有限,比如Chrome的url最大长度为8182字节)
@会获取缓存结果,因为get一般做查询操作,不必每次都与数据库连接(解决方法,用Math.random()在url地址后加一个随机数参数)
2).POST ==> @比GET安全,请求参数放在请求body中
@没有长度限制
@POST不能使用缓存(因为一般做删改操作,必须与数据库交互)
I.首先用JS代码写AJAX请求
展示代码之前,先介绍实现AJAX的核心对象window.XMLHttpRequest,用于在后台与服务器交换数据
XMLHttpRequest的属性们:
onreadystatechange : 用于存储(回调)函数，每当 readyState 属性改变时，就会调用该函数.
readyState : 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化.0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成,且响应已就绪
status : 请求状态 200: "OK" 404: 未找到页面
1.使用get请求方式
有3个步骤
function useGet() {
//1.创建XMLHttpRequest对象
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.设置获得响应后的操作
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("result").value=xmlhttp.responseText;
}
}
//3.设置请求信息(open()),发送请求(send())
//请求方法用get时,需要把请求参数写在url中(?a=1&b=2). true表示开启异步
xmlhttp.open("GET", "${pageContext.request.contextPath }/test/ajaxTest?a=1&b=2", true);
xmlhttp.send();
}
扩展 :
回调函数 : 用于存入主函数(useGet())中.让主函数调用的函数即回调函数,在上边代码中xmlhttp.onreadystatechange=后面的function内容就是回调函数,回调函数是在主函数执行完后才执行
2.使用post请求方式
使用post请求的写法和get请求的写法稍有不同,多一个setRequestHeader()函数来设置请求头的Content-type,因为get方法中,请求参数不在请求体中,所以get方法无需设置Content-type,而post方法需要设置
//设置异步请求信息,post请求中,请求参数无需写在url中
xmlhttp.open("POST","${pageContext.request.contextPath }/test/getRealName",true);
//设置请求头(application/json表示发送的数据是json格式的字符串)
xmlhttp.setRequestHeader("Content-type","application/json; charset=UTF-8");
//发送请求, JSON.stringify()用于把js对象转换为字符串
xmlhttp.send(JSON.stringify({"username" : username}));
//顺便一提,JavaScript中把字符串转换成JSON对象的方法
//JSON.parse(str)
II.后端响应AJAX请求的代码
以SpringMVC为例
首先要注意几点 :
1).springMVC中Ajax请求无需为Controller方法return跳转地址.因为异步请求还是在原页面局部刷新,并不会跳转页面.所以即使给方法返回类型设置为void也没问题!
//方法返回类型设置为void也无妨
@RequestMapping("/ajaxTest")
public void ajaxTest(int num1, int num2, HttpServletResponse response) {
try {
//设置字符集编码
response.setCharacterEncoding("UTF-8");
//创建PrintWriter对象,
PrintWriter writer = response.getWriter();
Integer resInteger = num1*num2;
//用PrintWriter对象的write()方法将数据写入HTTP response body中,JS中XMLHttpRequest对象的responseText会接收到该数据
writer.write(resInteger.toString());
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
2).@ResponseBody和@RequestBody的用法要了解
| 使用位置 | 作用 | |
| @ResponseBody | Controller层方法的上边 |
使用该注解后,方法的返回结果将直接写入响应体(HTTP response body)中, 而不再走视图解析器(把返回值解析为跳转路径) |
| @RequestBody | Controller层方法的参数类型前 | 将请求体的数据使用HttpMessageConverter解析,然后封装到形参上 |
在AJAX中,主要使用@ResponseBody把数据转换为JSON格式返回给前端,@RequestBody把前端传入的JSON格式数据封装到JavaBean中(配合jackson-databind实现)
3).前台发送json格式数据时,必须引入jackson-databind,用于把接受到的json格式数据转化为POJO
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.0</version>
</dependency>
后台代码实例 :
@RequestMapping("/getRealName")
@ResponseBody //设置@ResponseBody后,该方法不再走视图解析器,即使返回String也不会被视图解析器拦截
public User result1(@RequestBody User user) { //@RequestBody把请求体中的数据封装到POJO中
User u = ts.getRealName(user);
//返回User类型对象,会被自动解析成JSON格式字符串并发回给前端
return u;
}
是否使用@RequestBody和@ResponseBody看你自己的需求,用不到的话就不必使用.
f