【Ajax技术】解决XHR与中文乱码问题

简介:
还是我们那个测试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="校验" onclick="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的编码方式进行解码,就得到了最原始的中文信息。
转载请注明出处:http://blog.csdn.net/acmman/article/details/47755723
相关文章
|
6月前
|
XML 前端开发 JavaScript
AJAX 前端开发利器:实现网页动态更新的核心技术
**AJAX** 允许网页在不刷新的情况下更新内容,实现异步与服务器交换数据。通过JavaScript的XMLHttpRequest对象,可发送和接收数据。当用户触发事件(如点击),函数向服务器发送GET请求,服务器响应后更新指定HTML部分。AJAX并非编程语言,而是利用浏览器内置对象、JavaScript和DOM技术。核心是XMLHttpRequest对象,它有多种方法(如`open()`和`send()`)和属性(如`onreadystatechange`、`readyState`和`status`)来处理请求和响应。
117 2
AJAX 前端开发利器:实现网页动态更新的核心技术
|
6月前
|
设计模式 前端开发 JavaScript
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
49 0
|
6月前
|
XML JSON 前端开发
JavaWeb----Ajax技术
JavaWeb----Ajax技术
78 0
|
6月前
|
前端开发 JavaScript API
Ajax技术的秘密揭秘:异步传输,高效交互
Ajax技术的秘密揭秘:异步传输,高效交互
|
4天前
|
JSON 前端开发 JavaScript
java-ajax技术详解!!!
本文介绍了Ajax技术及其工作原理,包括其核心XMLHttpRequest对象的属性和方法。Ajax通过异步通信技术,实现在不重新加载整个页面的情况下更新部分网页内容。文章还详细描述了使用原生JavaScript实现Ajax的基本步骤,以及利用jQuery简化Ajax操作的方法。最后,介绍了JSON作为轻量级数据交换格式在Ajax应用中的使用,包括Java中JSON与对象的相互转换。
12 1
|
3月前
|
前端开发 Java UED
告别页面刷新时代:Struts 2 Ajax技术揭秘,轻松实现动态加载,Web应用焕然一新!
【8月更文挑战第31天】在Web应用开发中,用户体验至关重要。为减少页面刷新带来的不适,Ajax技术应运而生。Struts 2作为流行的Java EE框架,通过内置的Ajax支持简化了无刷新页面动态加载的实现。本文通过对比传统请求响应模式,展示了Struts 2如何轻松实现Ajax功能,提升了用户体验和开发效率,并灵活地实现了数据交换。然而,使用Ajax时还需注意SEO和跨域请求等局限性。
40 0
|
5月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
5月前
|
数据采集 Web App开发 前端开发
技术心得记录:如何用JAVA爬取AJAX加载后的页面(转载)
技术心得记录:如何用JAVA爬取AJAX加载后的页面(转载)
|
6月前
|
前端开发 搜索推荐 安全
AJAX和CSR(客户端渲染)是Web开发中常用的两种技术
【5月更文挑战第8天】AJAX提升用户体验,减轻服务器压力,但对搜索引擎不友好且增加开发复杂度,易引发安全问题。CSR提供快速响应和交互性,改善用户体验,但首屏加载慢,搜索引擎支持不足,同样面临安全挑战。两者各有适用场景,需按项目需求选择。
55 0
|
6月前
|
XML 前端开发 JavaScript
【JavaScript技术专栏】JavaScript网络请求与Ajax技术
【4月更文挑战第30天】Ajax是Web开发中实现动态数据更新的关键技术,允许不刷新页面即从服务器获取数据。它结合了HTML/CSS、DOM、XML/JSON和JavaScript。`XMLHttpRequest`是传统的Ajax实现方式,而`fetch` API是现代、简洁的替代选项。Ajax应用实例展示了如何使用fetch在搜索框输入时异步获取并显示结果,提升了用户体验。掌握这些技术对前端开发者至关重要。
65 0