【Javascrpt】「XMLHttpRequest」コンストラクタ - サーバーのファイルを読み込む方法
【Javascrpt】
「XMLHttpRequest」コンストラクタ - サーバーのファイルを読み込む方法
「XMLHttpRequest」コンストラクタは、
Webとサーバーの間でデータ交換をするために、
「HTTPリクエスト」を発行することができる。
「XMLHttpRequest」で「HTTP」リクエストを送るには、
・「XMLHttpRequest」オブジェクトを作成する
・「URL」を開いてリクエストを送信する。
・トランザクションが完了
・オブジェクトに結果が埋め込まれる
・「HTTP」ステータスコードやレスポンスの本文などを確認する
といった流れで手続きを行う。
XMLHttpRequest()インスタンス生成
let インスタンス変数 = new XMLHttpRequest();
ファイルをオープンする
インスタンス変数.open('GET', 'https://ドメイン名.com/ディレクトリ名/ファイル名.txt', true)
読み込み完了ステータスの値を取得する
インスタンス変数.readyState
現在のXMLHttpRequest()コンストラクタのステータスを取得する
インスタンス変数.status
読み込んだファイルのテキストを取得する
インスタンス変数.responseText
XMLHttpRequest()コンストラクタの終了
インスタンス変数.send();
「XMLHttpRequest」を使うサンプルコード
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);
Back
「XMLHttpRequest」コンストラクタ―の「プロパティ」「メソッド」
項目 | 説明 |
コンストラクター |
XMLHttpRequest() | |
| |
| |
プロパティ |
channel | |
mozAnon | |
mozBackgroundRequest | |
mozResponseArrayBuffer | |
mozSystem | |
multipart | |
onreadystatechange | |
readyState | |
response | |
responseText | |
responseType | |
responseURL | |
responseXML | |
status | |
statusText | |
timeout | |
upload | |
withCredentials | |
| |
| |
メソッド |
abort() | |
getAllResponseHeaders() | |
getResponseHeader() | |
open() | |
openRequest() | |
overrideMimeType() | |
send() | |
sendAsBinary() | |
setRequestHeader() | |
| |
| |
イベント |
onreadystatechange | |
abort | |
error | |
load | |
loadend | |
loadstart | |
progress | |
timeout | |
| |
| |
継承 |
XMLHttpRequestEventTarget | |
EventTarget | |
| |
| |
XMLHttpRequest に関連するページ |
FormData | |
XMLHttpRequestEventTarget | |
XMLHttpRequestUpload | |
| |
Back