１２　非同期処理

（１） データの取得

データの取得には、リクエストメソッドとして GET を指定します。

ファイルを取得する場合は、自サーバー上のファイルの URL か相対パスで指定します。他のサーバー上のファイルはそのサーバーが許可していない限り読み込むことはできません。

記述例

<span id="d1"></span><br>
<!-- 以下略 -->

<script>
var d1 = document.getElementById("d1");
// 以下略

var promise = fetch("sample.txt", {method:"get"});        // method:"get" は規定値なので記述しなくても同じ
promise
  .then(response => {        // アロー関数で記述してるが、response => は function(response) と同じ意味
    d1.textContent = response.url;
    d2.textContent = response.type;
    d3.textContent = response.status;
    d4.textContent = response.statusText;
    d5.textContent = response.ok;
    var headers = "";
    response.headers.forEach((value, key) => headers += key + " : " + value + "<br>");
    d6.innerHTML = headers;
  })
  .catch(err => d1.textContent = err);
</script>

ファイルを読み込んで、レスポンスの内容を表示しています。

headers() の返す値はオブジェクトなので、そのメンバーの名前と値をすべて表示しています。

<span id="d1" style="white-space:pre;"></span><br>

<script>
var d1 = document.getElementById("d1");

var promise = fetch("sample.txt", {method:"get"});        // method:"get" は規定値なので記述しなくても同じ
promise
  .then(response => {        // アロー関数で記述してるが、response => は function(response) と同じ意味
    response.text().then(t => d1.textContent = t);
  })
  .catch(err => d1.textContent = err);
</script>

<span id="d1"></span><br>
<!-- 以下略 -->

<script>
var d1 = document.getElementById("d1");
// 以下略

var promise = fetch("sample.png", {method:"get"});        // method:"get" は規定値なので記述しなくても同じ
promise
  .then(response => {        // アロー関数で記述してるが、response => は function(response) と同じ意味
    response.blob().then(b => {
      d1.textContent = b.type;  // MIME タイプ
      d2.textContent = b.size;  // バイトサイズ
      var reader = new FileReader();
      reader.addEventListener("loadend", function() {
        var data = new Uint8Array(reader.result);
        var x = "";
        for (var i = 0 ; i < 16 ; i++) {           // 最初の１６バイトだけ表示
          x += ("0" + data[i].toString(16).toUpperCase()).substr(-2) + " ";  // １６進数化
        }
        d3.textContent = x;
      });
      reader.readAsArrayBuffer(b);  // ファイルを読み込んで ArrayBuffer に格納する
    });
  })
  .catch(err => d1.textContent = err);
</script>

<img id="d1"><br>
<span id="d2"></span><br>

<script>
var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");

var promise = fetch("sample.png", {method:"get"});        // method:"get" は規定値なので記述しなくても同じ
promise
  .then(response => response.blob().then(b => d1.src = URL.createObjectURL(b)))  // 画像の URL を得て、img 要素に設定する
  .catch(err => d2.textContent = err);
</script>

<span id="d1"></span><br>
<span id="d2"></span><br>

<script>
var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");

var promise = fetch("sample.png", {method:"get"});        // method:"get" は規定値なので記述しなくても同じ
promise
  .then(response => {        // アロー関数で記述してるが、response => は function(response) と同じ意味
    response.arrayBuffer().then(b => {
      var data = new Uint8Array(b);
      d1.textContent = data.length;  // バイトサイズ
      var x = "";
      for (var i = 0 ; i < 16 ; i++) {           // 最初の１６バイトだけ表示
        x += ("0" + data[i].toString(16).toUpperCase()).substr(-2) + " ";  // １６進数化
      }
      d2.textContent = x;
    });
  })
  .catch(err => d1.textContent = err);
</script>

<img id="d1"><br>
<span id="d2"></span><br>

<script>
var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");

var promise = fetch("sample.png", {method:"get"});        // method:"get" は規定値なので記述しなくても同じ
promise
  .then(response => {
          response.arrayBuffer().then(b => {
            var data = new Uint8Array(b);
            var binaryData = "";
            for (var i = 0, len = data.byteLength ; i < len ; i++) {
              binaryData += String.fromCharCode(data[i]);
            }
            d1.src = "data:image/png;base64," + window.btoa(binaryData);  // img 要素に設定する
          });
  })
  .catch(err => d2.textContent = err);
</script>

<span id="d1" style="white-space:pre;"></span><br>

<script>
const indent = "  ";
const delim = ":";
// オブジェクトの表示
function disp(ind, obj) {
  var keys = Object.keys(obj);    // すべてのキー
  var d = "{\n";
  var leading = indent.repeat(++ind);  // インデント
  keys.forEach((key) => {    // キーを順番に取り出す
    var val = obj[key];      // キーに対応する値
    if (typeof val === 'object') {
      d += leading + key + delim + disp(ind, val);    // オブジェクトがネストしている
    }
    else {
      var quote = (typeof val === 'string') ? "\"" : "";        // 文字列なら "" で囲む
      d += leading + key + delim + quote + val + quote + "\n";  // 値
    }
  });
  leading = indent.repeat(ind-1);        // インデント
  return d + leading + "}\n";
}

var d1 = document.getElementById("d1");

var promise = fetch("sample.json", {method:"get"});        // method:"get" は規定値なので記述しなくても同じ
promise
  .then(response => {        // アロー関数で記述してるが、response => は function(response) と同じ意味
    response.json().then(j => {
      d1.textContent = disp(0, j);
    });
  })
  .catch(err => d1.textContent = err);
</script>

（２） データの作成

サーバーにデータを作成するためにパラメーターをリクエストとして送ります。リクエストの送信には、リクエストメソッドとして POST を指定します。

下の例では、サーバーの　CGI を呼び出しパラメーターを送信しています。そして、その返答を受け取り表示しています。

<span id="d1"></span><br>

<script>
var d1 = document.getElementById("d1");

var params = new URLSearchParams();     // サーバーに渡されるパラメーター
params.append("name", "Mary");
params.append("gender", "female");
params.append("fruits", "みかん");
fetch("post.cgi",
    {                // オプション
      method: "post",
      headers: {"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"},
      body: params      // name=Mary&gender=female&fruits=みかん
    })
  .then(response => response.text().then(res => d1.innerHTML = res))
  .catch(err => d1.textContent = err);
</script>

      body: params.toString()      // name=Mary&gender=female&fruits=みかん

      body: "name=Mary&gender=female&fruits=みかん"

<form id="favi">
<label>氏名：<input type="text" name="name"></label><br>
性別：
<label><input type="radio" name="gender" value="male"> 男</label>
<label><input type="radio" name="gender" value="female"> 女</label>
<br><br>
所持品：
<label><input type="checkbox" name="prop" value="CellPhone" checked="checked"> スマフォ</label>
<label><input type="checkbox" name="prop" value="Car"> 自動車</label>
<label><input type="checkbox" name="prop" value="Cottage"> 別荘</label>
<br>
<label>好きな果物：
<select name="fruits">
 <option value="りんご" label="りんご"></option>
 <option value="みかん" label="みかん"></option>
 <option value="バナナ" label="バナナ" selected="selected"></option>
 <option value="パイナップル" label="パイナップル"></option>
</select></label>
</form>

<span id="d1">何か入力してください。</span><br>

<script>
var d1 = document.getElementById("d1");

var favi = document.getElementById("favi");
favi.addEventListener("change", send, false);      // 入力欄に変更があったら send() を呼び出す

function send() {
  fetch("post.cgi",
    {                // オプション
      method: "post",
      headers: {"Content-type": "multipart/form-data; charset=UTF-8"},
      body: new FormData(favi)
    })
  .then(response => response.text().then(res => d1.innerHTML = res))
  .catch(err => d1.textContent = err);
}
</script>

（３） ファイルの送信

<input type="file"> で指定されたファイルをアップロードしサーバーに保存します。この例では、ファイルが指定された時点で自動的に送信され、サーバーに保存されます。そして、その保存されたファイル名を受け取り、img タグの src 属性に設定することによって、その画像を表示しています。

記述例

<form id="up">
<label>ファイル：<input type="file" name="file" type="file" accept="image/*"></label><br>
</form>

<img id="d1" style="max-height:200px;max-width:200px;"><br>
<div id="d2" style="color:crimson"></div>

<script>
var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");

var favi = document.getElementById("up");
favi.addEventListener("change", send, false);      // 入力欄に変更があったら send() を呼び出す

function send() {
  fetch("upload.cgi",
    {                // オプション
      method: "post",
      body: new FormData(favi)
    })
  .then(response => {
    response.text().then(res => {
      if (response.ok) {
        d1.src = res;           // 画像 URL
        d2.textContent = "";
      }
      else {
        d1.src = "";
        d2.innerHTML = res;     // エラーメッセージ
      }
    })
  })  
  .catch(err => d2.textContent = err);
}
</script>

画像ファイルを選択すると自動的にアップロードされます。また、ファイルを指定するたびにアップロードされた画像が（大きな画像は縮小されて）表示されます。

アップロードする画像ファイルのサイズは 180KB 以下のものを選んでください。

（４） ヘッダの取得

ヘッダの取得には、リクエストメソッドとして HEAD を指定します。

GET メソッドでも同じように、ヘッダを取得することができますが、GET メソッドはデータのボディ部のデータも一緒に取得してしまうので、データの更新日時（last-modified）などのヘッダー情報のみを取得したい場合は、通信の無駄が発生してしまいます。

記述例

<span id="d1"></span><br>

<script>
var d1 = document.getElementById("d1");

fetch("sample.txt", {method:"head"})
  .then(response => response.headers)
  .then(headers => {
    var headerContents = "";
    headers.forEach((value, key) => headerContents += key + " : " + value + "<br>");
    d1.innerHTML = headerContents;
  })
  .catch(err => d1.textContent = err);
</script>

ファイルを読み込んで、ヘッダー情報を表示しています。

headers() の返す値はオブジェクトなので、そのメンバーの名前と値をすべて表示しています。

（１） インスタンス生成

（２） プロパティ

Request インスタンスの主なプロパティです。

（１） インスタンス生成

options には次のようなメンバーがあります。

（２） プロパティ

Response インスタンスの主なプロパティです。

（３） メソッド

Response オブジェクトに含まれる内容は ArrayBuffer、Blob、JSON、プレーンテキストのいずれかの形で受け取ることが出来ます。それらを読み込むには次のメソッドを使用します。

text() の例です。

記述例

<span id="d1" style="white-space:pre;"></span><br>

<script>
var d1 = document.getElementById("d1");

var promise = fetch("sample.txt");
promise.then(function(response) {
  response.text().then(function(t) {d1.textContent = t});
});
</script>

text() の返す値はファイルの内容を持った Promise インスタンスです。ファイルの内容は表示する div 要素に white-space:pre 属性を指定しているので、改行されてすべて表示されています。

その他の使用例は、１２．１．１　fetch 命令 （１） データの取得 を参照してください。

（１） メソッド

Headers インスタンスは、Map オブジェクトに似た次のようなメソッドを持っています。詳しくは、９．６ 連想配列（Map） を参照してください。

（２） プロパティ（Response インスタンスに含まれる Headers インスタンス）

Headers インスタンスは、ヘッダ名と値のペアで構成されるリストを持っていますが、その内容はインスタンスごとに異なります。

例えば、Response インスタンスに含まれる Headers インスタンスには次のようなプロパティが含まれています。

新規に生成しプロパティを個別に追加した Headers インスタンスと、Response インスタンスに含まれる Headers インスタンスの両方について、プロパティのヘッダ名と値のペアを表示しています。

記述例

<script>
<span id="d01"></span><br>
<span id="d02"></span><br>

<script>
var d01 = document.getElementById("d01");
var d02 = document.getElementById("d02");

var headersObj = new Headers();
headersObj.append("String", "ABC");
headersObj.append("Number", 12);
var headers = "";
headersObj.forEach(function(value, key) {headers += key + " : " + value + "<br>"});
d01.innerHTML = headers;

fetch("sample.txt", {method:"get"}).then(function(response) {
    var headers = "";
    response.headers.forEach(function(value, key) {headers += key + " : " + value + "<br>"});
    d02.innerHTML = headers;
  })
  .catch(err => d02.textContent = err);
</script>

ヘッダ名は大文字で指定しても小文字で登録されるようです。

（１）インスタンス生成

新規の Promise インスタンスを生成します。

Promise インスタンスの状態は以下のいずれかになります。

• pending : 初期状態。成功も失敗もしていない
• fulfilled : 処理が成功して完了した（resolve 関数を実行した）
• rejected : 処理が失敗した（reject 関数を実行した）

例えば、XMLHttpRequest を使用してファイルを読み込む処理を考えてみます。XMLHttpRequest はファイルの読み込みを非同期に行いますので、ファイル読み込みの完了はイベント（この例では readystatechange）によって知らされます。

次の例は、ファイル xxxxx.txt を読み込んで、その文字数を表示するものです。

記述例

<span id="d1"></span><br>
<span id="d2"></span><br>
<script>
var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");

function MyFileReader(filename) {
  this.filename = filename;
  this.callback = null;
  this.length = 0;
  this.req = new XMLHttpRequest();  // HTTPでファイルを読み込むためのXMLHttpRrequestオブジェクトを生成
  this.req.open("get", this.filename, true); // アクセスするファイルを指定
}

MyFileReader.prototype.read = function(callback) {
  var self = this;
  this.callback = callback;
  this.req.send(null);                  // HTTPリクエストの発行

  this.req.onreadystatechange = function(){
    if (self.req.readyState == 4) {
      if (self.req.status == 200) {
        self.length = self.req.responseText.length;   // ファイルサイズ
        self.callback();
      }
      else if (self.req.status == 404) {
        throw self.filename + " not found.";
      }
    }
  }
}
MyFileReader.prototype.size = function() {
  return this.length;
}

var reader;

function execute() {
  d2.textContent = reader.size();   // 文字数 ==> d2　　－－－－－②
}

var filename = "xxxxx.txt";
reader = new MyFileReader(fileName);
reader.read(execute);               // ファイルを読み込む
d1.textContent = reader.size();     // 文字数 ==> d1　　－－－－－①
</script>

XMLHttpRequest を使用した場合、ファイルは一度にすべて読み込まれ、responseText に保存されます。したがって、d1（①のところ）には読み込まれた文字数が設定されてもよさそうですが、実行結果としては 0 になっています。これは、ファイルの読み込みが非同期で行われているため、ファイルを読み込み終わる前に ① の命令が実行されてしまうからです。

これに対して、ファイルの読み込みが完了したときに（read からコールバックされる execute 内で）設定している d2（②のところ）には読み込んだ文字数が設定されています。

それでは同じ処理を Promise を使用して記述してみます。

resolve の引数は返したい値、reject の引数はエラー理由を設定した、文字列や数値や Error あるいはそのサブクラスのインスタンスです。

記述例

<span id="d1"></span><br>
<script>
var d1 = document.getElementById("d1");

var filename = "xxxxx.txt";

var promise = new MyFileReader(filename);
promise.then(
  function(text){d1.textContent = text.length;},  //成功した場合（文字数）　　　　　－－－－－①
  function(err){d1.textContent = err.message;}    //失敗した場合
);

function MyFileReader(filename){
  return new Promise(function(resolve, reject){
    var req = new XMLHttpRequest();  // HTTPでファイルを読み込むための XMLHttpRrequest インスタンスを生成
    req.open("get", filename, true); // アクセスするファイルを指定
    req.addEventListener("loadend", function(e){
      // loadend イベントはリクエストが成功した場合も失敗した場合も呼び出される
      if (req.readyState == 4 && req.status == 200) {
        resolve(req.responseText);               // fulfilled
        return;    // return はなくてもよい（この後 reject を実行しても fulfilled の状態は変わらない）
      }
      reject(new Error("error"));                // rejected
    });
    req.send(null);
  });
}
</script>

MyFileReader は、ファイルの読み込みが正常に終了したのならば resolve を呼び、読み込んだファイルの内容を返し、そして、失敗したのならば reject を呼び、"error" という文字列を持つ Error インスタンスを返す Promise インスタンスを生成し、戻り値としています。

そして、これらの値が then の引数として指定された関数に渡されます。成功したときが一つ目の関数、失敗したときが二つ目の関数です。

（２）then メソッド

then() メソッドは Promise を返します。最大2つの引数、Promise が成功した場合と失敗した場合のコールバック関数を取ります。

先の例と同じものです。ここですでに then が使用されていました。

この例では MyFileReader が成功すれば resolve を呼び出し（─→ ① のところ）、その引数の req.responseText の内容が then の一つ目の関数（←── ① のところ）の text に設定され、一つ目の関数が実行されます。

もし失敗すれば reject を呼び出し（─→ ② のところ）、その引数の Error インスタンスが then の二つ目の関数（←── ② のところ）の err に設定され、二つ目の関数が実行されます。

記述例

<span id="d1"></span><br>
<script>
var d1 = document.getElementById("d1");

var filename = "xxxxx.txt";

var promise = new MyFileReader(filename);
promise.then(
  function(text){d1.textContent = text.length;},  //←── ①　（成功したとき）
  function(err){d1.textContent = err.message;}    //←── ②　（失敗したとき）
);

function MyFileReader(filename){
  return new Promise(function(resolve, reject){
    var req = new XMLHttpRequest();  // HTTPでファイルを読み込むための XMLHttpRrequest インスタンスを生成
    req.open("get", filename, true);
    req.addEventListener("loadend", function(e){
      if (req.readyState == 4 && req.status == 200) {
        resolve(req.responseText);      //────────→ ①
        return;
      }
      reject(new Error("error"));       //────────→ ②
    });
    req.send(null);
  });
}
</script>

then は Promise インスタンスを返すので、then をいくつも続けて書くことができます。このとき、then に記述した関数で値を返すと、その値が次の then に記述した関数の引数になります。なお、値を返さなければ undefined が引数値になります。

記述例

<span id="d1"></span><br>
<script>
var d1 = document.getElementById("d1");

var promise = Promise.resolve();     // new Promise(function(resolve) {resolve();}) と同じ意味
promise
  .then(function(){return "one";})
  .then(function(arg){return arg + " two";})        // arg = "one"
  .then(function(arg){d1.textContent = arg;});      // arg = "one two"
</script>

戻り値が次の関数に引数として渡されます。

then の中で Promise を返す場合は、次のようになります。

記述例

<span id="d1"></span><br>
<script>
var d1 = document.getElementById("d1");

var promise = Promise.resolve();     // new Promise(function(resolve) {resolve();}) と同じ意味
promise
  .then(function(){return new Promise(function(resolve, reject){resolve("one")});})
  .then(function(arg){return new Promise(function(resolve, reject){resolve(arg + " two")});})   // arg = "one"
  .then(function(arg){d1.style.color="blue"; d1.textContent = arg;});                           // arg = "one two"
  .catch(function(err){d1.style.color="red"; d1.textContent = err;});      // 実行されない
</script>

（３）catch メソッド

catch() メソッドは Promise を返し、then の途中で失敗した場合のコールバック関数を取ります。

then の途中で失敗した場合は、catch で指定した関数が実行されます。

記述例

<span id="d1"></span><br>
<script>
var d1 = document.getElementById("d1");

var promise = Promise.resolve();     // new Promise(function(resolve) {resolve();}) と同じ意味
promise
  .then(function(){return new Promise(function(resolve, reject){resolve("one")});})
  .then(function(arg){return new Promise(function(resolve, reject){reject("error")});})   // 失敗
  .then(function(arg){d1.style.color="blue"; d1.textContent = arg;});      // 実行されない
  .catch(function(err){d1.style.color="red"; d1.textContent = err;});
</script>

（１）all メソッド

all メソッドは、引数に指定した全ての Promise を実行します。そして、全ての Promise が成功した（fulfilled）か、または1つでも失敗した（rejected）場合に処理が終了します。

記述例

<span id="d1"></span><br>
<span id="d2"></span><br>

<script>
var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");

var p1 = new Promise(function(resolve) {setTimeout(resolve, 4000, "one");});   // ４秒後に resolve("one") を実行
var p2 = new Promise(function(resolve) {setTimeout(resolve, 1000, "two");});   // １秒後に resolve("two") を実行
var p3 = new Promise(function(resolve) {setTimeout(resolve, 3000, "three");}); // ３秒後に resolve("three") を実行
var px = new Promise(function(resolve, reject) {setTimeout(reject, 2000, "error");}); // ２秒後に reject("error") を実行

Promise.all([p1, p2, p3]).then(                     // すべて成功　　－－－①
        function(value) {d1.textContent = value;},         // 成功したときに実行される関数　　－－－ ①-1
        function(reason) {d1.textContent = reason;});
Promise.all([p1, p2, px]).then(                     // 失敗　　　　　－－－②
        function(value) {d2.textContent = value;},
        function(reason) {d2.textContent = reason;});      // 失敗したときに実行される関数　　－－－ ②-1
</script>

Promise.all は、配列内で指定された関数が並列で実行されます。そして、すべてが成功する ① の場合だと４秒後に then の一つ目の引数で指定された関数（①-1）が実行されます。また、px が失敗する ② の場合では２秒後に二つ目の引数で指定された関数（②-1）が実行されます。

（２）race メソッド

race メソッドは、最初に成功（fulfilled）もしくは失敗（rejected）した promise の返した値を引数に、resolve を実行します。

記述例

<span id="d1"></span><br>
<span id="d2"></span><br>

<script>
var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");

var p1 = new Promise(function(resolve) {setTimeout(resolve, 4000, "one");});   // ４秒後に resolve("one") を実行
var p2 = new Promise(function(resolve) {setTimeout(resolve, 1000, "two");});   // １秒後に resolve("two") を実行
var p3 = new Promise(function(resolve) {setTimeout(resolve, 3000, "three");}); // ３秒後に resolve("three") を実行
var px = new Promise(function(resolve, reject) {setTimeout(reject, 2000, "error");}); // ２秒後に reject("error") を実行

Promise.race([p1, p2, p3]).then(                    // 最初に p2 が成功　　－－－①
        function(value) {d1.textContent = value;},         // 成功が最初の結果だったときに実行される関数　　－－－①-1
        function(reason) {d1.textContent = reason;});
Promise.race([p1, p3, px]).then(         　　   　　// 最初に px が失敗　　－－－②
        function(value) {d2.textContent = value;},
        function(reason) {d2.textContent = reason;});  　  // 失敗が最初の結果だったときに実行される関数　　－－－②-1
</script>

Promise.race は、配列内で指定された関数が並列で実行されます。そして、先にどれか（①の例だと１秒後に p2）が成功し、即座に then の一つ目の引数で指定された関数（①-1）が実行されます。また、先にどれか（②の例だと２秒後に px）が失敗した場合には即座に then の二つ目の引数で指定された関数（②-1）が実行されます。

（３）resolve メソッド

resolve メソッドは引数で与えられた値で解決（fulfilled）された Promise オブジェクトを返します。

Promise.resolve() は次のように記述したものと同じ意味になります。

new Promise(function(resolve){resolve("success");});           // Promise.resolve("success"))

記述例

<span id="d1"></span><br>
<span id="d2"></span><br>

<script>
var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");

var promise = Promise.resolve("success");      // 成功

promise.then(
  function(value) {d1.textContent = "resolve " + value;},  // 成功だったときに実行される関数
  function(value) {d2.textContent = "reject " + value;}
);
</script>

（４）reject メソッド

reject メソッドは、引数で与えられた理由で失敗（rejected）した Promise オブジェクトを返します。

Promise.reject() は、次のように記述したものと同じ意味になります。

new Promise(function(resolve, reject){reject("fail");});       // Promise.reject("fail"))

記述例

<span id="d1"></span><br>
<span id="d2"></span><br>

<script>
var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");

var promise = Promise.reject("fail");      // 失敗

promise.then(
  function(value) {d1.textContent = "resolve " + value;},
  function(value) {d2.textContent = "reject " + value;}    // 失敗だったときに実行される関数
);
</script>

（１）インスタンス生成

新規の XMLHttpRequest インスタンスを生成します。

記述例

<script>
var req = new XMLHttpRequest();  // HTTPでファイルを読み込むためのXMLHttpRrequestオブジェクトを生成
</script>

（２）インスタンス・プロパティ

readyState の状態が変わるごとに readystatechange イベントが発生しプロパティが変化します。

次の例では５回呼び出されていて、その時のプロパティ値を表示しています。

記述例

<span id="d11"></span><span id="d12"></span> <!-- 略 --> <br>
<!-- 以下略 -->

<script>
var req = new XMLHttpRequest();  // HTTPでファイルを読み込むためのXMLHttpRrequestオブジェクトを生成
var m = 1;
req.onreadystatechange = function() {
  document.getElementById("d1" + m).textContent = req.status;
  document.getElementById("d2" + m).textContent = req.statusText;
  document.getElementById("d3" + m).textContent = req.readyState;
  document.getElementById("d4" + m).textContent = req.response;
  document.getElementById("d5" + m).textContent = req.responseText;
  document.getElementById("d6" + m).textContent = req.responseType;
  document.getElementById("d7" + m).textContent = req.responseURL;
  document.getElementById("d8" + m).textContent = req.responseXML;
  m++;
};
req.onreadystatechange();
req.open("get", "sample.txt", true); // アクセスするファイルを指定
req.responseType = "";
req.send();
</script>

受診内容は responseType によって次のように異なります。

記述例

<span id="d10"></span><span id="d11"></span> <!-- 略 --> <br>
<!-- 以下略 -->

<script>
var m = 0;
var req = new XMLHttpRequest();  // HTTPでファイルを読み込むためのXMLHttpRrequestオブジェクトを生成
req.onreadystatechange = function() {
  if (req.readyState != 4) return;
  document.getElementById("d3" + m).textContent = req.responseType;
  document.getElementById("d4" + m).textContent = req.responseURL;
  switch(req.responseType) {
    case "arraybuffer":
     document.getElementById("d1" + m).innerHTML = req.response.byteLength;
     break;
    case "blob":
     document.getElementById("d1" + m).innerHTML = req.response.type + req.response.size;
     break;
    case "document":
     document.getElementById("d1" + m).innerHTML = req.response.contentType;
     document.getElementById("d5" + m).textContent = req.responseXML.documentElement.outerHTML;
     break;
    case "json":
     document.getElementById("d1" + m).innerHTML = dispJSON(req.response);
     break;
    case "text":
     document.getElementById("d1" + m).textContent = req.response;
     document.getElementById("d2" + m).textContent = req.responseText;
     break;
  }
  if (++m < func.length)
    func[m]();
};
var func = [func1, func2, func3, func4, func5];
func[m]();
function func1() {
  req.open("get", "data/sample.png", true);
  req.responseType = "arraybuffer";
  req.send();
}
function func2() {
  req.open("get", "data/sample.png", true);
  req.responseType = "blob";
  req.send();
}
function func3() {
  req.open("get", "data/sample.xml", true);
  req.responseType = "document";
  req.send();
}
function func4() {
  req.open("get", "data/sample.json", true);
  req.responseType = "json";
  req.send();
}
function func5() {
  req.open("get", "data/sample.txt", true);
  req.responseType = "text";
  req.send();
}

function dispJSON(obj) {
  var s = "";
  var k = Object.keys(obj);
  for (var i in k) {
    s += k[i] + ":" + obj[k[i]] + "<br>";
  }
  return s;
}
</script>

response は responseType によって次のように異なります。text 以外はオブジェクトが返ってきますので、この例ではその一部やオブジェクトを文字列変換して表示しています。

（３）インスタンス・メソッド

（３－１）リクエストの初期化

新しく作成されたリクエストを初期化したり、既存のリクエストを再初期化したりします。

ただし、すでに有効なリクエスト（すでに open() が呼び出されたもの）に対してこのメソッドを実行すると、abort() を実行したのと同じことになります。

httpメソッドを指定することにより、行いたい処理をサーバに伝えることができます。この例では、GET、POST、HEAD を指定しています。

なお、この例では、通信は同期的に行っていて send() メソッドはレスポンスを受信するまで戻りません。

記述例

<span id="d1"></span><br>
<!-- 以下略 -->

<script>
function get(url, data) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url + "?" + data, false);
  xhr.send(null);
  return xhr.responseText;
}

function post(url, data) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', url, false);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send(data);
  return xhr.responseText;
}

function head(url) {
  var xhr = new XMLHttpRequest();
  xhr.open('HEAD', url, false);
  xhr.send();
  return xhr.getResponseHeader("date") + "&nbsp;&nbsp;" + xhr.getResponseHeader("content-type");
}

d1.innerHTML = get("cgi/get.cgi", "name=太郎&gender=male");
d2.innerHTML = post("cgi/post.cgi", "name=花子&gender=female");
d3.innerHTML = head("cgi/get.cgi");
</script>

通信を非同期的に行った場合には、レスポンスを受信する前に send() メソッドを抜けて次の命令を実行してします。

しかし、受信の完了は、イベントによって知ることができます。

記述例

<span id="d1"></span><br>
<span id="d2"></span><br>

<script>
function get(url, data) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {d2.innerHTML = xhr.responseText;}   // load イベント後の responseText 内容（受信している）
  xhr.open('GET', url + "?" + data, true);
  xhr.send(null);
  return xhr.responseText;    // send 直後の responseText 内容（まだ受信していない）
}

d1.innerHTML = get("cgi/get.cgi", "name=太郎&gender=male");
</script>

send() 直後の responseText には何も入っていませんが、load イベント後の responseText には受信した内容が設定されています。

（３－２）送信

サーバへリクエストを送信したり、すでに送信された要求を中止します。

Content-Type と送信された内容を表示しています。

ただし、Blob のときは Content-Type はなく、送信された内容は画像データの内容そのままです。この例では、それを base64 形式に変換して表示しています。なお、canvas 要素の画像の Blob への変換は、 とそれ以外では方法が異なります。「１１．１２ 画像出力」を参照してください。

は urlSearchParams をサポートしていませんので、二つ目の例は実行されていません。

また、Document は内容が多いので ... とし、それ以降を省略して表示しています。

記述例

<span id="d1"></span><br>
<span id="d2"></span><br>
<span id="d3"></span><br>
<img id="d4"><br>
<form form="form">
name: <input name="name" value="小島">
address: <input name="addr" value="茅ヶ崎">
</form>
<span id="d5"></span><br>

<script>
var xhr = new XMLHttpRequest();
func1();

function func1() {
  xhr.open("POST", "cgi/xmlhttprequest.cgi", true);
  xhr.onload = function() { document.getElementById("d1").textContent = xhr.response; func2();};
  xhr.send("普通の文字列") ;
}

function func2() {
  xhr.open("POST", "cgi/xmlhttprequest.cgi", true);
  xhr.onload = function() { document.getElementById("d2").textContent = xhr.response; func3();};
  var urlSearchParams = new URLSearchParams("name=小島&addr=茅ヶ崎");
  xhr.send(urlSearchParams);
}

function func3() {
  xhr.open("POST", "cgi/xmlhttprequest.cgi", true);
  xhr.onload = function() { document.getElementById("d3").textContent = xhr.response.substring(0, 200) + " ..."; func4();};
  xhr.send(document);
}

function func4() {
  xhr.open("POST", "cgi/xmlhttprequest.cgi", true);
  xhr.responseType = 'blob';
  xhr.onload = function() {
    var file = new Blob([xhr.response], {'type':'image/png'});
    var reader = new FileReader();
    reader.onload = function(event) {
      var arr = new Uint8Array(reader.result);      // ③サーバーから送り返された Blob を base64 形式に変換して表示する
      var b = "";
      for(var i = 0, len = arr.length ; i < len ; i++) {
        b += String.fromCharCode(arr[i]);
      }
      document.getElementById("d3").src = "data:image/png;base64," + window.btoa(b);
      func5();
    }
    reader.readAsArrayBuffer(file);
  };
  var image = new Image();
  image.onload = function() {
    var canvas = document.createElement("canvas");
    canvas.height = 80;
    var context = canvas.getContext("2d") ;
    context.drawImage(image, 0, 0, 74, 74);
    if (canvas.toBlob != undefined)                 // ②イメージが読み込まれたら Blob に変換しサーバーに送信する
      canvas.toBlob(function(result) { xhr.send(result); });
    else
      xhr.send(canvas.msToBlob());
  };

  image.src = "figures/bear.png";                   // ①イメージを設定する
}

function func5() {
  xhr.open("POST", "cgi/xmlhttprequest.cgi", true);
  xhr.onload = function() { document.getElementById("d5").textContent = xhr.response;};
  var formData = new FormData(document.getElementById("form"));
  xhr.send(formData) ;
}
</script>

abort() を実行すると、送信が中断します。

記述例

<span id="d1"></span><br>

<script>
var xhr = new XMLHttpRequest();
xhr.open("POST", "cgi/xmlhttprequest.cgi", true);
xhr.onprogress = function() {xhr.abort();};
xhr.onabort = function() {document.getElementById("d1").textContent = "中断（" + xhr.readyState + "）";};
xhr.onload = function() {document.getElementById("d1").textContent = "完了（" + xhr.readyState + "）";};
xhr.send("普通の文字列") ;
</script>

（３－３）ヘッダー

記述例

<span id="d1"></span><br>

<script>
var xhr = new XMLHttpRequest();
xhr.addEventListener('load',
  function(){
    document.getElementById("d1").textContent = xhr.getAllResponseHeaders();
    document.getElementById("d2").textContent = xhr.getResponseHeader("Content-Type");
  }, false);
xhr.open("GET", "data/sample.txt", true);
xhr.send();
</script>

Content-Type は、POST や PUT などの送信において、クライアントからサーバーにどのような種類のデータが実際に送られたかを伝えます。それが正しく設定されていないと適切な処理がされません。

記述例

<span id="d1"></span><br>

<script>
var xhr1 = new XMLHttpRequest();
xhr1.onload = function() { document.getElementById("d1").innerHTML = xhr1.responseText; };
xhr1.open("POST", "cgi/post.cgi", true);
xhr1.setRequestHeader("Content-Type", "text/plain;");             // プレーンテキスト
xhr1.send("name=太郎&gender=male");

var xhr2 = new XMLHttpRequest();
xhr2.onload = function() { document.getElementById("d2").innerHTML = xhr2.responseText; };
xhr2.open("POST", "cgi/post.cgi", true);
xhr2.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");    // Webサーバーへの POST送信
xhr2.send("name=太郎&gender=male");
</script>

（１）インスタンス生成

新規の FileReader インスタンスを生成します。

記述例

<script>
var req = new FileReader();  // ファイルを読み込むためのFileReaderオブジェクトを生成
</script>

（２）インスタンス・プロパティ

Blobオブジェクトをテキスト文字列として取得してみます。

記述例

<span id="d01"></span><span id="d02"></span> <!-- 略 --> <br>
<!-- 以下略 -->

<script>
function disp(message){
  document.getElementById("d0" + m).textContent = message;
  document.getElementById("d1" + m).textContent = reader.readyState;
  document.getElementById("d2" + m).textContent = reader.result;
  document.getElementById("d3" + m).textContent = reader.error;
  m++;
};

var m = 1;
var reader = new FileReader();     // FileReader オブジェクトを作成
reader.onloadstart = function() {disp("loadstart");};
reader.onprogress = function() {disp("progress");};
reader.onload = function() {disp("load");};
reader.onloadend = function() {disp("loadend");};
reader.onerror = function() {disp("error");};
disp("");
var blob = new Blob(["文字列の取得"], {type:"text/plain"}); // Blob オブジェクトを作成
reader.readAsText(blob); 
</script>

読込処理を中断させた場合は次のようになります。

（３）インスタンス・メソッド

記述例

<span id="d01"></span><span id="d02"></span><br>
<!-- 以下略 -->

<script>
var blob = new Blob(["文字列の取得"], {type:"text/plain"}); // Blob オブジェクトを作成
function readAsArrayBuffer() {
  var reader = new FileReader(); // FileReader オブジェクトを作成
  reader.onload = function() {
    d01.textContent = reader.result.byteLength;
    var data = new Uint8Array(reader.result);
    data.forEach(d => d02.textContent += d.toString(16).toUpperCase() + " ");
  };
  reader.readAsArrayBuffer(blob);
}
function readAsBinaryString() {
  var reader = new FileReader(); // FileReader オブジェクトを作成
  reader.onload = function() {
    d11.textContent = btoa(reader.result);
  };
  reader.readAsBinaryString(blob);
}
function readAsDataURL() {
  var reader = new FileReader(); // FileReader オブジェクトを作成
  reader.onload = function() {
    d21.textContent = reader.result;
  };
  reader.readAsDataURL(blob);
}
function readAsText() {
  var reader = new FileReader(); // FileReader オブジェクトを作成
  reader.onload = function() {
    d31.textContent = reader.result;
  };
  reader.readAsText(blob);
}

readAsArrayBuffer();
readAsBinaryString();
readAsDataURL();
readAsText();
</script>

abort() によって、読み取り操作を中止させると次のようになります。

記述例

<span id="d01"></span><br>
<!-- 以下略 -->

<script>
function disp(message){
  document.getElementById("d01").textContent = message;
  document.getElementById("d11").textContent = reader.readyState;
  document.getElementById("d21").textContent = reader.result;
  document.getElementById("d31").textContent = reader.error;
};

var reader = new FileReader(); // FileReader オブジェクトを作成
reader.onloadend = function() {disp("loadend");};
reader.onerror = function() {disp("error");};
var blob = new Blob(["文字列の取得"], {type:"text/plain"}); // Blob オブジェクトを作成
reader.readAsText(blob); 
reader.abort();   // 読み取り操作を中止させる  
</script>

File オブジェクトを使用した例は次のようになります。

記述例

<input id="file" type="file" accept="text/plain">
  エンコード：<select id="encoding">
 <option value="Shift_JIS">シフトJIS</option>
 <option value="UTF-8">UTF-8</option>
</select><br>
<span id="d"></span><br>

<script>
var reader = new FileReader(); // FileReader オブジェクトを作成
reader.onload = function() {
  d.textContent = reader.result;
}
file.onchange = function(e) {
  reader.readAsText(e.target.files[0], encoding.value);
}
</script>