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

来源：互联网发布：易语言编程实例教程编辑：程序博客网时间：2024/05/17 08:08

环境

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 {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {doPost(req, resp);}@Overrideprotected 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 + "可以使用");}}}

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, Safarixmlhttp = new XMLHttpRequest();} else {// code for IE6, IE5xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}var name = document.getElementById("name").value;xmlhttp.onreadystatechange = function() {//对象的状态切换的时候会调用此方法if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ //判断服务器端返回的状态码是不是200var 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博客]