初試AJAX：中文的傳遞與接收

2007/03/16 |

分類：編程生涯

| 點擊數: 6 / 3277

AJAX diagram

為了要讓網頁的頁面與資料傳遞能夠做到更理想，開始研究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。

圖2

把按鈕RESULT的 onclick 事件放在window.onload裡：

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.setRequestHeader必須寫在request.open後面，否則 IE 會有"錯誤:無法指出的錯誤"，而FireFox會有"uncaught exception"錯誤
Query String會以問號開頭，而使用request.send傳送時不能用問號開頭！
Server的處理程式檔名為 ajax2.jsp
Server處理完畢後會被執行的函數是
handleResponse，把接收回的字串寫入RESULT文字框

Server上的 ajax2.jsp 主要邏輯如下：

<%@
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名稱)：

request.open("POST",
"/xxx/servlet/ajax_Servlet2″, true);

ajax_Server2的主要邏輯是：

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都使用UTF-8就對了。

完整的 ajax1.html列表在下：
<html> <body> <form id="idForm"> <input type="text" name="TEXT1″ id="TEXT1″> <input type="button" name="btnOK1″ id="btnOK1″ value=" TEST 1 "> <textarea name="RESULT" id="RESULT" rows=10 cols=50></textarea> </form> <span id=’spaParam’> </body> </html> <script> var request; function httpRequest() { var req; if (window.XMLHttpRequest) { // Mozilla-based browsers req = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE 5, IE 6 req = new ActiveXObject("Msxml2.XMLHTTP"); if (!req) { req = new ActiveXObject("Microsoft.XMLHTTP"); } } return req; } //~ httpRequest function handleResponse() { if (request.readyState == 4) { if (request.status == 200) { //!! innerText在FF裡竟然不行! document.getElementById("RESULT").innerHTML = request.responseText; } else { alert("Error: " + request.status + " " + request.statusText); } } } //~ handleResponse window.onload = function() { document.getElementById("btnOK1″).onclick = function() { request = httpRequest(); document.getElementById("RESULT").innertext = ""; request.open("POST", "/mis/servlet/ajax_Servlet2″, true); //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 </script> 
##