let request = new XMLHttpRequest();XMLHttpRequest オブジェクトを使用することで Ajax を使った非同期通信を行うことができる。
HTTPリクエストを初期化する(XMLHttpRequest: open())
（Web API ＞ XMLHttpRequest）
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/open
open(メソッド, URL[, 非同期[, ユーザー名[, パスワード]]])XMLHttpRequest オブジェクトの open メソッドを使って HTTP リクエストの初期化を行う。
最初の引数には HTTP リクエストメソッドを指定する。 ‘GET’ 、 ‘POST’ 、 ‘HEAD’ 、 ‘DELETE’ などの値を文字列で指定する。主に使用されるのは ‘GET’ と ‘POST’ で、サーバから指定した URL でデータを取得する場合は ‘GET’ 、サーバの指定した URL に対して何らかの処理（例えばサーバへファイルをアップロードしたり、データベースを更新したりする）を行う場合は ‘POST’ を使う。
2 番目の引数にはリクエストの送信先となる URL を文字列で指定する。
3 番目の非同期通信を行うか同期通信を行うのかを論理値で指定する。非同期通信の場合は true 、同期通信の場合は false。デフォルトの値は true のため、引数を省略した場合は非同期通信となる。
4 番目と 5 番目の引数には認証が必要となる場合のユーザー名とパスワードを文字列で指定する。
// 指定した URL にあるテキストファイルを GET メソッドを使って非同期でサーバから取得する
let request = new XMLHttpRequest();
request.open('GET', 'https://www.example.com/data.txt', true);サーバとの通信が正常に行われたかどうかを確認する
サーバからのレスポンスの受信が完了した場合でも、それはサーバから目的とするデータをレスポンスとして受信したのか、それともサーバが見つからなかったり別の理由でエラーを受信したのかは分からない。その為、サーバとの通信が正常に行われたのかどうか HTTP ステータスコードを確認する。
XMLHttpRequest.status プロパティには HTTP ステータスコードの値が整数の値として格納されている。
主な HTTP ステータスコードは以下の通り。
200：OK
403：Forbidden
404：Not Found
500：Internarl Server Error
503：Service Unavailable
正常に通信が行われた場合は 200 が返る。それ以外の場合は何らかのエラーが発生している。(なお send メソッドが送信される前は 0 が格納されている）
// サーバからのレスポンスの受信が完了したあとで、
// status プロパティの値を調べて 200 だった場合に受信したデータの処理を記述する
let request = new XMLHttpRequest();
request.onreadystatechange = function(){
if (request.readyState == 4){ // 完了（レスポンスの受信完了）
if (request.status == 200){
// 受信したデータの処理を記述する
}
}
}
request.open('GET', 'https://www.example.com/data.txt', true);Response.statusText
（Web API ＞ Response）
https://developer.mozilla.org/ja/docs/Web/API/Response/statusText
statusText は Responseインターフェースの読み取り専用プロパティで、 Response.status にある HTTP ステータスコードに対応するステータスメッセージを保持する。
例えば、ステータスコード 200 に対しては OK、 100 に対しては Continue、 404 に対しては Not Foundとなる。
受信したデータを取り出す
（Web API ＞ XMLHttpRequest）
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/responseText
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/responseXML
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/response
XMLHttpRequest.responseText
XMLHttpRequest.responseXML
XMLHttpRequest.response受信したデータを取り出すには、データの種類に応じて上記の 3 つのプロパティを参照する。
responseText プロパティは受信するデータがテキストの場合に使用する。 responseXML プロパティは受信するデータが XML または HTML をあらわす Document オブジェクトの場合に使用する。 response プロパティは XMLHttpRequest.responseType プロパティで指定した形式のデータとして受信したデータを扱う。
// テキストデータを取得するために responseText プロパティを参照して取得したデータを変数に取り出す
let request = new XMLHttpRequest();
request.onreadystatechange = function(){
if (request.readyState == 4){
if (request.status == 200){
let data = request.responseText;
console.log(data);
}
}
}
request.open('GET', 'https://www.example.com/data.txt', true);HTTPリクエストをサーバーに送信する(XMLHttpRequest: send())
（Web API ＞ XMLHttpRequest）
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/send
send(データ)XMLHttpRequest オブジェクトの send メソッドを使ってサーバにリクエストを送信する。
引数にはリクエストを送信するときにサーバに送るデータを指定する。 GET メソッドを使用する場合は通常データはサーバに送信しないので null を指定する。
let request = new XMLHttpRequest();
request.onreadystatechange = function(){
if (request.readyState == 4){
if (request.status == 200){
let data = request.responseText;
console.log(data);
}
}
}
request.open('GET', 'https://www.example.com/data.txt', true);
request.send(null);サーバから受信したテキストをHTMLページ内に表示する
書き換える方法は DOM を用いて対象となるノードを取得し、 innerHTML プロパティで値を書き換える。
<div id="result"></div>let node = document.getElementById("result");
node.innerHTML = request.responseText;onerror
ajax通信がエラーで失敗した時にerrorイベントが発生し、ここに設定したコールバック関数が呼び出される。
エラーは例えば同一オリジンポリシーに違反した時に発生する。ステータスコード404のレスポンスを受け取った場合はエラーは発生しない。
var xmlHttpRequest = new XMLHttpRequestEventTarget() ;
xmlHttpRequest.onerror = function ( event ) {
console.log( event ) ;
}