神奇的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"是后边对不同查询结果进行响应)

账 号: 



 

  1.2  创建XMLHttpRequest 对象

  1.3 设置状态改变回调函数

  1.4 设置请求方式和路径

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

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();
}