AJAX原理及实现用户注册

1、AJAX

1.1 AJAX相关概念

（1） 为什么要有AJAX

有需求实现刷新页面中的局部,但是传统的请求方式只能通过刷新整个页面达到改变内容的目的,于是就又了AJAX。用于（时间倒计时,点赞功能,邮箱用户名验证等等）

（2） AJAX特点

异步加载,局部刷新
1.通过发送请求,获取响应的一种浏览器交互技术
2.异步:ajax请求,并不阻断我们继续对浏览器进行操作.

（3） Ajax的使用

1.通过xmlhttp技术,发送请求,xmlhttp可以在javascript和js脚本中直接执行（或jquery）；
2.发送ajax请求,需要使用xmlhttprequest对象。浏览器的内核中内置了js的解析器,而js中自己引入了xmlhttp技术（可以直接使用）；

3. 使用ajax需要定义四个参数，用逗号隔开。
url(要提交的selvet位置)、
data(要发送的数据，可以是json格式)、
callback(回调函数，要执行的内容)、
type(返回值的类型，xml，json，text，html等等)

1.2 AJAX实现

1. 传统用户注册方式：需要输入用户名，点击提交按钮之后，才会去查询数据库中是否已存在此账户名；查询之后将结果反馈。（效率慢，且需要刷新整个页面）
2. 使用AJAX方式：当输入用户名，鼠标移开此输入框时，就会去查询数据库，并直接在局部页面上反馈结果。（效率高，只需要刷新局部页面）

1.3 用户注册实现步骤

（1） 新建jsp页面
JavaScript和jquery都可以实现ajax；此处使用jquery（需要导入jar包）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>












	
	

		
		
		
		

		
	

（2）新建logincheck.js文件

$(function(){
	/*用户名提交到js文件中，通过鼠标移出事件*/
	$("#checkname").blur(function(){
		/*使用ajax需要定义四个参数，用逗号隔开。
		分别是url(要提交的selvet位置)、
		data(要发送的数据，可以是json格式)、
		callback(回调函数，要执行的内容)、
		type(返回值的类型，xml，json，text，html等等)*/
		
		var checkname = $("#checkname").val();
		
		$.post("checkusername",{"checkname":checkname},
		function(data){
			if(data == "exists" ){
				/*将返回的数据显示在jsp页面*/
				$("#checkinfo").css("color","red").html(data);
				$("#checksubmit").prop("disabled",true);
			}else{
				$("#checkinfo").css("color","black").html(data);
				/*用户名已经存在，则无法点击注册按钮*/
				$("#checksubmit").prop("disabled",false);
			}
		},
		"text"
		)
	});
});

（3）新建controller类
通过业务方法查询数据库是否存在此用户，并返回 text 结果。

@RequestMapping("/checkusername")
private void check(HttpServletRequest request, HttpServletResponse response){
		// 检查用户名是否存在，并且必须以PrintWriter返回
		try {
			PrintWriter writer = response.getWriter();
			//拿到js文件中的用户名
			String checkname = request.getParameter("checkname");
			//调用业务层方法查询
			User user = new LoginServer().checkname(checkname);
			if(user!=null) {
				
				writer.write("exists");
			}else {
				
				writer.write("ok");
			}
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}