「JavaScript/XMLHttpRequest」の版間の差分
削除された内容 追加された内容
初心者向けの内容を加筆。私はこれで分かった。 |
|||
10 行
<!-- Feetch API を紹介したいが、その前に PROMISE の解説を書く必要がある -->
== XMLHttpRequest ==
=== 前提の環境や概要 ===
まず、これらの機能は、webサーバを仲介して行う必要がある。よってコードをテストするには、まず ApacheやXAMPPなどを立ち上げて、そこのドキュメントルートで行う必要がある。ドキュメントルートの説明については、『[[PHP/確実に動作させるまで]]』に説明しておいたので、webサーバに詳しくなければ参照してもらいたい。
とりあえず、設定がうまく行ってるかどうかを、次のコードで試してみよう。下記プログラムは、XMLHttpRequestの動作確認用のプログラムである。（本来なら動作確認のほかに、サーバとのデータ送受信などを行いたいのだが、コードが長くなるので、今回はまだ動作確認だけにしている。）
ただし、アクセス先のテキストファイルとして aisatu.txt を用意してもらいたい（あいさつテキストの意味）。今後の作業のため、aisatu.txt には「hello world」とでも書いておく。
;コード（htmlファイル）
<syntaxhighlight lang="javascript">
<script>
var flag=0; // デバッグ用に使った残骸
var xhr = new XMLHttpRequest();
xhr.responseType = 'text' ;
xhr.onreadystatechange = function(){
if (xhr.status === 0){
//document.write("0 toutatu<br>"); // 0に到達
}
if (xhr.status === 200){
document.write("200 toutatu<br>");
}
if (xhr.status === 404){
document.write("404 status<br>");
}
if (xhr.readyState === 0 ){
document.write("read is 0<br>");
}
if (xhr.readyState === 1 ){
document.write("read is 1<br>");
flag =1;
alert("test1");
}
if (xhr.readyState === 2 ){
document.write("read is 2<br>");
flag =2;
alert("head2");
}
if (xhr.readyState === 3 ){
document.write("read is 3<br>");
flag =3;
//alert("Load3");
}
if (xhr.readyState === 4 ){
document.write("read is 4. Done!<br>");
document.write("status is " + xhr.status + " ! ");
// alert("DDD4"); // デバッグ用
}
if (xhr.readyState === 4 && xhr.status === 0 ){
alert("fault."); // 失敗
}
if (xhr.readyState === 4 && xhr.status === 200 ){
alert("Great! reach4 and State 200 tassei.");// 4に到達。 200 state を達成
}
// document.write("uytre"); // デバッグ用
} ;
//xhr.open('GET', 'http://localhost/aisatu.txt', true); // 下でうまくいかない場合はこれで試す
xhr.open('GET', '/aisatu.txt');
//xhr.open('GET', 'husei'); // 意図的に失敗したい場合に使う。
xhr.send(null);
</script>
<body>
jjf // html読み込みをしてるかどうかの確認に使うための、無意味な文字列
</body>
</syntaxhighlight>
;表示結果
動作に成功している場合、下記のように表示される。
<pre>
200 toutatu
read is 2
200 toutatu
read is 3
200 toutatu
read is 4. Done!
status is 200 !
</pre>
この 200 や 4は、JavaScriptの規格で意味が決まっている。
readStateプロパティが4なら、すべての応答データを取得できている<ref>山田よしひろ『JavaScript本格入門』、P395</ref>という意味である。
なので、とりあえず、成功なら 4 が表示されているハズである。
また、「200」と言うのは直前のリクエストに対して「成功」という意味である。失敗なら、200以外のメッセージであり、たとえば「0」や「404」（リソースが存在しない場合）などである。
=== コード ===
<syntaxhighlight lang="javascript">
const req = new XMLHttpRequest();
| |||