Ajax技术--检查用户名是否唯一

男娘i 2024-02-17 23:39 48阅读 0赞

index.jsp界面：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        
        <title>My JSP 'index.jsp' starting page</title>
    	<meta http-equiv="pragma" content="no-cache">
    	<meta http-equiv="cache-control" content="no-cache">
    	<meta http-equiv="expires" content="0">    
    	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    	<meta http-equiv="description" content="This is my page">
    	
    	
    	<style>
    	    	#div1 {display: none;width: 100px;background: red;}
    	    </style>
    		<script>
    	  window.onload = function(){
    	    var oBtn = document.getElementById("btn1");
    	    var oUsername = document.getElementsByName("username")[0];
    	    
    	    oBtn.onclick = function(){
    	      checkUser(oUsername.value);
    	    }
    	    
    	    function checkUser(username){
    	       if(username == ""){
    	         alert ("请输入用户名");
    	       }else {
    	         createRequest("checkUser.jsp?user="+username);
    	       }
    	    }
    	    
    	    function createRequest(url){
    	       var request = null;
    	       if(window.XMLHttpRequest){
    	       	request = new XMLHttpRequest()
    	       }
    	       else if(window.ActiveXObject){
    	       	try{
    	       		request = new ActiveXObject("Msxml.XMLHTTP");
    	       	}catch(e){
    	       		try{
    	       			request = new ActiveXObject("Microsoft.XMLHTTP");
    	       		}catch(e){
    	       			//TODO handle the exception
    	       		}
    	       	}
    	       }
    	       
    	       if(!request){
    	       	alert('不能创建XMLHttpRequest实例');
    	       	return false;
    	       }
    	       request.open('get',url,true);
    	       request.send(null);
    	       request.onreadystatechange = function(){
    	       	if(request.readyState == 4){
    	       		if(request.status == 200){ 
    	       			document.getElementById("div1").innerHTML = request.responseText ;
    	       			document.getElementById("div1").style.display = 'block';
    	       		}
    	       	}
    	       };
    	     }
    
    	  }
    	</script>
    	
      </head>
      
      <body>
        <form method = "get" action = "" name = "form1">
        用户名：<input name = "username" type = "text" size ="32"><br><br>
        <input name = "btn" type = "button" value = "检测"  id="btn1">
        </form>
        <div id ="div1"></div>
      </body>
    </html>

checkUser.jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    
    <%
    String [] userList = {"明日科技","mr","mrsoft","wgh"};
    String user = new String (request.getParameter("user").getBytes("ISO-8859-1"),"utf-8");
    
    Arrays.sort(userList); //对数组进行排序
    
    int result = Arrays.binarySearch(userList,user);  //若存在则返回索引值，否则返回-1
    System.out.println(result);
    if(result > -1){
      out.print(result+":很抱歉，该用户名已经被注册");
    }
    else {
      out.print(result+":恭喜您，该用户名没有被注册");
    }
     %>