AJAX练习-以GET和POST方式检查注册用户名是否存在

最新推荐文章于 2019-12-30 21:44:16 发布

zfs592645357

最新推荐文章于 2019-12-30 21:44:16 发布

阅读量677

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/zfs592645357/article/details/40621851

版权

JavaWeb 专栏收录该内容

71 篇文章 0 订阅

订阅专栏

以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 }

zfs592645357

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX练习-以GET和POST方式检查注册用户名是否存在

以GET和POST方式检查注册用户名是否存在一、以GET方式1、jsp 1 import="java.util.*" pageEncoding="utf-8"%> 2 3 4 5 6 7 8 9 10 输入用户名：光标移出后，立即查检结果11 12
复制链接

扫一扫