【Javascrpt】「XMLHttpRequest」オブジェクト - サーバーのファイルを読み込む方法

使用手順	サンプルコード
XMLHttpRequest()インスタンス生成	let インスタンス変数 = new XMLHttpRequest();
ファイルをオープンする	インスタンス変数.open('GET', 'https://ドメイン名.com/ディレクトリ名/ファイル名.txt', true)
読み込み完了ステータスの値を取得する	インスタンス変数.readyState
現在のXMLHttpRequest()のステータスを取得する	インスタンス変数.status
読み込んだファイルのテキストを取得する	インスタンス変数.responseText
XMLHttpRequest()の終了	インスタンス変数.send();

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://ドメイン名.com/ディレクトリ名/ファイル名.txt', true);

//「onreadystatechange」は、読み込み状況が変化するごとに、ステートメント変更してくれる。
xhr.onreadystatechange = function(){
if((xhr.readyState == 4) && (xhr.status == 200)){
var data_list = xhr.responseText.split("\n");
var output = '';

for(let i=0;i<3;i++){
output += '<li>' + data_list[i] + '</li>';
}

document.getElementById('example').insertAdjacentHTML('afterbegin', '<ul>' + output + '</ul>');

}
}

xhr.send(null);

var xhr = new XMLHttpRequest();
xhr.open('GET', 'ファイルのURL'); // ダウンロードしたいファイルのURLを指定する

xhr.onprogress = function(event) {// ダウンロードに変化があった時に発生する処理
if (event.lengthComputable) {
var percentComplete = (event.loaded / event.total) * 100;
console.log(percentComplete + '% downloaded');
// ここでプログレスバーの幅を更新するなどの処理を行う
}
};

xhr.onload = function() {　// ダウンロードが完了したときに発生する処理
if (xhr.status === 200) {
console.log('ダウンロード完了');
// ダウンロードが完了した後の処理をここに記述する
}
};

xhr.onerror = function() {　// エラーが発生したときに発生する処理
console.log('ダウンロード中にエラーが発生しました');
};

xhr.send();