神奇的Ajax---实现数据的交互刷新,界面其他部分不变

在以前的学习中,在实现数据的刷新时,都是转向其他页面,对界面进行刷新.除了数据部分其他根本就不用改变, 这样其实增加了没必要的负荷工作,也不符合现实的使用.

Ajax简介: Ajax并不是一种新技术,而是整合几种现有技术--JavaScript、Xml、Css.

Ajax技术和传统的Web开发技术异同:

1. 发送方式: 传统的是用表单、超链接； 而Ajax是用js

2. 服务器的响应方式: 传统是页面响应(转向) ; 而Ajax只响应数据

3.客户端(页面)处理相应的方式: 传统的是用EL、JSTL对数据进行解析； Ajax用js 解析数据

下边是一个功能演示实例:

在用户登录界面, 当用户输入用户名离开该行后, 后台给出该用户名是否可用。（与后台数据库进行交流，查询是否有对应的数据名，并使用Ajax进行响应）

思路:

1. Web前台: 使用js函数进行操作

  1.1 先将对应html中要进行数据响应的行设置一个  name( οnblur="checkUser()"是js函数对应的触发事件  js 通过该name得到参数; id="msg"是后边对不同查询结果进行响应)

<div>
账&nbsp号: 
<input id="username" class="input" name="username" onblur="checkUser()"/>
<span id="msg"></span><br/></span><br/> 
</div>

  1.2  创建XMLHttpRequest 对象

  1.3 设置状态改变回调函数

  1.4 设置请求方式和路径

  1.5 处理响应内容( 回调函数)

<script type="text/javascript">	
	var xhr;
	function checkUser(){
		//创建XMLHttpRequest对象
		try{
		//1.1先尝试使用标准方式创建(现在主流用法)
			xhr = new XMLHttpRequest();
		}catch(e){
		//1.2 IE浏览器六之前的版本 不支持 直接new;
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//2. 设置状态回调函数
		xhr.onreadystatechange = cb;
		var username = document.getElementById("username");
		//3. 设置请求方式和路径
		//xhr.open("GET","UserCheckServlet?un="+username.value);
		xhr.open("POST","UserCheckServlet");
		//POST 请求必须加这一行代码(消息头 格式)
		xhr.setRequestHeader("Content-type",
                            "application/x-www-form-         urlencoded");
		if (typeof username == 'undefined') {
			alter(111111111111);
		}
		//4. 发送请求
		//xhr.send();
		xhr.send("un="+username.value);
	}
	
	//5.处理响应请求--回调函数
	function cb(){
		//alert(xhr.readyState);
		//完成相应
		if(xhr.readyState == 4){
			if(xhr.status == 200){
				var resText = xhr.responseText;
				var msg = document.getElementById("msg");
				if(resText == "T"){
					msg.style.color = "red";
					msg.innerHTML = "账号已存在 ×";
				}else{
					msg.style.color = "green";
					msg.innerHTML = "账号可以使用 √";
				}
			}	
		}
	}
</script>

2. 将参数传至后台Servlet进行业务处理

public class UserCheckServlet extends HttpServlet{
	public void doGet(HttpServletRequest request, HttpServletResponse response)                                                                                                       throws IOException,ServletException {
		PrintWriter out = response.getWriter();
		//1. 处理参数
		String username = request.getParameter("un");
		//System.out.println(username);
		//2. 业务处理(根据名字查询是否有该用户记录)
		UserService userService = new UserServiceImpl();
		User user = userService.getUser(username);
		//3. 响应数据
		if(user != null) {
			out.print("T");
		}else {
			out.print("F");
		}
		out.close();
}