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

环境

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,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 + "可以使用");
		}
		
	}
	
}

register_ajax.html

<!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">

		<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		<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" onblur="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

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

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

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

解决 中文乱码代码

//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");

//只要编码一致，一般不会出现乱码问题


	@Wentasy 博文仅供参考，欢迎大家来访。如有错误之处，希望批评指正。原创博文如需转载请注明出处，谢谢 :) [CSDN博客]

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

环境

问题

解决

运行效果

解决中文乱码代码

相关文章