XMLHttpRequest()の使い方

Rev.15を表示中。最新版はこちら。

概要

Javascriptでサーバーとの通信を行なうためのメソッド。

クライアント→サーバーへGET/POSTメソッドでRequestを出し、サーバーからはXMLドキュメントを受け取る。非同期通信が可能でRequestを送信してResponseが返るのを待つことなく別の処理を行なうことができる。

 クライアント    サーバー
      |  GET/POST   |
      |------------>|
      |(*1)         | Requestを処理
      |             |
      |<------------| XMLドキュメントで応答を返す
      |             |
      |             |

    (*1) 非同期通信を行なっていれば、ここでサーバーからの
    応答(XMLドキュメントを待つことなく別の処理を行なえる。

XMLHttpRequestオブジェクトの生成

IEと非IEでオブジェクトの生成方法が異なる。

◎ IE

    try {
      req = new ActiveXObject("Msxml2.XMLHTTP") ;
    } catch (e) {
      try {
        req = new ActiveXObject("Microsoft.XMLHTTP") ;
      } catch (e2) {
        req = false;
      }
    }

◎ 非IE

    try {
      req = new XMLHttpRequest();
    } catch(e) {
      req = false;
    }

リクエストの送信(POSTの場合)

req.onreadystatechangeに通信状態が変化した時のコールバックルーチンを指定する。

openの第1引数でGETもしくはPOSTを指定する。第2引数はRequestを受信するサーバー側のスクリプトを指定する。ここで指定するURLはクライアントと同一ドメインでないとopen()はエラーとなるので注意。第3引数で通信を非同期で行なうか否かを指定する。

   req.onreadystatechange = processReqChange;
   req.open("POST", "http://xxxxx.com/recv.php", true);

以下で実際にデータを送信する。

◎ urlencode形式による送信
まず、req.setRequestHeader()でPOSTデータの形式を指定する(ここではurlencode)。その後、senddataにurlencode形式のデータを入れて、req.send()で送信する。以下の例ではdata配列にdata['request'] = "save",data['data'] = "hogehoge"というようにPOST用のデータが格納されているものとする。

    req.setRequestHeader("content-type",
                         "application/x-www-form-urlencoded;charset=UTF-8");
    var senddata = "";
    for (name in data) {
      if (senddata != "")
        senddata += "&";
      senddata += name+"="+escape(data[name]);
    }
    req.send(senddata);               // Sending Request

◎ multipart/form-data形式による送信
req.setRequestHeader()で設定するcontent-typeやsenddataに設定する形式がmultipart/form-dataであることを除けばurlencodedと同じ。multipart/form-data形式のデータを作成するのが、多少面倒。

    boundary = "-----hoge";
    req.setRequestHeader("content-type",
                         "multipart/form-data; boundary="+boundary);

    var senddata = "";
    for (name in data) {
      senddata += "--"+boundary+"\r\n"+
        "Content-Disposition: form-data; name=\""+name+"\"\r\n\r\n"+
        data[name]+"\r\n";
    }
    senddata += "--"+boundary+"--\r\n";
    req.send(senddata);               // Sending Request

リクエストの送信(GETの場合)

GETの場合も例を示す。
URLには通常のGETリクエストと同じ様にhttp://xxxx.com/recv.php?arg1=xxx&arg2=yyy のような形式でサーバーのURLと'?'の後にサーバーに送るデータを'&'で区切って付ける。GETの場合は送信情報はURLに含まれるためsend()に渡す引数はnullでよい。

  req.onreadystatechange = processReqChange;
  req.open("GET", url, true);
  req.send(null); // Sending Request

サーバー側の処理

クライアントから送信されたデータはフォームからGET/POSTされた時と同じ様に参照できる。(PHPの場合、$_GET[xxx],$_POST[xxx])。サーバーはクライアントから渡されたデータを処理して結果をクライアントにXMLドキュメントの形式で返す。以下にPHPスクリプトのサンプルを示す(処理としては受け取ったデータをXML形式でそのまま返しているだけ)。

<?php
header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
echo '<response>';
echo '    <request>'.$_POST['request'].'</request>';
echo '    <data>'.$_POST['data'].'</data>';
echo '</response>';
?>

header()で中身がxmlであることを示すHTTPヘッダを作成して、以降のecho でドキュメントを返している。

レスポンスの受信

通信状態(req.readyState)が変化するとonreadystatechangeに設定した関数が呼び出される。

function processReqChange() {
  if (req.readyState == 4) {
    if (req.status == 200) {
      // 正常終了
      response  = req.responseXML.documentElement;
      // <data>タグの内容を表示
      alert(response.getElementsByTagName('data')[0].firstChild.data);
    }
  }
}

[関連プロパティ]
req.readyState 通信状態

0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete

req.status サーバーから返されたステータスコード(200 - OK, 404 - Not Found等)
req.responseText 受信した生データ
req.responseXML 受信したXMLドキュメント

記述中

サンプルソース

記述中