「JavaScript/XMLHttpRequest」の版間の差分
削除された内容 追加された内容
→外部リンク: Feetch API を紹介したいが、その前に PROMISE の解説を書く必要がある |
→XMLHttpRequest: イベントハンドリングを改善 |
||
11 行
== XMLHttpRequest ==
<syntaxhighlight lang="javascript">
req.addEventListener("progress", (ev) => {
req.open('GET', 'example.xml', false);▼
if (ev.lengthComputable) {
// 進捗表示
if ( req.status != 200 ) {▼
console.log("${percent}％転送しました。")
}
return;▼
else {
// 長さ不明
console.log("転送中。")
}
});▼
req.addEventListener("loadstart", (ev) => console.log("転送を開始しました。"));
req.addEventListener("load", (ev) => console.log("転送しました。"));
req.addEventListener("loadend", (ev) => console.log("転送が終了しました。"));
req.addEventListener("error", (ev) => console.log("ファイルの転送中にエラーが発生しました。"));
req.addEventListener("abort", (ev) => console.log("ユーザーが転送をキャンセルしました。"));
req.addEventListener("timeout", (ev) => console.log("転送がタイムアウトしました。"));
req.addEventListener("readystatechange", (ev) => {
switch (req.readyState) {
case XMLHttpRequest.UNSET:
console.log("UNSET");
case XMLHttpRequest.OPENED:
console.log("OPENED");
break;
case XMLHttpRequest.HEADERS_RECEIVED:
console.log("HEADERS_RECEIVED");
break;
case XMLHttpRequest.LOADIND:
console.log("LOADIND");
break;
case XMLHttpRequest.DONE:
const status = req.status;
else {
console.log(req.responseText);
}
break;
default :
console.log(`${req.readyState} は仕様にないXMLHttpRequest.readyState`);
}
});
▲ alert( req.responseXML );
▲req.open('GET', './example.xml', false);
▲ alert( req.responseText );
▲ // ...
▲};
req.send(null);
</syntaxhighlight>
※ イベントリスナーは open() を呼び出す前に追加する必要があります（もし、そうしないのであれば progress イベントは発火しません）。
== 脚注 ==
| |||