【Ajax技术】解决XHR与中文乱码问题
服务端的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的编码方式进行解码,就得到了最原始的中文信息。
转载请注明出处:http://blog.csdn.net/acmman/article/details/47755723
【Ajax技术】解决XHR与中文乱码问题相关推荐
- jquery.ajax的url中传递中文乱码问题的解决方法
jquery.ajax的url中传递中文乱码问题的解决方法 JQuery JQuery默认的contentType:application/x-www-form-urlencoded 这才是JQuer ...
- ajax传输json数据格式乱码_解决Ajax加载JSon数据中文乱码问题
一.问题描述 使用zTree的异步刷新父级菜单时,服务器返回中文乱码,但项目中使用了SpringMvc,已经对中文乱码处理,为什么还会出现呢? 此处为的异步请求的配置: Java代码 async: { ...
- 解决Ext的中文乱码问题
设置正确的Content-Type以解决Ext的中文乱码问题 1.前后台所有文件统一用utf-8编码方式. 2.在Request Headers中设置Content-Type:application/ ...
- java解决properties中中文乱码问题
Java解决properties中中文乱码的问题 Properties文件介绍 与Properties文件的前世今生 native2ascii.exe的使用 首先编写配置文件 实验 修改测试代码进行更 ...
- php运行显示中文乱码,如何解决PHP界面显示中文乱码的问题
如何解决PHP界面显示中文乱码的问题 发布时间:2020-07-14 15:19:00 来源:亿速云 阅读:74 作者:Leah 这期内容当中小编将会给大家带来有关如何解决PHP界面显示中文乱码的问题 ...
- 使用过滤器(Filter)解决请求参数中文乱码问题(复杂方式)
前述: 在写这篇笔记之前,对笔记中的设计模式进行介绍: 本篇笔记中将要使用到的设计模式是:装饰(包装)设计模式 (1)装饰(包装)设计模式口诀: ①定义一个类,实现被装饰对象的接口 ②定义一个成员变量 ...
- ASP+Access中文乱码的解决方法,ASP中文乱码,asp乱码问题
确保编码声明正确(例:时尚淘女之家http://www.tao36524.com) 如果您使用的是国外空间,默认是西欧而不是GB2312,你可以通过强制为GD2312的方式! 在数据提取页面的第一行代 ...
- 完美解决Informix的中文乱码问题
完美解决Informix的中文乱码问题 参考文章: (1)完美解决Informix的中文乱码问题 (2)https://www.cnblogs.com/equation/p/5545967.html ...
- 解决jenkins控制台中文乱码问题
解决jenkins控制台中文乱码问题 参考文章: (1)解决jenkins控制台中文乱码问题 (2)https://www.cnblogs.com/gaigaige/p/6835084.html 备忘 ...
最新文章
- oracle本地验证,Oracle 本地验证和密码文件
- java equals 区别_Java中equals和==的区别
- 暴走英雄坛html5游戏在线玩,暴走英雄坛h5
- Ogre wiki 中级教程1 动画,点之间行走及四元数的基本应用
- 盲人如何学计算机编程,盲人程序员是如何编程的?
- linux后台运行python程序 nohup不挂断
- coreboot学习0:二度相逢是初识
- Electron 打包Mac安装包代码签名问题解决方案Could not get code signature for running application
- php 中抽象类的作用,解释PHP中的抽象类。
- 以太网的分层架构_以太网矩阵(Ethernet Fabric)简介
- java生成 折线图
- 斯坦福NLP名课带学详解 | CS224n 第6讲 - 循环神经网络与语言模型(NLP通关指南·完结)
- 禁止Tencent Upd
- 计算机固态硬盘256g,1t(后悔买256g的固态硬盘了)
- CSR蓝牙4.0与 APT-X高保真音频技术
- UE4 解决半透明材质显示错误
- ABP VNext学习日记22
- adjacency list(邻接表)神物
- 用Java测试电脑速度的小方法
- 解决 Agent JAR loaded but agent failed to initialize