AJAX处理汉字乱码的问题
JSP中乱码产生的原因是web容器(Tomcat)默认使用ISO-8859-1进行编码的,而我们可能使用的是UTF-8,GBK,GB2312等编码方式进行jsp编写的,因此需要一个转换器进行转换或者修改默认编码方式,这里我主要用转换器+过滤器完成自动转换功能.
客户端脚本文件：
View Code
/* * name:getTransport * create XMLHttpRequest */ var xmlhttp=null; function getHttpRequest() { try { xmlhttp=new ActiveXObject('Msxml2.XMLHTTP'); } catch(e) { try { xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); } catch(e1) { xmlhttp=new XMLHttpRequest(); } } } function httpGet(url,method,data) { if(xmlhttp==null) getHttpRequest(); xmlhttp.open(method,url +"?"+data,true);//有回调函数时为true,没有时false xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlhttp.setRequestHeader("Content-Length",data.length); xmlhttp.onreadystatechange=getCallback; xmlhttp.send (null); } function getCallback() { if(xmlhttp.readyState==4) { if(xmlhttp.status==200) { var xmlDoc=xmlhttp.responseText; data=eval(xmlDoc); var tableFormat="<table rules='all' ><tr><td class='tablehead'>编号</td><td class='tablehead'>姓名</td><td class='tablehead'>性别</td><td class='tablehead'>电话</td><td class='tablehead'>地址</td><td class='tablehead'>星座</td><td class='tablehead' colspan='2'>操作</td></tr>"; for(var key in data) { tableFormat+="<tr><td>"+data[key].id+"</td><td>"+data[key].name+"</td><td>"+data[key].sex+"</td><td>"+data[key].phone+"</td><td>"+data[key].address+"</td><td>" +data[key].constellation+"</td><td><a target='"+data[key].id+"' title='修改' onclick='openedit(this)'><img src='img/edit.jpg'></a></td><td><a target='"+data[key].id+"' title='删除' onclick='opendel(this)'><img src='img/del.jpg' ></a></td></tr>"; } tableFormat+="</table>"; document.getElementById("showout").innerHTML=tableFormat; } else { document.getElementById("showout").innerHTML="AJAX Server error,code:"+xmlhttp.status+"!"; } } } function httpPut(url, method, data) { if(xmlhttp==null) getHttpRequest(); xmlhttp.open(method,url,true); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlhttp.setRequestHeader("Content-Length", data.length); xmlhttp.onreadystatechange=putCallback; xmlhttp.send(data); } function putCallback() { var panel=document.getElementById("showsuccess"); if (xmlhttp.readyState==4) { if(xmlhttp.Status >=400 && xmlhttp.Status <=599) panel.innerHTML="Error Occurred : "& xmlhttp.Status & "-" & xmlhttp.statusText; else { panel.innerHTML=xmlhttp.responseText; httpGet("myServlet", "GET", "name="+"获得数据"); } setTimeout(hideinfo,1000); } } function httpPost(url, method, data) { if(xmlhttp==null) getHttpRequest(); xmlhttp.open(method,url,true); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlhttp.setRequestHeader("Content-Length",data.length); xmlhttp.onreadystatechange=postCallback; xmlhttp.send(data); } function postCallback() { var panel=document.getElementById("showsuccess"); if(xmlhttp.readyState==4) { if(xmlhttp.status==200) { if(xmlhttp.Status >=400 && xmlhttp.Status <=599) panel.innerHTML="Error Occurred : "& xmlhttp.Status & "-" & xmlhttp.statusText; else { panel.innerHTML=xmlhttp.responseText; httpGet("myServlet", "GET", "name="+"获得数据"); } setTimeout(hideinfo,1000); } } } function httpDelete(url, method, data) { if(xmlhttp==null) getHttpRequest(); xmlhttp.open(method,url+"?"+data,true); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlhttp.setRequestHeader("Content-Length", data.length); xmlhttp.onreadystatechange=deleteCallback; xmlhttp.send(null); } function deleteCallback() { if (xmlhttp.readyState==4) { if(xmlhttp.Status >=400 && xmlhttp.Status <=599) document.getElementById("showsuccess").innerHTML="Error Occurred : "& xmlhttp.Status & "-" & xmlhttp.statusText; else { document.getElementById("showsuccess").innerHTML=xmlhttp.responseText; httpGet("myServlet", "GET", "name="+"获得数据"); } setTimeout(hideinfo,1000); } } function getAjaxJson() { httpGet("myServlet", "GET", "name="+"获得数据"); } function addAjaxJson() { var panel=document.getElementById("addpanel"); document.getElementById("title").innerHTML="增加学生信息选项卡"; panel.style.top='50px'; panel.style.left='200px'; panel.style.display='block'; document.getElementById("addedit").value="提交"; flag=true; } function closepanel() { document.getElementById("addpanel").style.display='none'; } function addrecord() { var panel=document.getElementById("showsuccess"); var s= new Object(); s.Id=id; s.Name=document.getElementById("name").value; s.Sex=document.getElementById("sex").value; s.Phone=document.getElementById("tel").value; s.Address=document.getElementById("address").value; s.Constellation=document.getElementById("star").value; if(s.Name=="") { panel.innerHTML="学生姓名不能为空"; setTimeout(hideinfo,1000); return; } if(s.Sex=="") { panel.innerHTML="学生性别不能为空"; setTimeout(hideinfo,1000); return; } if(s.Phone=="") { panel.innerHTML="学生电话不能为空"; setTimeout(hideinfo,1000); return; } if(s.Address=="") { panel.innerHTML="学生家庭不能为空"; setTimeout(hideinfo,1000); return; } if(s.Constellation=="") { panel.innerHTML="学生星座不能为空"; setTimeout(hideinfo,1000); return; } var data= JSON.stringify(s); if(flag==true) { httpPut("myServlet","PUT",data); } else { httpPost("myServlet","POST",data); } } function openedit(obj) { var panel=document.getElementById("addpanel"); document.getElementById("title").innerHTML="更新学生信息选项卡"; panel.style.top='50px'; panel.style.left='200px'; panel.style.display='block'; document.getElementById("addedit").value="保存"; for(var key in data) { if(data[key].id==obj.target) { id=data[key].id; document.getElementById("name").value=data[key].name; document.getElementById("sex").value=data[key].sex; document.getElementById("tel").value=data[key].phone; document.getElementById("address").value=data[key].address; document.getElementById("star").value=data[key].constellation; break; } } flag=false; } function opendel(obj) { var mid=null; for(var key in data) { if(data[key].id==obj.target) { mid=data[key].id; break; } } if(confirm("你确定要删除数据吗？")) httpDelete("myServlet","DELETE","id="+mid); } function hideinfo() { document.getElementById("showsuccess").innerHTML=''; }
首先，项目中所有的源文件(.class,*js,*.css)的编码方式改为UTF-8。
1. AJAX GET和DELETE方法中文乱码处理.
配置tomcat的server.xml 的<Connector>的URIEncoding="UTF-8",它只对拼接在url后面的参数有作用，保证它是采用指定的编码。
参照：http://www.blogjava.net/leekiang/archive/2007/10/17/153685.html
<Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443" URIEncoding="UTF-8"/>
在Servlet的doGet()和doDelete()方法中直接得到传递的参数.
String name=request.getParameter("name").toString();
2. AJAX POST和PUT方法中使用过滤器(所有编码方式为过滤器中设置的编码方式)
继承过滤器类实现它的方法的EncodeFilter.java：
View Code
package commons; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; import javax.servlet.ServletRequest; import javax.servlet.ServletResponse; public class EncodeFilter implements Filter { private String encoding = ""; public void destroy() { // TODO Auto-generated method stub } public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { // TODO Auto-generated method stub request.setCharacterEncoding(encoding); chain.doFilter(request, response); } public void init(FilterConfig config) throws ServletException { // TODO Auto-generated method stub encoding = config.getInitParameter("encoding"); //get encoding from web.xml } }
配置工程的web.xml文件，加入<filter> </filter>和<filter-mapping> </filter-mapping>的相关配置
注意：<filter-class>commons.EncodeFilter</filter-class>中的包名.类名，与你实现的过滤器类要一致。
View Code
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"> <display-name>jsonexample</display-name> <servlet> <servlet-name>myServlet</servlet-name> <servlet-class>com.myServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>myServlet</servlet-name> <url-pattern>/myServlet</url-pattern> </servlet-mapping> <filter> <filter-name>encoding</filter-name> <filter-class>commons.EncodeFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> </filter> <filter-mapping> <filter-name>encoding</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> </web-app>
在Servlet的doPut()和doPost()方法中直接获取传递的数据即可。
BufferedReader sis = request.getReader();
String data=sis.readLine().toString();
除了过滤器方法，还可以在Servlet的doPut()和doPost()方法中用
request.setCharacterEncoding("UTF-8")的作用是设置对客户端请求进行重新编码的编码，此方法对doGet()和doDelete()方法无效。
这种存在一个问题就是每次doPut()和doPost()方法中都要设置请求的编码，所以一劳永逸的方法还是设置过滤器。
这样就完美解决了AJAX开发乱码的问题，如有问题，请留言。
