关于AJAX POST数据编码
在最近学习AJAX中,通过POST方式发送的数据在服务器端接收的时候通过检测,发现中文编码不能很好的正确读取,全是乱码。怎么解决这个问题,查询了一下,得知如下知识
Javascript默认编码方式Unicode,这样传递到服务器端的数据不能够正确读取,尽管采用Unicode解码,有些郁闷。采用了几种方式,无功。
在JAVA环境下解决这个问题,如下所示:
一。客户端获取的值使用 escape() JS函数进行编码
二。服务器端调用一个已经写好的函数进行解码操作,这个JAVA解码函数如下:
这样,服务器端就可以完好的解码过来。
例子如下所示:
注:js\request.js 脚本文件那如下:
Javascript默认编码方式Unicode,这样传递到服务器端的数据不能够正确读取,尽管采用Unicode解码,有些郁闷。采用了几种方式,无功。
在JAVA环境下解决这个问题,如下所示:
一。客户端获取的值使用 escape() JS函数进行编码
二。服务器端调用一个已经写好的函数进行解码操作,这个JAVA解码函数如下:
1 public static String unescape(String src){
2 StringBuffer tmp = new StringBuffer();
3 tmp.ensureCapacity(src.length());
4 int lastPos=0,pos=0; char ch;
5 while (lastPos<src.length()){
6 pos = src.indexOf("%",lastPos);
7 if (pos == lastPos){
8 if (src.charAt(pos+1)=='u'){
9 ch = (char)Integer.parseInt(src.substring(pos+2,pos+6),16);
10 tmp.append(ch);
11 lastPos = pos+6;
12 }else{
13 ch = (char)Integer.parseInt(src.substring(pos+1,pos+3),16);
14 tmp.append(ch);
15 lastPos = pos+3;
16 }
17 }else{
18 if (pos == -1){
19 tmp.append(src.substring(lastPos));
20 lastPos=src.length();
21 }else{
22 tmp.append(src.substring(lastPos,pos));
23 lastPos=pos;
24 }
25 }
26 }
27 return tmp.toString();
28 }
2 StringBuffer tmp = new StringBuffer();
3 tmp.ensureCapacity(src.length());
4 int lastPos=0,pos=0; char ch;
5 while (lastPos<src.length()){
6 pos = src.indexOf("%",lastPos);
7 if (pos == lastPos){
8 if (src.charAt(pos+1)=='u'){
9 ch = (char)Integer.parseInt(src.substring(pos+2,pos+6),16);
10 tmp.append(ch);
11 lastPos = pos+6;
12 }else{
13 ch = (char)Integer.parseInt(src.substring(pos+1,pos+3),16);
14 tmp.append(ch);
15 lastPos = pos+3;
16 }
17 }else{
18 if (pos == -1){
19 tmp.append(src.substring(lastPos));
20 lastPos=src.length();
21 }else{
22 tmp.append(src.substring(lastPos,pos));
23 lastPos=pos;
24 }
25 }
26 }
27 return tmp.toString();
28 }
这样,服务器端就可以完好的解码过来。
-。提交数据页面
<!--必须指定输出语言格式,这是js获取的字符串的正确显示的关键-->
<%@ page language="java" contentType="text/html;charset=GBK"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题文档</title>
<script language="javascript" src="js\request.js">
</script>
<script language="javascript">
function postData(){
var url = "testpage.jsp?name=yongboy&time=" + new Date().getTime();
var temp = "你好,测试中文中";
//下面这一步是必须!
var sinfo = escape( temp ); //获得输入的值
//提交数据
post_request( url, sinfo, "text" );
}
//AJAX出现结果,处理变化,在 js\request.js 中已经定义
function pageChange( responseText ){
var div = document.getElementById( "show" );
div.innerHTML = responseText;
}
</script>
</head>
<body>
<input type="submit" name="Submit" value="提交" onclick="postData()" />
<div id="show"></div>
</body>
</html>
二。后台处理数据页面
<!--注意,下面制定该页面的文字编码是必须的!-->
<%@page language="java" contentType="text/html;charset=GBK"%>
<!--引入命名空间-->
<%@ page import="handle.*" %>
<%
//清除缓存
response.setHeader("Cache-Control", "no-cache");
//读取从客户端发送过来的数据
StringBuffer sb = new StringBuffer();
BufferedReader br = request.getReader();
String len = null;
if( ( len = br.readLine() ) != null ){
sb.append( len );
}
String body = sb.toString();
//注:下面的步骤是必须的
body = StringUtil.unescape( body );
System.out.println( "body1 = " + body );
out.write( body );
%>
<!--必须指定输出语言格式,这是js获取的字符串的正确显示的关键-->
<%@ page language="java" contentType="text/html;charset=GBK"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题文档</title>
<script language="javascript" src="js\request.js">
</script>
<script language="javascript">
function postData(){
var url = "testpage.jsp?name=yongboy&time=" + new Date().getTime();
var temp = "你好,测试中文中";
//下面这一步是必须!
var sinfo = escape( temp ); //获得输入的值
//提交数据
post_request( url, sinfo, "text" );
}
//AJAX出现结果,处理变化,在 js\request.js 中已经定义
function pageChange( responseText ){
var div = document.getElementById( "show" );
div.innerHTML = responseText;
}
</script>
</head>
<body>
<input type="submit" name="Submit" value="提交" onclick="postData()" />
<div id="show"></div>
</body>
</html>
二。后台处理数据页面
<!--注意,下面制定该页面的文字编码是必须的!-->
<%@page language="java" contentType="text/html;charset=GBK"%>
<!--引入命名空间-->
<%@ page import="handle.*" %>
<%
//清除缓存
response.setHeader("Cache-Control", "no-cache");
//读取从客户端发送过来的数据
StringBuffer sb = new StringBuffer();
BufferedReader br = request.getReader();
String len = null;
if( ( len = br.readLine() ) != null ){
sb.append( len );
}
String body = sb.toString();
//注:下面的步骤是必须的
body = StringUtil.unescape( body );
System.out.println( "body1 = " + body );
out.write( body );
%>
例子如下所示:
注:js\request.js 脚本文件那如下:
var http_request = false;
function init_request(){
http_request = false;
//??????????XMLHttpRequest????
if(window.XMLHttpRequest) { //Mozilla ??????
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//????MiME????
http_request.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) { // IE??????
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // ??????????????????????
window.alert("????????XMLHttpRequest????????.");
return false;
}
}
function get_request( url ){
init_request();
http_request.onreadystatechange = processRequest;
http_request.open("GET", url, true);
http_request.send(null);
}
function get_request( url, type ){
init_request();
if( type == "text" )
http_request.onreadystatechange = processRequest;
else if( type == "xml" )
http_request.onreadystatechange = processXmlRequest;
http_request.open("GET", url, true);
http_request.send(null);
}
//the user can custom the function
function get_request2( url, myProcess ){
init_request();
http_request.onreadystatechange = myProcess;
http_request.open("GET", url, true);
http_request.send(null);
}
function post_request( url, sinfo ) {//????????????????????????????????????
init_request();
http_request.onreadystatechange = processRequest;
http_request.open("POST", url, true);
http_request.setRequestHeader("Content-Length",sinfo.length);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
http_request.send(sinfo);
}
function post_request( url, sinfo, type ) {//????????????????????????????????????
init_request();
if( type == "text" )
http_request.onreadystatechange = processRequest;
else if( type == "xml" )
http_request.onreadystatechange = processXmlRequest;
http_request.open("POST", url, true);
// http_request.setRequestHeader("Content-Length",sinfo.length);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
http_request.send(sinfo);
}
//this function gave the user too much free to write his method
function post_request2( url, sinfo, myProcess ) {//????????????????????????????????????
init_request();
http_request.onreadystatechange = myProcess;
http_request.open("POST", url, true);
http_request.setRequestHeader("Content-Length",sinfo.length);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
http_request.send(sinfo);
}
// text
function processRequest() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
pageChange( http_request.responseText );
} else {
alert("connect the server wrong!");
}
}
}
//xml
function processXmlRequest() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
pageChange( http_request.responseXml );
} else {
alert("connect the server wrong!");
}
}
}
贴出来,为了记忆,也为了他人吧。
function init_request(){
http_request = false;
//??????????XMLHttpRequest????
if(window.XMLHttpRequest) { //Mozilla ??????
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//????MiME????
http_request.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) { // IE??????
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // ??????????????????????
window.alert("????????XMLHttpRequest????????.");
return false;
}
}
function get_request( url ){
init_request();
http_request.onreadystatechange = processRequest;
http_request.open("GET", url, true);
http_request.send(null);
}
function get_request( url, type ){
init_request();
if( type == "text" )
http_request.onreadystatechange = processRequest;
else if( type == "xml" )
http_request.onreadystatechange = processXmlRequest;
http_request.open("GET", url, true);
http_request.send(null);
}
//the user can custom the function
function get_request2( url, myProcess ){
init_request();
http_request.onreadystatechange = myProcess;
http_request.open("GET", url, true);
http_request.send(null);
}
function post_request( url, sinfo ) {//????????????????????????????????????
init_request();
http_request.onreadystatechange = processRequest;
http_request.open("POST", url, true);
http_request.setRequestHeader("Content-Length",sinfo.length);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
http_request.send(sinfo);
}
function post_request( url, sinfo, type ) {//????????????????????????????????????
init_request();
if( type == "text" )
http_request.onreadystatechange = processRequest;
else if( type == "xml" )
http_request.onreadystatechange = processXmlRequest;
http_request.open("POST", url, true);
// http_request.setRequestHeader("Content-Length",sinfo.length);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
http_request.send(sinfo);
}
//this function gave the user too much free to write his method
function post_request2( url, sinfo, myProcess ) {//????????????????????????????????????
init_request();
http_request.onreadystatechange = myProcess;
http_request.open("POST", url, true);
http_request.setRequestHeader("Content-Length",sinfo.length);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
http_request.send(sinfo);
}
// text
function processRequest() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
pageChange( http_request.responseText );
} else {
alert("connect the server wrong!");
}
}
}
//xml
function processXmlRequest() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
pageChange( http_request.responseXml );
} else {
alert("connect the server wrong!");
}
}
}