作? beansoft@126.com 2007.01.03
下蝲本文源码: ajaxform_gbk.zip 6KB
更新:
2007-01-03
修复?AJAXFormer 中第二个参数 resultDiv 处理不当的问?
增加了从服务器端q回脚本q加以执行的功能;
增加了表单提交后|络出错的错误显C功?
q些新功能都已经攑֜CZ面中了.
试通过: Resin 3.0.18, Tomcat 5.0.30, 5.5.20; 览? IE 6/Firefox 2.0.
上一文?JSP ?AJAX 的表单提交中文问题的单解x?/a> 主要是针?UTF-8 版本的进行处理的, 鉴于中国大陆地区大部分还是用 GBK ~码?JSP, 因此本文针?GBK 的实늻果进行介l?
有朋友提?当AJAX遭遇GBK的尴?/a> 里说?AJAX 使用 GBK ~码? 表单提交出Cؕ? 如前文所q? 只要全部采用 UTF-8 ~码, 是没有Q何问题的. 那么都用 GBK ?
首先要讲的是我们的文章还是一L原则: 可能少的改动原来的代码来解决中文ؕ码问? 所以本文的CZ没有用过滤器{方?
那么使用 GBK ~码到底有没有ؕ码问题呢?
W一个关键点是 AJAX 的表单提交代码必L的按照 HTTP 规范实现, 卌保持原来?GET/POST 方式不变, 也要保持里面的内容和览器提交的内容一怸? 以下内容摘自我编写的内部培训教材:
----------------- 引用开?-----------------
首先必须要介l一?HTTP 协议?GET, POST 的工作方?
当用户在Web览器地址栏中输入一个带有http://前缀的URLq按下Enter?或者在Web面中某个以http://开头的链接上单击鼠标,HTTP事务处理的第一个阶D?-建立q接阶段开始了.HTTP的默认端口是80.
随着q接的徏?HTTPp入了客户向服务器发送请求的阶段.客户向服务器发送的h是一个有特定格式的ASCII消息,其语法规则ؓ:
| 6KB |
| < Method > < URL > < HTTP Version > <\n> { <Header>:<Value> <\n>}* <\n> { Entity Body } |
h消息的顶端是h?用于指定Ҏ(gu),URL和HTTP协议的版?h行的最后是回R换行.Ҏ(gu)有GET,POST,HEAD,PUT,DELETE{?
在请求行之后是若q个报头(Header)?每个报头行都是由一个报头和一个取值构成的二元?报头和取g间以":"分隔;报头行的最后是回R换行. 常见的报头有Accept(指定MIME媒体cd),Accept_Charset(响应消息的编码方?,Accept_Encoding(响应消息的字W集),User_Agent(用户的浏览器信息){?
在请求消息的报头行之后是一个回车换?表明h消息的报头部分结?在这个\n之后是请求消息的消息实体(Entity Body).
Web服务器在收到客户hq作出处理之?要向客户发送应{消?与请求消息一?应答消息的语法规则ؓ:
| < HTTP Version> <Status Code> [<Message>]<\n> { <Header>:<Value> <\n> } * <\n> { Entity Body } |
应答消息的第一行ؓ状态行,其中包括了HTTP版本?状态码和对状态码q行短解释的消息;状态行的最后是回R换行.状态码?位数字组??c?
- 1XX 保留
- 2XX 表示成功
- 3XX 表示URL已经被移?
- 4XX 表示客户错误
- 5XX 表示服务器错?/li>
例如:415,表示不支持改媒体cd;503,表示服务器不能访?最常见的是200,表示成功.常见的报头有:Last_Modified(最后修Ҏ(gu)?,Content_Type(消息内容的MIMEcd),Content_Length(内容长度){?
在报头行之后也是一个回车换?用以表示应答消息的报头部分的l束,以及应答消息实体的开?
下面是一个应{消息的例子:
| HTTP/1.0 200 OK Date: Moday,07-Apr-97 21:13:02 GMT Server:NCSA/1.1 MIME_Version:1.0 Content_Type:text/html Last_Modified:Thu Dec 5 09:28:01 1996 Coentent_Length:3107 <HTML><HEAD><TITLE>...</HTML> |
那么 GET ?POST 有什么区? 区别是一个在 URL h里面附带了表单参数和? 一个是?HTTP h的消息实体中. 用下面的例子可以很容易的看到同样的数据通过GET和POST来发送的区别, 发送的数据?username=张三 :
GET 方式, 览器键?http://localhost?username=张三
| GET /?username=%E5%BC%A0%E4%B8%89 HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */* Accept-Language: zh-cn Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322) Host: localhost Connection: Keep-Alive |
POST 方式:
| POST / HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */* Accept-Language: zh-cn Content-Type: application/x-www-form-urlencoded Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322) Host: localhost Content-Length: 28 Connection: Keep-Alive username=%E5%BC%A0%E4%B8%89 |
比较一下上面的两段文字, (zhn)会发现 GET 方式把表单内Ҏ(gu)在前面的h头中, ?POST 则把q些内容攑֜h的主体中? 同时 POST 中把h?Content-Type 头设|ؓ application/x-www-form-urlencoded. 而发送的正文都是一L, 可以q样来构造一个表单提交正?
encodeURIComponent(arg1)=encodeURIComponent(value1)&encodeURIComponent(arg2)=encodeURIComponent(value2)&.....
? encodeURIComponent q回一个包含了 charstring 内容的新?String 对象QUnicode 格式Q， 所有空根{标炏V重音符号以及其他非 ASCII 字符都用 %xx ~码代替Q其?xx {于表示该字W的十六q制数?例如Q空D回的?"%20" ?字符的值大?255 的用 %uxxxx 格式存储。参?JavaScript ?encodeURIComponent() Ҏ(gu).
下面pZ下如何在 JavaScript 中执行一?GET 或?POST h. 如果(zhn)用q?Java, 那么(zhn)可能熟(zhn)下列的?java.net.URLConnection c进?POST 操作的代?参?Java Tip 34: POSTing via Java ):
| URL url; URLConnection urlConn; DataOutputStream printout; // URL of CGI-Bin or jsp, asp script. url = new URL ("somepage"); // URL connection channel. urlConn = url.openConnection(); // ...... // No caching, we want the real thing. urlConn.setUseCaches (false); // Specify the content type. urlConn.setRequestProperty("Content-Type", "application/x-www-form-urlencoded"); // Send POST output. printout = new DataOutputStream (urlConn.getOutputStream ()); String content = "name=" + URLEncoder.encode ("Buford Early") + "&email=" + URLEncoder.encode ("buford@known-space.com"); printout.writeBytes (content); printout.flush (); printout.close (); |
以上的代码向 somepage 发送了一?POST h, 数据?name = Buford Early, email = buford@known-space.com.
用JavaScript 来执?POST/GET h是同L原理, 下面的代码展CZ分别?XMLHttpRequest 对象?somepage ?GET ?POST 两种方式发送和上例相同的数据的具体q程:
GET 方式
| var postContent = "name=" + encodeURIComponent("Buford Early") + "&email=" + encodeURIComponent("buford@known-space.com"); xmlhttp.open("GET", "somepage" + "?" + postContent, true); xmlhttp.send(null); |
POST 方式
| var postContent = "name=" + encodeURIComponent("Buford Early") + "&email=" + encodeURIComponent("buford@known-space.com"); xmlhttp.open("POST", "somepage", true); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlhttp.send(postContent); |
x希望你已l能够理解如何用 JavaScript 中的 XMLHttpRequest 对象来执?GET/POST 操作, 剩下的工作就是?zhn)如何来构造这些提交的参数? 最后我l出一个将现有?form 提交代码修改为异步的 AJAX 提交的代?注意目前作者还不知道如何让 file 上传表单域也能异步上传文?. 首先L两个 JavaScript 函数:
// form - the form to submit |
函数 ajaxSubmitForm 表单要提交的内容进行封? 然后调用 ajaxSubmit 函数来执行真正的异步提交, 表单提交后所q回的结果则昄在给定的 DIV 容器中或者没有指定参数时?DOM 对象动态生成一?DIV 容器来显C结果ƈd到页面末? q样, 对原来的表单只需要改动一个地方就可以原来的表单提交改ؓ异步模式, 卛_ form 标签里加? onSubmit="ajaxSubmitForm(this);return false;" 卛_, return false 保表单不会被浏览器同步提交. 完整的例子请?a >q里.
----------------- 引用l束 -----------------
OK, 希望x为止(zhn)已l理解了如何?AJAX 来正的执行 GET/POST. 如果q个问题(zhn)解决了, 可是说后台的q问题和你直接通过表单提交几乎没有区别? q个Ҏ(gu)的具体封装已l在附g?ajax_common.js 中了.
x也该贴出来我们的 GBK ~码的客L面的内容了:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>AJAX Form Submit Test</title>
<script src='ajax_common.js'></script>
</head>
<body>
本页面的~码是中?<br/>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"><br/>
<b>试q的服务?</b><br/>
Resin 3.0.18<br/>
Tomcat 5.5.20<br/>
Tomcat 5.0.30<br/>
<h3>AJAX Form Submit Test</h3>
Fill the form and then click submit<br>
提交方式: POST<br>
<form method="POST" id="form1" name="form1"
action="form_action.jsp"
onSubmit="former.ajaxSubmitForm();return false;">
<p><input type="hidden" name="hidden1" value="hiddenValue">
text:<input type="text" name="textf&1" size="20" value="text文本&1">
checkbox:<input type="checkbox" name="checkbox1" value="ON" checked>
radio:<input type="radio" value="V1" checked name="radio1">
select:<select size="1" name="select1">
<option selected value="option1">D1</option>
</select>
<br>
<br>
<input type="submit" name="B1" value="submit">
<input type="reset" name="B2" value="reset">
</p>
</form>
提交方式: GET<br>
<form method="GET" id="form2" name="form2"
action="form_action.jsp"
onSubmit="former2.ajaxSubmitForm();return false;">
<p><input type="hidden" name="hidden1" value="hiddenValue">
text:<input type="text" name="text文本&2" size="20" value="text文本&2">
checkbox:<input type="checkbox" name="checkbox1" value="ON" checked>
radio:<input type="radio" value="V1" checked name="radio1">
select:<select size="1" name="select1">
<option selected value="option1">D1</option>
</select>
<br>
<br>
<input type="submit" name="B1" value="submit">
<input type="reset" name="B2" value="reset">
</p>
</form>
<div id="loading" style="display:none; position:absolute;
border:1px solid orange; height:20px; width:600; left: 93px; top: 112px;
background-color: #FFFFCC; cursor:pointer;" title="Click to hide" onClick="this.style.display='none';"></div>
<div id="resultDiv" style="border:1px solid orange; background-color: #FFFFCC; cursor:pointer;" title="Click to hide" onClick="this.style.display='none';">
Form 1 的提交结果将会显C在q里.
</div>
<script type="text/javascript">
var former = new AjaxFormer($('form1'), 'resultDiv');
var former2 = new AjaxFormer($('form2'));
</script>
</body>
</html>
那么W二个关键点是服务器端的表单数据读取了.q个问题跟具体的服务器有很大关系. 对于 Resin 服务器来? 问题很少, 基本上不论是 POST ?GET, Zؕ码的概率都比较小. 但是 Tomcat ׃敢恭l了, q大概也是开源品和商业产品的区? ~Z前后一致性和兼容? 因ؓ开源的不需要提供技术支? Tomcat ?GET/POST 的编码处理方式不同的版本都不一? 像 Eclipse/Netbeans 新版本从来不需要兼容老版本的插g API 一? Hibernate/Struts/Spring 也是一? 所以学 Java 的很? 当然, q就是免?开源的代h(hun). 跑题? 因此我们的服务器端代码大部分都是?Tomcat 的ؕ码问题的解决(POST的没有问? 主要?GET Ҏ(gu)?.
<%@ page contentType="text/html; charset=gbk" pageEncoding="gbk"%>
<html>
<%
//Send some headers to keep the user's browser from caching the response.
response.addHeader("Expires", "Mon, 26 Jul 1997 05:00:00 GMT" );
response.addHeader("Last-Modified", new java.util.Date().toGMTString());
response.addHeader("Cache-Control", "no-cache, must-revalidate" );
response.addHeader("Pragma", "no-cache" );
// This will emulate a network delay, for 2 sec.
//Thread.currentThread().sleep(2000);
request.setCharacterEncoding("utf-8");
%>
<%!
/**
* 转换字符串的内码.
*
* @param input
* 输入的字W串
* @param sourceEncoding
* 源字W集名称
* @param targetEncoding
* 目标字符集名U?br>* @return 转换l果, 如果有错误发? 则返回原来的?br>*/
public static String changeEncoding(String input, String sourceEncoding,
String targetEncoding) {
if (input == null || input.equals("")) {
return input;
}
try {
byte[] bytes = input.getBytes(sourceEncoding);
return new String(bytes, targetEncoding);
} catch (Exception ex) {
}
return input;
}
/**
* 一个类g JavaScript ?escape 函数的功? 保q可以正确传输.
*/
public static String escape(String src) {
int i;
char j;
StringBuffer tmp = new StringBuffer();
tmp.ensureCapacity(src.length() * 6);
for (i = 0; i < src.length(); i++) {
j = src.charAt(i);
if (Character.isDigit(j) || Character.isLowerCase(j)
|| Character.isUpperCase(j))
tmp.append(j);
else if (j < 256) {
tmp.append("%");
if (j < 16)
tmp.append("0");
tmp.append(Integer.toString(j, 16));
} else {
tmp.append("%u");
tmp.append(Integer.toString(j, 16));
}
}
return tmp.toString();
}
%>
<head>
<title>Test form action page</title>
</head>
<body>
q是 GBK ~码版本的后台表单提交页?<br/>
<%
boolean isTomcat = application.getServerInfo().toLowerCase().indexOf("tomcat") != -1;
%>
Form submit method:<%=request.getMethod()%><br/>
The form content u send is:<br/>
<%
java.util.Enumeration e = request.getParameterNames();
while (e.hasMoreElements()) {
String name = (String)e.nextElement();
String value = request.getParameter(name);
if(isTomcat && request.getMethod().equalsIgnoreCase("GET")) {
name = changeEncoding(name, "ISO8859-1", "UTF-8");
value = changeEncoding(value, "ISO8859-1", "UTF-8");
}
out.println("<b>" + name + "</b> = " + value + "<br/>");
}
// l前台返回一个可以执行的脚本
//response.addHeader("response_script", changeEncoding("alert('提交完成');", "ISO8859-1", "UTF-8"));
response.addHeader("response_script", escape("alert('提交完成');"));
%>
</body>
</html>
booleanisTomcat=application.getServerInfo().toLowerCase().indexOf("tomcat") !=-1; q一句主要针?Tomcat q行处理, 如果?GET Ҏ(gu)的话, 需要将表单参数?ISO8859-1 转换?UTF-8 (注意不是 GBK, 貌似 Tomcat 很喜?UTF-8?). 其它的地方和原来?UTF-8 版本的没有区? 当然如果(zhn)的站点应该用过滤器来更方便的解册个问?
结:
1. 使用一致的字符集很重要, 要么全是 GBK, 要么全是 UTF-8, 如果有条? 全部用 UTF-8, 那样工作量是最的;
2. ?AJAX 提交的时候一定要按照 HTTP 的规范来, 做到和浏览器量兼容, 其?POST 的时候不要再往 URL 地址里加参数? 你那hq规! 后果是有的服务器会不搭理你传递的q些参数! q是如我所? 参数提交之前要用 encodeURIComponent() 来{? q也是ؓ了符合浏览器的习惯做?
3. 后台如果d参数有ؕ? 尽量多?ISO8859-1, GBK, UTF-8 中间多{换几ơ试? 可以试试偶写的那?changeEncoding() Ҏ(gu), 把几个{换后的表单值都列出? 一定有一个是正确? L可以解决问题? q个本来不应该是偶们的Q? 但是写服务器的h是老美, 其?Tomcat 作? 只熟(zhn)?ISO8859-1.
4. 鉴于 TOMCAT d POST 参数的时候很出问题, 因此AJAX提交表单的时候多?POST Ҏ(gu), 量不用 GET.
q行截屏:
其它的一些资料可以参考Blogjava上的一原创文? [原创]struts,ajaxq解决Ҏ(gu)
Ƣ迎发表和更好的观点. 谢谢! 重申本文无意代替(zhn)的 AJAX 框架, 不过在你抓狂的时候可以考虑看看他们表单提交的代? Ҏ(gu)?
本h译?XMLHttpRequest 对象介绍:
The XMLHttpRequest Object Reference XMLHttpRequest 对象参?/h2>
Methods Ҏ(gu)
| Method Ҏ(gu) | Description 描述 |
|---|---|
| abort() | Cancels the current request 取消当前h |
| getAllResponseHeaders() | Returns the complete set of http headers as a string 完整的 HTTP 头部做ؓ一个字W串q回 |
| getResponseHeader("headername") | Returns the value of the specified http header q回l定?HTTP 头的?/td> |
| open("method","URL",async,"uname","pswd") | Specifies the method, URL, and other optional attributes of a request
The method parameter can have a value of "GET", "POST", or "PUT" (use "GET" when requesting data and use "POST" when sending data (especially if the length of the data is greater than 512 bytes. The URL parameter may be either a relative or complete URL. The async parameter specifies whether the request should be handled asynchronously or not. true means that script processing carries on after the send() method, without waiting for a response. false means that the script waits for a response before continuing script processing |
| send(content) | Sends the request 发送请?/td> |
| setRequestHeader("label","value") | Adds a label/value pair to the http header to be sent 在要发送的 HTTP 头中d 标签/取?/td> |
Properties 属?/h3>
| Property 属?/th> | Description 描述 |
|---|---|
| onreadystatechange | An event handler for an event that fires at every state change 每次状态改变时除非的事件处理器 |
| readyState | Returns the state of the object:
0 = uninitialized |
| responseText | Returns the response as a string 响应做为字W串q回 |
| responseXML | Returns the response as XML. This property returns an XML document object, which can be examined and parsed using W3C DOM node tree methods and properties 响应做为XMLq回. q个属性返回一?XML 文对象, 可以?W3C ?DOM 节点树方法和属性进行检索分?/td> |
| status | Returns the status as a number (e.g. 404 for "Not Found" or 200 for "OK") 状态做为数字返?例如 404 ?Not Found" 或?200 ?"OK") |
| statusText | Returns the status as a string (e.g. "Not Found" or "OK") 状态做为字W串q回(例如 "Not Found" 或?"OK") |
]]>
]]>
]]>
<script language="javascript">
function closeit() {
setTimeout("self.close()",5000) //毫秒
}
</script>
//以上代码攑օ需要自动关闭的目标|页?lt;head></head>之间
]]>