XMLHttpRequest 非同期通信と同期通信の使い方

今回は、AJAXの通信を行う際に使われるオブジェクト、「XMLHttpRequest」について見ていきます。

AJAXとは、「Asynchronous Javascript And Xml」という造語の略で、非同期通信をJavaScriptの技術で行うことを言います。

AJAXについてはネットに詳しい記事が多数ありますので、ぜひ色々と検索してみてください。

XMLHttpRequest
1. プロパティ
メソッド
非同期通信
同期通信
あとがき

XMLHttpRequest

XMLHttpRequestを使用するには、以下のプロパティとメソッドを使用します。

プロパティ

プロパティ (XMLHttpRequest +)	意味
.onreadystatechange	readyState 属性が変化する度に呼び出される
.readyState	リクエストの状態を返す
.response	サーバーから受信するデータ
.responseType	サーバーから受信するデータの型を定義
.responseText	サーバーから受信したデータをテキスト形式で返す
.responseXML	XML、HTML形式で返す
.responseURL	レスポンスがあるURL
.status	ステータスを返す
.statusText	レスポンス文字列を返す
.timeout	リクエストを自動的に終了するための時間。ミリ秒単位で指定
.ontimeout	リクエストがタイムアウトするたびに呼び出されます。

これ以外にもプロパティは複数あります。

メソッド

メソッド (XMLHttpRequest +)	意味
.abort()	リクエスを中止します。
.getAllResponseHeaders()	レスポンスヘッダーを文字列として返す
.getResponseHeader()	指定子たレスポンスヘッダーを文字列として返す
open()	リクエストを初期化する
send()	リクエストを送信する
.setRequestHeader()	リクエストヘッダーの値を設定する
.overrideMimeType()	レスポンスのMIMEタイプを上書きする

非同期通信

データの処理

let xml = new XMLHttpRequest();
xml.open('GET','https://hitoridemanabou.net/data.txt',true);

openメソッドは以下の構文を取ります。

open(method,URL,[async,user,password]);

method：主に「GET」か「POST」
URL：URLを文字列で指定
async：trueは非同期通信、falseは同期通信（trueは省略可能）
user：必要に応じて
password：必要に応じて

GETは指定したURLでデータを取り込みます。

POSTは、指定したURLに何らかの処理を送信します。

クライアントの状態を確認するために、「.readyState」プロパティを使用します。

let xml = new XMLHttpRequest();
xml.open('GET','https://hitoridemanabou.net/data.txt',true);

console.log(xml.readyState);
 1

ここでは「1」が返されました。

クライアントの状態を表す値には以下のものがあります。

値	状態	意味
0	UNSENT	クライアントは作成済み、open()は呼ばれていない
1	OPENED	open()は呼び出し済み
2	HEADERS_RECEIVED	send()は呼び出し済み
3	LOADING	ダウンロード中
4	DONE	完了

readyStateプロパティが変更された時に、値を確認するプロパティが、「onreadystatechange」プロパティになります。

「onreadystatechange」プロパティはコールバック関数を伴います。

また非同期通信の時だけ使用することが出来ます。

let xml = new XMLHttpRequest();
xml.onreadystatechange = function(){
    console.log(xml.readyState);
}

xml.open('GET','https://hitoridemanabou.net/data.txt',true);
1

サーバーとの通信が正常に行われたかどうかを確認するために、「status」プロパティを使用します。

statusプロパティには、HTTPレスポンスステータスコードが格納されています。

（詳しいステータスコードについては、MDNのページでご確認ください。）

正常に通信が行われた場合は、「200」が返されます。

受信したデータを取り出すのに、ここでは「responseText」プロパティを使用します。

let xml = new XMLHttpRequest();
xml.onreadystatechange = function(){
    if(xml.readyState == 4){
        if(xml.status == 200){
            let data = xml.responseText;
            console.log(data);
        }
    }
}
xml.open('GET','https://hitoridemanabou.net/data.txt',true);

受信データの処理についてとりあえず完成しました。

サーバーに送信

サーバーにリクエストを送信するのに、「send」メソッドを使用します。

GETメソッドを使用する時は、サーバーにデータは送信しないので、「null」を指定します。

xml.send(null);

コンソールに出力する

今までの内容を踏まえて、コンソールに出力してみましょう。

最初に、「.txt」ファイルをサーバーのルートディレクトリにアップロードしておきます。

何か適当な文字を入力しておいてください。

let xml = new XMLHttpRequest();
xml.onreadystatechange = function(){
    if(xml.readyState === 4){
        if(xml.status === 200){
            let data = xml.responseText;
            console.log(data);
        }
    }
}
xml.open('GET','https://hitoridemanabou.net/sampledata.txt',true);
xml.send(null);

 Hello World!!
This is sample.

実際に当サイトで実行して頂ければテキストが表示されます。

同期通信

同期通信を行うには、open()メソッドのtrueをfalseに変更する必要があります。

let xml = new XMLHttpRequest();
xml.open('GET', 'https://hitoridemanabou.net/sampledata.txt', false);
xml.send(null);

if(xml.status === 200){
    let data = xml.responseText;
    console.log(data);
}
 Hello World!!
This is sample.

なお、同期通信は処理が止まってしまうために、非推奨になっていますし、実際に使用されることもほとんどありません。