还是我们那个测试ajax的应用(服务端的Servlet、静态页面的html与实现ajax的javascript脚本文件)
服务端的Servlet

import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxServer extends HttpServlet {

protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doGet(httpServletRequest, httpServletResponse);
}

protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
try{

httpServletResponse.setContentType("text/html;charset=utf-8");
PrintWriter out = httpServletResponse.getWriter();

//inte用来记录验证次数
Integer inte = (Integer) httpServletRequest.getSession().getAttribute("total");
int temp = 0;
if (inte == null) {
temp = 1;
} else {
temp = inte.intValue() + 1;
}
httpServletRequest.getSession().setAttribute("total",temp);


//1.取参数
String old = httpServletRequest.getParameter("name");
String name =old;
System.out.println(old+" oooooooooooooooooo");
//2.检查参数是否有问题
if(old == null || old.length() == 0){
out.println("用户名不能为空");
} else{

if(name.equals("hpu")){
//4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段,而不是将一个新的页面发送给用户
//写法没有变化,本质发生了改变
out.println("用户名[" + name + "]已经存在,请使用其他用户名, " + temp);
} else{
out.println("用户名[" + name + "]尚未存在,可以使用该用户名注册, " + temp);
}
}
} catch(Exception e){
e.printStackTrace();
}
}
}


静态页面

ajaxXml.html:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>用户校验ajax实例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/verify.js"></script>
</head>

<body>
<h1> 用户校验ajax实例</h1><br>
请输入用户名:<br/>
<!-- ajax不需要使用表单进行数据提交,因此不用写表单标签 -->

<!-- ajax不需要name属性,只需要一个id的属性 -->
<input type="text" id="username"/>
<input type="button" value="校验" οnclick="verify()"/>
<!-- 这个div用于存放服务器返回的信息,开始为空 -->
<!-- id属性定义是为了利用dom的方式找到某一个节点,进行操作 -->
<div id="result">

</div>

</body>
</html>


verify.js:


function verify(){
var jqueryObj=$("#username");
var userName=jqueryObj.val();
$.get("AjaxServer?name="+userName,null,callback);

}

function callback(data){
var resultObj=$("#result");
resultObj.html(data);
}


当我们在静态页面端输入123的时候,返回的是:


用户名[123]尚未存在,可以使用该用户名注册, 1



当我们输入"中"的时候,返回的是:


用户名[??-]尚未存在,可以使用该用户名注册, 2



说明出现了中文乱码问题



剖析:


我们填写"中"之后,我们发现发送请求的url路径变成了:


​ http://localhost:8080/AjaxTrain/AjaxServer?name=%E4%B8%AD ​​ 它是按照UTF-8的方式转换为字节信息,一个“中”字,它按utf-8编码是3个字节。


(按照utf-8编码是一般浏览器指定的,如果在浏览器设置中取消,那么就会按照操作系统默认的编码方式去编码)


我们在Servlet中并没有将浏览器传过来的字节请求转化为字符数据并重新编码,所以导致了这个结果。



解决方法1(老方法):


在服务器端转换编码方式:


String name = new String(old.getBytes("iso8859-1"),"UTF-8");


这样转换可以的原因是tomcat服务器默认使用iso8859-1去编码得到的字节流变成字符流,这样我们将字符流以iso8859-1的方式解码为字节流,然后将解码后的字节流重新转码为UTF-8格式,就可以恢复中文。



在servlet加上这句代码后,输入"中"之后结果为:


用户名[中]尚未存在,可以使用该用户名注册, 1


说明转化成功。



如果仔细的话,可以看到,一些IE浏览器还会发生乱码情况。


我们还要专门为了部分IE浏览器去解决这个问题。


办法:


在页面显示的指定编码方式之外,在javascript脚本中对url进行编码:


verify.js:


function verify(){
	var jqueryObj=$("#username");
	var userName=encodeURI(jqueryObj.val());
	$.get("AjaxServer?name="+userName,null,callback);
}

function callback(data){
	var resultObj=$("#result");
	resultObj.html(data);
}


但是上面不是最完美的解决方法,因为我们在


String name = new String(old.getBytes("iso8859-1"),"UTF-8");中


iso8859-1是写死的,虽然各种服务器默认的编码方式是iso8859-1,但是一些


服务器人员会通过配置文件去修改它的默认编码方式,这个时候,我们就要去


修改我们的代码,非常不灵活,代码试用性不强。



解决方法2:


页面发出的数据做两次encodeURI:


verify.js:


function verify(){
	var jqueryObj=$("#username");
	var userName=encodeURI(encodeURI(jqueryObj.val()));
	$.get("AjaxServer?name="+userName,null,callback);
}

function callback(data){
	var resultObj=$("#result");
	resultObj.html(data);
}


服务器端:


String name=URLDecoder.decode(old,"UTF-8");
输入中文测试成功(包括IE)!



内部原理:


我们利用调试方式,去看看在js脚本文件中对url信息两次encodeURI有什么区别:


没做encodeURI:中


第一次encodeURI:%E4%B8%AD


第二次%E4%B8%AD:%25E4%25B8%25AD



第一次encodeURI把中这个数组分解成3个字节数组,每一个字节都对应一个16进制的表示法,


然后在他们面前加一个%。第二次encodeURI就会把前面的%转换成25再加上%。



而服务器的解码是如何进行?


我们给服务器的信息是%25E4%25B8%25AD,服务器正常解码之后的信息是%E4%B8%AD。(因为都是ASCII码中的字符,怎么解码都不会错)。之后我们再在我们的Servlet中使用Java的URLDecoder按照UTF-8的编码方式进行解码,就得到了最原始的中文信息。


​​