【JavaScript実践】 XHR

この記事ではXHRを使用した簡単なスクリプトを書く。

http://cosmology233.github.io/sandbox/hatena/2016/08/15/

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Practice JavaScript</title>
</head>
<body>

  <script src="./scripts/script.js"></script>
</body>
</html>

スクリプトを読み込むだけ。

data/users.xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<users>
  <user>
    <name>kosumoro</name>
    <age>27</age>
    <gender>male</gender>
  </user>
</users>

XHRで読み込むデータ。

scripts/script.js

{
  // XHRの初期化
  let xhr = new XMLHttpRequest();
}

XHRの初期化。 new XMLHttpRequest() の返り値を変数に格納する。

{
  // XHRの初期化
  let xhr = new XMLHttpRequest();

  // XHRのメソッド、送り先の設定
  xhr.open("GET", "./data/users.xml");
}

HTTPメソッドとリクエストの送り先を設定する。

今回は GET メソッドを使用して ./data/users.xml に向けてリクエストを送信する。

{
  // XHRの初期化
  let xhr = new XMLHttpRequest();

  // XHRのメソッド、送り先の設定
  xhr.open("GET", "./data/users.xml");

  // XHRの送信
  xhr.send();
}

send メソッドを使用してリクエストを送信することができる。

{
  // XHRの初期化
  let xhr = new XMLHttpRequest();

  // XHRのメソッド、送り先の設定
  xhr.open("GET", "./data/users.xml");

  // レスポンス取得完了時のイベントを設定
  xhr.addEventListener("load", (ev) => {
    /* データ取得時の処理 */
  });

  // XHRの送信
  xhr.send();
}

XHRを送信すると、送信先のサーバーから何かしら応答がある。

特にエラーがない場合、リクエストしたファイルの内容が返ってくる。 readystatechangeload イベントを利用して、返ってきたデータを利用した処理を書くことができる。

イベントの設定は addEventListener メソッドを使用する。第一引数にイベント名、第二引数にコールバック用の関数を指定する。

{
  // XHRの初期化
  let xhr = new XMLHttpRequest();

  // XHRのメソッド、送り先の設定
  xhr.open("GET", "./data/users.xml");

  // レスポンス取得完了時のイベントを設定
  xhr.addEventListener("load", (ev) => {
    /* データ取得時の処理 */

    // XMLデータを変数に格納
    let xmlData = ev.target.responseXML;

    // XMLデータからuser要素を取得
    let users = xmlData.getElementsByTagName("user");
    
    // user要素に含まれる情報を列挙していく
    [].forEach.call(users, (user, i) => {
      console.log("user: " + i);
      console.log("name: " + user.getElementsByTagName("name")[0].textContent);
      console.log("age: " + user.getElementsByTagName("age")[0].textContent);
      console.log("gender: " + user.getElementsByTagName("gender")[0].textContent);
    });
  });

  // XHRの送信
  xhr.send();
}

f:id:kosumoro:20160814001756j:plain

コールバック関数内では、 ev.target.responseXML でパースされたXMLデータを参照することができる。取得するデータがJSONの場合は JSON.parse(ev.target.response) にするなど、帰ってくるテキストデータをパースする処理を書く必要がある。