javaweb——ajax原理及js方式实现

1、Ajax

异步刷新，在不影响页面整体的情况下刷新局部数据，例如：视频点赞数量、播放量等

2、实现

js：XMLHttpRequest对象
XMLHttpRequest对象的方法：
open( 方法名( 提交方式：get/post ), 服务器地址：true ); 与服务器建立链接
send();
get: send(null);
post: send( 参数值 );

setRequestHeader( header, value );
			get: 不需要设置此方法
			post: 需要设置
						a. 如果请求元素中包含__文件__
								setRequestHeader( "Content-Type", "multipart/form-data" );
						b. 如果请求元素中不包含__文件__
								setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );

readystate
readystate表示XMLHttpRequest对象发送的HTTP请求状态，共有五种状态

状态值	简介
0	表示XMLHttpRequest 对象没有初始化
1	表示XMLHttpRequest 对象已经开始发送请求， 已经执行了open()方法并完成了相关资源的准备
2	表示XMLHttpRequest 对象已经将请求发送完毕， 已经执行了send()方法来发送请求，但是还没有收到响应
3	表示XMLHttpRequest 对象开始读取响应信息，已经接收到HTTP响应的头部信息，但是还没有将响应体接收完毕
4	表示XMLHttpRequest 对象将响应信息全部读取完毕

status
status表示HTTP响应中的状态码。

状态码	含义
200	服务器正常响应
400	无法找到请求的资源
403	没有访问权限
404	访问的资源不存在
500	服务器内部错误，可能是代码错误

小结
XMLHttpRequest对象的属性
readystate：请求状态， 只有 4 代表请求完毕
status：响应状态， 只有 200 代表响应正常
onreadystatechange： 回调函数
responseText： 响应格式为 String
responseXML： 响应格式为 XML

3、代码：post方式提交

前端代码

	function submitData() {
		var phoneNum = document.getElementById("num").value;
		xmlhttprequest = new XMLHttpRequest();
		
		// 回调函数，用于接收服务端返回信息
		xmlhttprequest.onreadystatechange = callBack;
		
		// 设置传输方式、目的地址
		xmlhttprequest.open("post","AjaxTextServlet",true);
		// 设置post方式头信息
		xmlhttprequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		// 发送数据(格式为 name=data)
		xmlhttprequest.send("phoneNum="+phoneNum);
	}
	
	function callBack(){
		// 若请求状态码和响应状态码都无异常
		if(xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200){
			var data = xmlhttprequest.responseText; // 通过字符串格式获取返回数据
			if(data=="true"){
				alert("号码已存在");
			}else{
				alert("注册成功");
			}
		}
	}

	vphoneNumber:<input type="text" id="num" />
	<input type="button" value="submit" onclick="submitData()" />

servlet代码

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=UTF-8");
		
		// 通过name=data中的name获取对应的data
		String phoneNum = request.getParameter("phoneNum");
		PrintWriter write = response.getWriter();
		if("110".equals(phoneNum)) {
			write.write("true");
		}else {
			write.write("false");
		}
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

4、get方式提交（大部分代码一样，这里只给出修改部分）

JavaScript修改部分

	function submitData() {
		var phoneNum = document.getElementById("num").value;
		xmlhttprequest = new XMLHttpRequest();
		
		// 回调函数，用于接收服务端返回信息
		xmlhttprequest.onreadystatechange = callBack;
		
		// 设置传输方式、目的地址
		xmlhttprequest.open("post","AjaxTextServlet?phoneNum="+phoneNum,true);
		xmlhttprequest.send(null); // get
	}

PS：这个例子可能不太能体现出来ajax异步刷新的特性，但可以通过观察地址栏发现，提交数据时，页面并没有跳转