UTF-8エンコードの方法

Ajax UTF-8エンコードの方法

Ajaxを使用するとき、特に POSTでサーバーへデータを送信する時に、マルチバイト文字の
エンコードが問題となる場合が多い。

もちろんのことサーバー側がどのような文字コードでデータを受け取るかによるが、
通常、Webページからサーバーへデータを送信した場合、そのHTMLファイルの文字コードに
依存するため、UTF-8のHTMLファイルからデータを送信した場合マルチバイト文字は
UTF-8、Shift-JISのHTMLファイルからデータを送信した場合はShift-JISに自動的に
エンコードされデータが送信される。
しかし、AjaxにおいてPOSTでデータを送信する場合では、事前にリクエストする値(マルチバイト文字)
を明示的にエンコードする必要がある。
今回は、いま最もよく使用されている UTF-8 エンコードの方法を紹介します。

それでは下記の簡単なサンプルコードで説明します。

■ 初期画面
実行

サンプル画面

■ HTML サンプルソース
  <html>
  <head>
  <meta http-equiv="Content-Language" content="ja">
  <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS">
  <title>UTF-8エンコード</title>
  <script language="javascript">
  function enc_utf8(){
    var val = document.getElementById('fld1').value;
    var str = encodeURIComponent(val);
    document.getElementById('fld2').innerText = str;
  }
  </script>
  <body>
  <h1>文字列をエンコード</h1>
  <p><input type="text" id="fld1" size="10" value="">マルチバイト文字を入力して下さい。
  <input type="button" value="UTF-8エンコード" onclick="enc_utf8()">
  <p>エンコード処理後 <span id="fld2"></span>
  </body>
  </html>

サンプルソース のコード説明

入力テキストボックスに、マルチバイト文字を入力し「UTF-8エンコード」ボタンを押すと、
JavaScriptの関数：enc_utf8() が実行される。
その enc_utf8関数の中の JavaScriptの関数として用意されている encodeURIComponent(val) という
もので、実際にUTF-8エンコードが行なわれ、UTF-8エンコードされた文字列が返される。 

エンコードされた文字列 = encodeURIComponent(入力値);

この encodeURIComponent は、Ajax通信では一般的によく使用されており、
実際にAjaxアプリケーションを作成するとき、Ajaxリクエストを実行する直前に送信データを
encodeURIComponent 関数により、UTF-8にエンコードされ簡単に マルチバイト文字列の
UTF-8エンコードができるのである。

[ TOP ]