読者です 読者をやめる 読者になる 読者になる

gaggitのブログ

コーディング、ガジェット、TIPS関連、FX

http(s)でマルチバイト(UTF-8)をGETリクエストする方法

ここ1週間、httpで漢字(UTF-8)をリクエストする方法を探して、コーディング&デバッグをしていました。本日、ようやく成功したので、報告します。結論から言うと、Windowscurl(Ver.7.33.09)では、実行できず、htmlの中からJavaScriptXMLHttpRequest()を実行します。

1.htmlの中では、HTML5対応で宣言します。

2.XMLhttpRequestオブジェクトを作成します。

 オブジェクト名がXMLhttpRequestとありますが、Text(文字列)にも対応しています。また、httpプロトコルだけではなく、httpsも実行可能でした。

3.openメソッドでリクエストを初期化します。

 サンプルでは、第3引数を省略していますが、第3引数でtrue(非同期通信)/false(同期通信)の設定が可能です。また、第4、第5引数でユーザ名とパスワードの設定も可能です。

4.setRequestHeaderプロパティでcharsetをUTF-8に設定します。

 firefoxでは、この設定を省略しても実行できましたが、IE11ではこの設定がないと、前回(現在)使用したcharsetで動作するようです。

5.sendプロパティでリクエストを送信します。

onreadystatechangeプロパティを使用して、ステータスが変更したイベントが発生したら、statusプロパティの帰り値をみて、sendを実行したかったのですが、firefoxでは、onreadystatechangeが、うまく動作できませんでした。IEではonreadystatechangeはちゃんと動作しました。firefoxでは、どうやら非同期通信ではなく同期通信で実行されているようです。

6.responseTextプロパティでhttpサーバからのデータを取得します。XMLデータで取得したい場合には、responseTextの代わりにresposeXMLを使用します。ただし、データの型はDocumentタイプとなります。

以下は、サンプルです。

<div id="output"></div>
<script type="text/javascript">
  xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET","http://URL名");
  xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8")
  output.innerHTML += xmlhttp.status;
  xmlhttp.send();
  output.innerHTML += xmlhttp.status;
  var strData = xmlhttp.responseText;
  output.innerHTML = strData;

</script>

-------------------------------------------

2016/5/22追記

IE11で実行する時には、こちらのオプション設定が必要です。

-------------------------------------------

閑話休題

curlでは、マルチバイト対応として以下のオプションが用意されていますが、説明にあるとおり、

POSTリクエスト時のみで、GETリクエストに対応するオプションがありません。curlオプションも実際に試していますが、失敗しました。

--form CONTENT  Specify HTTP multipart POST data (H)
 --form-string STRING  Specify HTTP multipart POST data (H)

 --data-binary DATA  HTTP POST binary data (H)
 --data-urlencode DATA  HTTP POST data url encoded (H)

あと、当然ながら、IEなど、古い(Ver.11以前)バージョンでは、動作しません。

参照サイト:

サーバから非同期にレスポンスを受け取る方法 (Ajax) | JavaScript プログラミング解説

参考文献:

Java Script辞典 HTML5対応 第4版 著者:(株)アンク

www.amazon.co.jp

今日もがじがじっと~♪