Ajax介绍

什么是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