环境
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博客] |
