初試AJAX：中文的傳遞與接收
2007/03/16 | 編程生涯 | 作者: 簡睿| 閱讀總數 1097 , 1 (本日)
alt="AJAX diagram"
src="http://b.blog.xuite.net/b/3/a/c/11893557/blog_10351/txt/10593763/6.jpg"
hspace="30" vspace="5">
為了要讓網頁的頁面與資料傳遞能夠做到更理想，開始研究AJAX，試看看是否能透過AJAX來解決部份以GET方式而受到的限制能有所突破。以下將測試環境與程式按步就班地呈現出來，測試的過程裡，特別針對中文的傳入與傳回做了較詳盡的反覆測試。
測試環境：
- 作業系統：Windows 2003 Server
- 瀏覽器：IE 6.0.3790.0、FireFox 2.0.0.2
- Application Server：Resin 2.12、Resin 3.0.21
首先撰寫啟始的前端網頁文件，命名為 ajax.html，
網頁裡放三個控制項，一個用來輸入文字的TEXT1、
觸發AJAX執行的按鈕btnOK1和
接收Server回應的文字框RESULT，
呈現頁面如圖2。
border="0" cellpadding="2" cellspacing="1">
TEXT1“>
btnOK1” value=” TEST
1 “>
alt="FireFox AJAX"
src="http://b.blog.xuite.net/b/3/a/c/11893557/blog_10351/txt/10593763/0.jpg">
把按鈕RESULT的 onclick 事件放在window.onload裡：
border="0" cellpadding="2" cellspacing="1">
window.onload = function() {
document.getElementById(“btnOK1″).onclick = function() {
request =
httpRequest();
document.getElementById(“RESULT”).innerHTML = “”;
request.open(“POST”,
“ajax2.jsp”, true);
request.onreadystatechange = handleResponse;
request.setRequestHeader(“Content-Type”,
“application/x-www-form-urlencoded;”);
request.send(“TEXT1=” + document.getElementById(“TEXT1″).value +
“&TEXT2=中文傳到Server”);
} //~ btnOK1
} //~ window.onload
幾個說明如下：
- XMLHttpRequest物件建立後，變數名稱是request
- 用了避免傳遞的參數有字數長度的限制，因此用POST的方式傳參數；使用POST傳遞參數時，必須有
request.setRequestHeader，此處必須特別注意的是：
必須寫在request.open後面，否則 IE 會有”錯誤:
無法指出的錯誤”，而FireFox會有”uncaught exception”錯誤 - Query String會以問號開頭，而使用request.send傳送時
- Server的處理程式檔名為 ajax2.jsp
- Server處理完畢後會被執行的函數是
handleResponse，把接收回的字串寫入RESULT文字框
Server上的 ajax2.jsp 主要邏輯如下：
border="0" cellpadding="2" cellspacing="1">
page contentType="text/html;charset=UTF-8"%>
<%
//response.setContentType(“text/html;charset=UTF-8″);
//response.setHeader(“Charset”, “Big5″);
request.setCharacterEncoding(“UTF-8″);
out.println(“由Server輸出回網頁…..”);
String _sText1 = request.getParameter(“TEXT1″);
out.println(“TEXT1=” + _sText1);
%>
重點說明：
- XMLHttpRequest傳出與接收的編碼都是UTF-8，
因此JSP的反應編碼(第一行)與接收傳入參數的request(第5行)都使用UTF-8，如此接進來的參數與傳回的輸出，才能正確的被
XMLHttpRequest
處理 - 有的網站會把request參數用ISO8859-1再編碼成UTF-8，或用
response.setCharacterEncoding設定UTF-8，其實只要用說明1的方法就能都解決了；另外，若使用的
Application Server使用的是JSDK
2.3的話，是無法使用response.setCharacterEncoding的，這個method是JSDK 2.4後才增加的
再來把 ajax1.html 的Server換用Servlet來處理(xxx換成自己的Webapp名稱)：
border="0" cellpadding="2" cellspacing="1">
“/xxx/servlet/ajax_Servlet2″, true);
ajax_Server2的主要邏輯是：
border="0" cellpadding="2" cellspacing="1">
protected void doPost(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {
response.setContentType(“text/html;
charset=UTF-8″);
request.setCharacterEncoding(“UTF-8″);
PrintWriter out = response.getWriter();
String _sText1 =
request.getParameter(“TEXT1″);
String _sText2 =
request.getParameter(“TEXT2″);
//_sTEXT1 = new
String(_sTEXT1.geresponse.setCharacterEncodingtBytes(“ISO-8859-1″),
“UTF-8″);
StringBuffer buf = new StringBuffer();
buf.append(“訊息1=” + _sText1);
buf.append(“訊息2=” + _sText2);
out.println(buf.toString());
out.close();
}
response和request都使用
對了。
完整的 ajax1.html列表在下：
rows="15" cols="120">
##
href="http://emisjerry.googlepages.com/SyntaxHighlighter.css">相關文章
撰寫留言
隨機文章
- 接聽電話後重新顯示螢幕的偵測軟體：Touch InCall Screen Tweak (3 人次, 2009-03-12)
- [WM6] 自動再次提醒未接來電等事件：ReRemind (3 人次, 2009-04-19)
- 用DeskView讓桌面變清爽 (3 人次, 2008-01-24)
- [轉貼] 利用Wood Workshop自製木頭質感的底圖素材 (3 人次, 2005-06-14)
- OpenOffice.org擴充的集中站 (2 人次, 2008-01-31)
- 搖手機啟動指定的程式：G-Trigger (2 人次, 2009-03-19)
- 語系/地區碼 zh-TW與zh-CN 中的zh代表什麼? (2 人次, 2005-06-07)
- [Tools] 為硬碟做健康檢查：HDDlife; 硬碟測試：HD_Speed、HD Tune (2 人次, 2005-03-18)
- [Blog] 刪除del.icio.us的張貼網站 (2 人次, 2005-03-05)
- [Xuite] 文章分類後面的小圖示代表什麼意義? (2 人次, 2005-03-16)
- [NetBeans] 安裝與設定NetBeans內的Subversion (2 人次, 2006-01-21)
- [轉貼Toget] iColorfolder：為資料夾圖示換上繽紛色彩 (2 人次, 2005-08-09)
- WinMerge檔案濾鏡的使用方法 (2 人次, 2006-09-10)
- (2 人次, 2004-12-15)
- [轉貼] 全球掀熱潮 桃太郎最愛玩部落格 (2 人次, 2007-04-09)
- 又一個Java寫的資料庫前端工具：Execute Query 3.0 (2 人次, 2006-09-21)
- 讓手機永保清醒的DontSleep Wifi (2 人次, 2009-03-13)
- [創作] 字型工具產生器：動態變更Blog網頁的字型大小 (2 人次, 2007-04-29)
- Xuite網址的正規運算式測試 (2 人次, 2007-04-30)
- WordPress 3.0與PHP 5的時區問題 (2 人次, 2010-06-24)
- [Tools] 快速搜尋檔案：Locate32 (2 人次, 2005-07-16)
- [Subversion] 尋找Subversion Client工具 (2 人次, 2005-09-01)
- Linus談Git與TortoiseGit (2 人次, 2008-12-19)
- ls -d 的用途 (2 人次, 2004-12-26)
- 如何組成強固又容易記憶的密碼？ (2 人次, 2009-01-07)
- [轉貼] 千千靜聽：自動抓歌詞+詞曲同步的KTV播放器 (2 人次, 2005-07-22)
- Spb Mobile Shell設定備忘 (2 人次, 2009-02-19)
- Windows Mobile使用的完美聯絡人軟體：Inesoft Phone [修訂] (2 人次, 2009-02-28)
- [工具] Xuite人氣統計網頁 (2 人次, 2007-09-16)
- 能與Google Reader同步的Windows Mobile RSS reader? (2 人次, 2009-03-09)
- [轉貼] Me Media——個人媒體時代來臨！ (2 人次, 2005-04-10)
- 能在HD手機上順暢運行的3D賽車+射擊遊戲：Xtrackt (2 人次, 2009-09-12)
- WordPress減肥記：壓縮JavaScript檔的大小 (2 人次, 2010-06-08)
- WordPress持續減肥－找出使用網站內部圖檔的文章 (2 人次, 2010-06-12)
- [SVN] Hook scripts的使用方法 (2 人次, 2005-12-09)
- 啟用Vista與Windows 7的無敵模式(God Mode) (2 人次, 2010-01-03)
- 將圖片批次加入浮水印的工具：TSR Watermark Image Software (2 人次, 2010-06-06)
- 用反垃圾郵件代理程式Anti-Spam SMTP Proxy (ASSP)清除惱人的垃圾信 (2 人次, 2010-05-23)
- 用cPanel Proxy穿透防火牆以操作網站cPanel後台 (2 人次, 2010-06-21)
- 關閉所有視窗的小工具：CloseAll.exe (2 人次, 2010-05-22)
- 用樣式控制Google AdSense廣告顯示的位置 (2 人次, 2007-05-03)
- 在Blog裡顯示隨機文章的簡單作法 (2 人次, 2007-10-14)
- 用tag2find幫你的文件隨處貼標籤 (2 人次, 2008-01-11)
- [OOo] 增加插入按鈕到標準工具列 (2 人次, 2005-08-14)
- 常見的收錄書籤網址寫法之彙總表格 V1.1 (2 人次, 2007-04-01)
- [創作] 個人網頁全都連：Show Yourself Generator V1.0 (1 人次, 2007-04-21)
- 替部落格的側邊欄位加上縮起與展開功能 (1 人次, 2007-03-18)
- TiddlyWiki: 增加第二組編輯區工具列 (1 人次, 2007-08-15)
- 祝大家聖誕快樂 (1 人次, 2004-12-23)
- Mailmoa: 另一個郵件檢查程式 (1 人次, 2005-02-16)
最新留言