ajax中文乱码问题的总结
本章解决在AJAX中常见的中文问题，分析中文乱码产生的缘由，以及如何解决乱码问题javascript
1. HTTP协议的编码规定html
在HTTP协议中，浏览器不能向服务器直接传递某些特殊字符，必须是这些字符进行URL编码后再进行传送。url编码遵循的规则：java
将空格转换为(+)web
对0-9，a-z，A-Z之间的字符保持不变。ajax
对于全部其余的字符，用这个字符的当前字符集编码在内存中的十六进制格式表示，并在每一个十六进制字节前加上一个百分号%。例如，字符“+”用%2B表示，字符“=”用%3D表示，字符“&”用%26表示，字符“国”用%B9%FA表示注意，同一个中文字符在不一样的字符集编码方式下，在内存中的编码值也是不一样的，一个字符的URL编码是针对字符在内存中的码值而言的，采用不一样编码的同一个字符的URL编码结果是不一样的。浏览器
2. encodeURI()与encodeURIComponent()函数服务器
javaScript中提供了两个函数来对字符进行URL编码：encodeURI()与encodeURIComponent(),二者的区别在于,encodeURI函数不会对如下的字符进行处理： “! @ # $ & * ( ) = : / ; ? + ' ”，而encodeURIComponent函数会对更多的字符进行处理好比 URI的组成部分 “/” 就会被encodeURIComponent进行处理。这两个方法对传递的值进行URL编码，过程是先找到字符所对应的UTF-8编码，好比“张三”两个字的UTF-8编码是”0xE5BCA0E4B889”(前面的是零x，表示是16进制编码).“张”是”0xE5BCA0”,”三”是”0xE4B889”,那么被转换后的结果就app
是”%E5%BC%A0%E4%B8%89”,注意这个转换结果与网页的编码没有任何关系,由于这两个函数老是拿到字符所对应的UTF-8码，而后再进行URL编码的。也就是说无论网页是GBK的编码仍是UTF-8的编码，转换的结果都同样。函数
因此若是咱们发送给服务器的请求包含有中文或者其它比较特殊的字符如空格“+”等符号的时候，就就须要使用者两个函数对字符进行URL编码。post
3. 封装Ajax请求代码，供后面使用。
新建一个web项目，在web项目中添加一个ajax.js文件，内容包含两个函数以下:
createXmlHttp（）
function createXmlHttp() {
if (window.XMLHttpRequest) {
//alert("非IE浏览器");
return new XMLHttpRequest();
} else if (window.ActiveXObject && !window.XMLHttpRequest){
var aVersion = ["MSXML2.XMLHttp.6.0",
"MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0",
"MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp",
"Microsoft.XMLHttp"];
for (var i = 0; i < aVersion.length; i++) {
try {
var oXmlHttp = new ActiveXObject(aVersion[i]);
//alert("IE浏览器版本"+aVersion[i]);
return oXmlHttp;
}
catch (ex) {}
}
}
throw new Error("建立XMLHttpRequest对象出错!");
}
doGet(url，callBack)函数,该函数有两个参数，未来要发送AjAX GET请求能够直接调用该方法。 第一个参数表示要发送的请求的URL地址，第二个是回调函数，回调函数须要处理从服务端返回的数据。
/**
* @param url 请求的URL地址
* @param callBack 回调函数
* @return
*/
function doGet(url,callBack){
var request=createXmlHttp();
request.onreadystatechange=function(){
if(request.readyState==4 && request.status==200){
//注意咱们定义回调函数的时候要多加一个参数接收返回的数据
callBack(request.responseText);
}
};
request.open("GET",url);
request.send(null);
}
4. 编写页面，该页面使用的字符集是UTF-8编码:
HTML部分:
<body>
<h3>验证用户名是否存在</h3>
输入用户名:<input type="text" id="userName" /> <span id="warning"></span><br />
<input type="button" value="验证" onclick="checkUserName('userName')" />
</body>
JavaScript部分:
首先引入ajax.js文件,而后编写当按钮点击的时候的要执行的代码:
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
function checkUserName(tagID){
//获取文本框中输入的值
var userName=document.getElementById(tagID).value;
//对中文进行URL编码
①var url="ajax.do?"+encodeURI("userName="+userName);
//data是从服务端返回来的数据
doGet(url,function(data){
document.getElementById("warning").innerHTML=data;
});
}
</script>
页面效果:
当在文本框中输入“张三”后，点击验证后，javaScript代码执行到 ① 以后，url的值就变成了 “ajax.do?userName=%E5%BC%A0%E4%B8%89”，能够经过firefox浏览器的firebug插件进行断点调试，获得发送的url的值。
这里为何没有使用encodeURIComponent（）函数呢？这是由于encodeURIComponent函数会将”=”变成“%3D”,“？”变成” %3F”, 若是有多个参数的话会用到“&”符号，一样也会被转换，而这些字符不用转换也能够提交，因此这里使用了encodeURI,这个函数不会对”?”,”=”,”&”进行转换。后面的“%E5%BC%A0%E4%B8%89”就是“张三”两个汉字按照UTF-8字符集进行URL编码以后的结果
5. 在服务端取得发送过来的数据
编写一个Servlet，这个Servlet的映射是 /ajax.do,其中的doGet方法以下:
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//告诉客户端响应的信息的编码格式是UTF-8
response.setContentType("text/html;charset=UTF-8");
②String userName=request.getParameter("userName");
PrintWriter out=response.getWriter();
out.print("您要验证的用户名是:"+userName+",该用户名可使用");
}
咱们在②处放置一个断点，而后以断点的方式启动Tomcat，提交后程序进入断点处咱们发现取得的userName的值是: “??????”,为何会是乱码？
咱们分析一下，客户端Ajax想服务器发送的请求是
”ajax.do?userName=%E5%BC%A0%E4%B8%89”,那么服务器上的
request.getParameter（）方法在取参数值的时候，首先要进行URL解码(其实就是去掉字符当中的“%“)，解码以后将只剩下的字节部分按照Tomcat在内部默认的ISO-8859-1字符集的方式转换成字符串，因而乱码开始在这里出现 了。由于发送过来的字节在去掉%后剩下的字节应该按照UTF-8转换字符串才对，可是却采用了ISO-8859-1，因而乱码产生了。
那么知道缘由以后，解决起来就很容易了。既然是按照ISO-8859-1转换获得的字符串，那咱们就获得这个字符串还原为ISO-8859-1的字节，而后再将字节按照正确的UTF-8转换为字符串，这样就获得了正确的字符了，修改Servlet中的代码以下:
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//告诉客户端响应的信息的编码格式是UTF-8
response.setContentType("text/html;charset=UTF-8");
System.out.println("进入Servlet");
String userName=request.getParameter("userName");
userName=new String(userName.getBytes("iso-8859-1"),"UTF-8");
System.out.println(userName);
PrintWriter out=response.getWriter();
out.print("您要验证的用户名是:"+userName+",该用户名可使用");
}
客户端响应为:
6. 试一试将提交方式改为POST方式
在ajax.js文件中添加一个函数，该函数专门用于提交POST请求
/**
*
* @param url 要提交的URL
* @param submitData 要提交的数据
* @param callBack 回调函数
* @return
*/
function doPost(url,submitData,callBack){
var request=createXmlHttp();
request.onreadystatechange=function(){
if(request.readyState==4 && request.status==200){
//注意咱们定义回调函数的时候要多加一个参数接收返回的数据
callBack(request.responseText);
}
};
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.open("POST",url);
request.send(submitData);
}
修改页面上的javaScript代码:
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
function checkUserName(tagID){
//获取文本框中输入的值
var userName=document.getElementById(tagID).value;
//data是从服务端返回来的数据
doPost("ajax.do","userName="+userName,function(data){
document.getElementById("warning").innerHTML=data;
});
}
</script>
当咱们发送post请求的时候，尽管咱们为请求头设置了
application/x-www-form-urlencoded,可是发送的数据并无进行URL编码，而传统的将form表单的提交方式设置成post，在提交的时候会自动进行URL编码。
因此Ajax中的post请求时将数据原封不动的传递到了服务器上，因此只须要调用reqeust.setCharacterEncoding() 设置正确的编码集后，就能够取出数据了。
7. 最佳解决方案
前面的方式咱们虽然分别解决了GET方式和POST方式的中文问题，可是须要分开进行处理，而且对于不一样的服务器，默认的编码集是不一样的，这样对于GET方式咱们进行的手工转码就不能通用了。
那么不论是Get请求仍是POST，有没有能够统一的解决方案？咱们能够作以下的处理:
将提交的数据使用javaScript的encodeURI()进行两次URL编码
服务端进行一次URL 解码便可
这种方式的优势是与客户端网页的编码集无关，与服务器的默认编码集无关，并且可以兼容几乎全部的浏览器。
下面以GET方式为例来理解分析全过程：
修改javaScript代码为:
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
function checkUserName(tagID){
//获取文本框中输入的值
var userName=document.getElementById(tagID).value;
//data是从服务端返回来的数据
var url="ajax.do? userName="+encodeURI(encodeURI(userName));
doGet(,function(data){
document.getElementById("warning").innerHTML=data;
});
}
</script>
Servlet代码修改成:
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//告诉客户端响应的信息的编码格式是UTF-8
response.setContentType("text/html;charset=UTF-8");
String userName=request.getParameter("userName");
userName=URLDecoder.decode(userName,"UTF-8");
System.out.println(userName);
PrintWriter out=response.getWriter();
out.print("您要验证的用户名是:"+userName+",该用户名可使用");
}
运行后，在各类浏览器中都没有出现乱码问题。换成POST方式，也没有出现乱码问题。页面若是换成GBK编码，也没有出现乱码问题.
为何这种方式没有出现问题，为何要进行两次 encodeURI?咱们只须要跟踪一下提交的数据便可:
假如咱们提交的是 “张三”:
①咱们第一次进行encodeURI以后的结果为:
%E6%9D%8E%E5%9B%9B
②第二次进行encodeURI以后的结果为:
%25E6%259D%258E%25E5%259B%259B
③咱们对比一下两个值，发现第一次URL编码后中间有%，而第二次URL编码后将第一次编码结果中的%替换成了%25,因此最终发送的数据为:
ajax.do?userName=%25E6%259D%258E%25E5%259B%259B
④在服务端的Servlet中，咱们经过调用request.getParameter(“userName”)取值的时候，getParameter方法会对%25E6%259D%258E%25E5%259B%259B进行URL解码，解码后的结果为%E6%9D%8E%E5%9B%9B,也就是将%25换成了%,那么此时Tomcat服务器按照默认的iso-8859-1转换的字符串的时候根本就没有作任何变换，仍是%E6%9D%8E%E5%9B%9B
⑤当咱们再次进行URL解码的时候即: URLDecoder.decode(userName,"UTF-8"),此时去掉其中的%后变成了E69D8EE59B9B,这正好是”张三”的UTF-8编码，因此使用UTF-8码转换成字符串“张三“.
从整个过程看来，这种方式的优点在于与页面的编码无关，也与服务器所使用的编码集无关。咱们须要作的只须要将提交的数据（不论是POST的数据仍是GET的数据），进行两次encodeURI便可。
- 1. struts2 ajax json 中文乱码的问题
- 2. 解决中文乱码问题----总结
- 3. Intellij Idea12 中文乱码问题总结
- 4. SpringMVC ajax中文返回乱码问题
- 5. jquery ajax post 中文乱码问题
- 6. Android Studio3.6中文乱码问题总结（build窗口乱码，编辑器乱码）
- 7. IDEA中乱码问题总结
- 8. Netbeans中文乱码问题汇总
- 9. IntelliJ IDEA中文乱码问题汇总
- 10. Python中文乱码问题总结汇总
- 更多相关文章...
- • R 绘图 - 中文支持 - R 语言教程
- • Redis悲观锁解决高并发抢红包的问题 - 红包项目实战
- • Scala 中文乱码解决
- • PHP Ajax 跨域问题最佳解决方案
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. js中 charCodeAt
- 2. Android中通过ViewHelper.setTranslationY实现View移动控制（NineOldAndroids开源项目）
- 3. 【Android】日常记录：BottomNavigationView自定义样式，修改点击后图片
- 4. maya 文件检查 ui和数据分离 （一）
- 5. eclipse 修改项目的jdk版本
- 6. Android InputMethod设置
- 7. Simulink中Bus Selector出现很多? ? ?
- 8. 【Openfire笔记】启动Mac版Openfire时提示“系统偏好设置错误”
- 9. AutoPLP在偏好标签中的生产与应用
- 10. 数据库关闭的四种方式