以GET和POST方式检查注册用户名是否存在
一、以GET方式
1、jsp
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 4 <html> 5 <head> 6 <script type="text/javascript" src="../js/ajax_2.js"></script> 7 </head> 8 9 <body> 10 输入用户名：<input type="text"/>光标移出后，立即查检结果 11 <hr/> 12 <div id="div"> 13 <!-- 显示结果 --> 14 </div> 15 <script type="text/javascript"> 16 var inputElement = document.getElementsByTagName("input")[0]; 17 //alert(inputElement.nodeName); 18 inputElement.onblur = function(){ 19 //alert("光标失去焦点"); 20 //取得用户输入的用户名 21 var username = this.value; 22 username = encodeURI(username);//对于IE浏览器有用，对于非IE浏览器，这句可以不加。 23 //alert(username); 24 //创建ajax引擎对象 25 var xhr = createXHR(); 26 //alert("测试xhr是否创建成功："+xhr); 27 //设置函数监听 28 xhr.onreadystatechange = function(){ 29 if(xhr.readyState==4){ 30 //alert(xhr.readState); 31 if(xhr.status==200){ 32 //获取服务器传来的文本信息 33 var msg = xhr.responseText; 34 //alert(msg); 35 //将信息写入div区域 36 document.getElementById("div").innerHTML = msg; 37 } 38 } 39 }; 40 //准备以GET方式请求发送请求 41 xhr.open("get","/myday31/GetServlet?username="+username+"&time="+new Date().toString()); 42 //真正发送请求 43 xhr.send(null); 44 }; 45 46 </script> 47 </body> 48 </html>
2、js
1 //创建ajax的方法 2 function createXHR(){ 3 var xhr = null; 4 try{ 5 xhr = new ActiveXObject("microsoft.xmlhtp"); 6 }catch(e){ 7 try{ 8 xhr = new XMLHttpRequest(); 9 }catch(e){ 10 window.alert("您的浏览器过老"); 11 } 12 } 13 return xhr; 14 }
3、Servlet
1 import java.io.IOException; 2 3 import javax.servlet.ServletException; 4 import javax.servlet.http.HttpServlet; 5 import javax.servlet.http.HttpServletRequest; 6 import javax.servlet.http.HttpServletResponse; 7 8 public class GetServlet extends HttpServlet { 9 10 public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException { 11 System.out.println("GetServlet::doGet()"); 12 //获取用户名 13 String username = request.getParameter("username"); 14 byte[] buf = username.getBytes("ISO8859-1"); 15 username = new String(buf,"utf-8"); 16 String message = null; 17 if("小胜".equals(username)){ 18 message = "<font color=red size=15>"+"该用户已存在"+"</font>"; 19 }else{ 20 message = "<font color=red size=15>"+"可以注册"+"</font>"; 21 } 22 response.setContentType("text/html;charset=utf-8"); 23 response.getWriter().write(message); 24 } 25 public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException { 26 27 } 28 29 }
二、以POST方式
1、jsp
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 3 <html> 4 <head> 5 </head> 6 7 <body> 8 输入用户名：<input id = "text" type="text"/>光标移出后，立即查检结果 9 <hr/> 10 <div id="div"> 11 <!-- 显示结果 --> 12 </div> 13 <script type="text/javascript"> 14 //1、添加事件函数 15 document.getElementById("text").onblur = function(){ 16 17 //2、获取用户名 18 var inputElement = document.getElementsByTagName("input")[0]; 19 var username = inputElement.value; 20 username = encodeURI(username); 21 //3、创建ajax引擎对象 22 var xhr = createXHR(); 23 //5、从ajax引擎取得响应结果 24 xhr.onreadystatechange = function(){ 25 26 if(xhr.readyState==4){ 27 if(xhr.status=200){ 28 //以字符串形式接收 29 //var msg = xhr.responseText; 30 //alert(msg); 31 var xmlDoc = xhr.responseXML; 32 //alert(xmlDoc); 33 var resElement = xmlDoc.getElementsByTagName("res")[0]; 34 //alert(resElement.nodeName); 35 var msg = resElement.innerHTML; 36 //alert(msg); 37 document.getElementById("div").innerHTML = msg ; 38 } 39 } 40 }; 41 //4、异步发送请求 42 xhr.open("post","/myday31/GetServlet4",true); 43 xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); 44 xhr.send("username="+username+"&time="+new Date().toString);//这里不要写?，写了就不对了 45 46 }; 47 48 //创建xhr文件函数 49 function createXHR(){ 50 var xhr = null; 51 try{ 52 //ie 53 xhr = new ActiveXObject("microsoft.xmlhttp"); 54 }catch(e){ 55 xhr = new XMLHttpRequest(); 56 } 57 return xhr; 58 } 59 </script> 60 </body> 61 </html>
2、Servlet
1 import java.io.IOException; 2 import java.io.PrintWriter; 3 4 import javax.servlet.ServletException; 5 import javax.servlet.http.HttpServlet; 6 import javax.servlet.http.HttpServletRequest; 7 import javax.servlet.http.HttpServletResponse; 8 9 public class GetServlet4 extends HttpServlet { 10 11 public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException { 12 13 } 14 public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException { 15 request.setCharacterEncoding("utf-8"); 16 System.out.println("GetServlet::doPost()"); 17 //获取用户名 18 String username = request.getParameter("username"); 19 System.out.println(username); 20 String message = null; 21 if("小胜".equals(username)){ 22 message = "<img src='../images/MsgError.gif'/>"; 23 }else{ 24 message = "<img src='../images/MsgSent.gif'/>"; 25 } 26 response.setContentType("text/xml;charset=utf-8"); 27 PrintWriter pw = response.getWriter(); 28 pw.write("<root>"); 29 pw.write("<res>"); 30 pw.write(message); 31 pw.write("</res>"); 32 pw.write("</root>"); 33 } 34 35 }