AJAX简单示例——实现检测用户名是否可用

快来打我* 2022-03-27 05:46 211阅读 0赞

### 环境 ###

MyEclipse 8.6 + JDK 1.6 + Tomcat 6.0

### 问题 ###

AJAX简单示例——实现检测用户名是否可用。说明：本文没有涉及数据库，只是一个模拟。

### 解决 ###

CheckNameServlet.java

package com.test.servlet;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import com.test.dao.MemberDao;
    import com.test.dto.MemberDto;
    import com.test.service.MemberService;
    import com.test.service.impl.MemberServiceImpl;
    
    public class CheckNameServlet extends HttpServlet {
    
    	@Override
    	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
    			throws ServletException, IOException {
    		doPost(req, resp);
    	}
    
    	@Override
    	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
    			throws ServletException, IOException {
    		String name = req.getParameter("name");
    		
    		req.setCharacterEncoding("utf-8");
    		resp.setContentType("text/html;charset=utf-8");
    		PrintWriter out = resp.getWriter();
    		//将从客户端得到的字符串进行utf-8编码
    		name = java.net.URLDecoder.decode(name,"UTF-8");
    		 
    		System.out.println(name);
    		
    		if("123".equals(name)) {
    			out.println("用户名：" + name + "已经被使用");
    		} else {
    			out.println("用户名：" + name + "可以使用");
    		}
    		
    	}
    	
    }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    	<head>
    		<title>register.html</title>
    
    		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    		<meta http-equiv="description" content="this is my page">
    		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    		
    		<script type="text/javascript">
    		function check() {
    			//获得异步通信对象
    			var xmlhttp;
    			if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    				xmlhttp = new XMLHttpRequest();
    			} else {// code for IE6, IE5
    				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    			}
    			var name = document.getElementById("name").value;
    			xmlhttp.onreadystatechange = function() {//对象的状态切换的时候会调用此方法
    				if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ //判断服务器端返回的状态码是不是200
    					var info = document.getElementById("info");
    					var txt = xmlhttp.responseText;//获得服务器端返回的数据
    					info.innerHTML = txt;
    				}
    			}
    			var url = "CheckNameServlet.do?name="+name;
    			//两次编码处理中文乱码
    			url = encodeURI(url);//把URI字符串采用UTF-8编码格式转化成escape格式的字符串 (空格%20)
    			url = encodeURI(url);//将字符串再编码成ISO8859-1的格式
    			xmlhttp.open("GET", url, true);
    			xmlhttp.send();
    		}
    </script>
    	</head>
    
    	<body>
    		<h4>
    			用户注册---AJAX验证用户名是否可用
    		</h4>
    		<form action="register.do" method="post">
    			用  户  名：
    			<input type="text" id="name" name="username" οnblur="check();">
    			<br />
    			密        码：
    			<input type="text" name="password">
    			<br />
    			确认密码：
    			<input type="text" name="password2">
    			<br />
    			
    			<input type="submit" value="提交">
    		</form>
    		
    		<div id="info" style="color:red;"></div>
    		
    		<div>
    			
    		</div>
    	</body>
    </html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
    <web-app version="2.5" 
    	xmlns="http://java.sun.com/xml/ns/javaee" 
    	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
      <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
      </welcome-file-list>
      
      <servlet>
      	<servlet-name>CheckNameServlet</servlet-name>
      	<servlet-class>com.test.servlet.CheckNameServlet</servlet-class>
      </servlet>
      
      <servlet-mapping>
      	<servlet-name>CheckNameServlet</servlet-name>
      	<url-pattern>/CheckNameServlet.do</url-pattern>
      </servlet-mapping>
    
    </web-app>

### 运行效果 ###

地址栏输入：[http://localhost:8088/ajax\_demo/register\_ajax.html][http_localhost_8088_ajax_demo_register_ajax.html]

当输入“123”，当移开用户名输入框提示“用户名：123已经被使用”。

![1362397557_5684.jpg][]

当输入“Wentasy”，当移开用户名输入框提示“用户名：Wentasy可以使用”。

![1362397578_2468.jpg][]

当输入中文，如我的姓名“温国兵”时，当移开用户名输入框提示“用户名：温国兵可以使用”。这是解决了中文乱码问题后的结果。

![1362397600_7234.jpg][]

### 解决中文乱码代码 ###

//JavaScript函数中队URL进行编码
    var url = "CheckNameServlet.do?name="+name;
    //两次编码处理中文乱码
    url = encodeURI(url);//把URI字符串采用UTF-8编码格式转化成escape格式的字符串 (空格%20)
    url = encodeURI(url);//将字符串再编码成ISO8859-1的格式
    
    //Servlet中对得到的字符串进行编码
    //将从客户端得到的字符串进行utf-8编码
    name = java.net.URLDecoder.decode(name,"UTF-8");
    
    //只要编码一致，一般不会出现乱码问题

<table style="border-bottom:#48c5db 5px double; border-left:#48c5db 5px double; padding-bottom:5px; background-color:black; padding-left:5px; border-spacing:0; width:100%; padding-right:30px; height:90px; border-top:#48c5db 5px double; border-right:#48c5db 5px double; padding-top:5px"> 
 <tbody> 
  <tr> 
   <td><img alt="katoon" src="https://img-my.csdn.net/uploads/201301/06/1357456262_5409.jpg" style="height:80px"></td> 
   <td style="text-align:right"><a title="新浪微博求粉 ^_^" href="http://weibo.com/wentasy" rel="nofollow"><img title="新浪微博求粉 ^_^" alt="Sina" src="https://img-my.csdn.net/uploads/201210/26/1351182273_5476.png.thumb.jpg" style="height:40px"></a> &nbsp;<a title="我的CSDN博客——HelloWorld" href="http://blog.csdn.net/Wentasy" rel="nofollow"><img title="我的CSDN博客——HelloWorld" alt="CSDN" src="https://img-my.csdn.net/uploads/201210/26/1351182268_8254.png.thumb.jpg" style="height:40px"></a></td> 
  </tr> 
  <tr> 
   <td style="text-align:right; font-family:microsoft yahei; color:white; font-size:12px"> <a title="我的CSDN博客——HelloWorld" href="http://blog.csdn.net/Wentasy" rel="nofollow">@Wentasy</a> 博文仅供参考，欢迎大家来访。如有错误之处，希望批评指正。原创博文如需转载请注明出处，谢谢 :) [CSDN博客]</td> 
  </tr> 
 </tbody> 
</table>

[http_localhost_8088_ajax_demo_register_ajax.html]: http://localhost:8088/ajax_demo/register_ajax.html
[1362397557_5684.jpg]: https://img-my.csdn.net/uploads/201303/04/1362397557_5684.jpg
[1362397578_2468.jpg]: https://img-my.csdn.net/uploads/201303/04/1362397578_2468.jpg
[1362397600_7234.jpg]: https://img-my.csdn.net/uploads/201303/04/1362397600_7234.jpg