day51(监听器,ajax)

web

监听器

• 第一种监听
  (1). 实现HttpSessionBindingListener接口
  
  (2). 重写相关方法
  注意: 在哪个类中实现了该接口,就会监听哪个类
  当这个类对象被设置session中时,会自动调用valueBound()方法,当这个类对象从session中移除时,会自动调用valueUnBound()方法
  

• 第二种监听
  (1)创一个类去实现HttpSessionListener接口(不一定是User类了,专门的监听类)
  (2)重写相关方法
  
  (3)web.xml中配置监听器
  

ajax实现用户验证

//将name提交到后台进行校验(js版的ajax)
//(1)创建XMLHttpRequest对象
var xhr=createXmlHttpRequest();
//(2)创建回调函数(数据成功提交到后台,并且正确返回的话,会自动调用的一个方法:该方法中可以携带后台返回的相关数据)
xhr.onreadystatechange=callback;//callback名字可以自定义(回调函数的名字)
//(3)初始化XMLHttpRequest组件
//var url="userServlet?name="+name;//发送到后台的servlet地址
//xhr.open("GET",url,"true");//第三个参数指的是是否开启异步请求
//(4)发送请求
//xhr.send(null);
//使用post方式提交
var url="userServlet";
xhr.open("POST",url,"true");
xhr.setRequestHeader( "Content-Type","application/x-www-form-urlencoded" );
var d="name="+name;
xhr.send(d);
//(5)在回调函数中处理返回的结果
function callback(){
	//如果这两个状态都满足以下情况,则表示正确发送请求并正确读取到后台返回的响应数据
	if(xhr.readyState==4 && xhr.status==200){
		//获取响应回来的数据
		var data=xhr.responseText;
		//如果date返回的是false,说明验证正确,返回true,则验证不正确
		if(data=="false"){
			s1.innerHTML="用户可用!";
		}else{
			s1.innerHTML="该用户名已存在!";
		}
	}/* else{
		alert("系统正忙!请稍后再试!")
	} */
	}

使用jquery的ajax实现用户验证

1. 导入jquery的包
   

2. 在script标签中写jquery代码

    //页面加载事件
    $(function(){
    $("#u").blur(function(){//失去焦点事件
    	//获取用户名
    	var name=$(this).val();
    	if(name==""){
    		$("#s1").html("用户名不能为空!");
    	}else{
    		//alert(name);
    		$.ajax({
    			"url"	:	"userServlet",	//提交请求的路径
    			"data"	:	"name="+name,	//请求携带的数据
    			"dataType"	:	"text",		//预计后台返回的数据类型
    			"type"	:	"GET",			//提交请求的方式
    			"success"	:	callback,	//成功之后的回调函数
    			"error"	:function (){
    				alert("系统繁忙,请稍后再试")
    			}
    		});
    		function callback(data){
    			if(data=="false"){
    				$("#s1").html("用户可用!");
    			}else{
    				$("#s1").html("用户名已存在!");
    			}
    		}
    	}
    });
    });