什么是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}));
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