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

由 · 發表於: · 更新於: | 瀏覽數: 1 / 11228

標籤：


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。

<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>

 

圖2
FireFox AJAX


把按鈕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


幾個說明如下：

  1. XMLHttpRequest物件建立後，變數名稱是request
  2. 用了避免傳遞的參數有字數長度的限制，因此用POST的方式傳參數；使用POST傳遞參數時，必須有request.setRequestHeader，此處必須特別注意的是：request.setRequestHeader必須寫在request.open後面，否則 IE 會有"錯誤:無法指出的錯誤"，而FireFox會有"uncaught exception"錯誤
  3. Query String會以問號開頭，而使用request.send傳送時不能用問號開頭！
  4. Server的處理程式檔名為 ajax2.jsp
  5. 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);
%>


重點說明：

  1. XMLHttpRequest傳出與接收的編碼都是UTF-8，因此JSP的反應編碼(第一行)與接收傳入參數的request(第5行)都使用UTF-8，如此接進來的參數與傳回的輸出，才能正確的被XMLHttpRequest處理
  2. 有的網站會把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列表在下：

##

您可能也會有興趣的類似文章

簡睿

服務於軟體業的資訊老兵。興趣廣泛，學習力佳，樂於分享所知所學。

您可能也會喜歡…

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *