「JavaScript/XMLHttpRequest」の版間の差分
削除された内容 追加された内容
→XMLHttpRequest: statusプロパティなどajax関連プロパティの一覧表 |
→XMLHttpRequest: onreadystatechange プロパティ |
||
20 行
そして、test.htmlをwebサーバのドキュメントルートにアップロードしておくこと。
それができたら、下記コードを、webサーバを介してwebブラウザでアクセスしよう。
なお、下記コードで alert させているのは、通信途中の動作確認もしたいためである。
;コード（htmlファイル）
97 ⟶ 101行目:
</syntaxhighlight>
:※ なお、上コード中の「xhr」とは別に予約語ではなく、単なる変数名である。なので、「xhr」でなくとも他の変数名でも構わない。
もし、test.htmlというファイル名でローカルホストにアップロードしたなら、
106 ⟶ 110行目:
;表示結果
動作に成功している場合、alertボックスを何回かクリックして閉じたあと、最終的に下記のように表示される（なお alert の用途はここでは通信途中の確認用）。
<pre>
118 ⟶ 121行目:
status is 200 !
</pre>
この「200」や「4」は、JavaScriptの規格で意味が決まっている数字である（技術的な解説については、のちのセクションで後述する）。
130 ⟶ 132行目:
また、「200」と言うのは直前のリクエストに対して「成功」という意味である。失敗なら、200以外のメッセージであり、たとえば「0」や「404」（リソースが存在しない場合）などである。
コードの技術的な解説については、のちのセクションで解説する。
=== ミスの原因 ===
通信に成功せずに表示結果が上記の成功例と異なる場合、なんらかの失敗をしている。
;よくあるミス
・ダブルクリック起動してしまっているミス<br>
142 ⟶ 147行目:
・サーバ立ち上げていないミス<br>
また、そもそもwebサーバが立ち上がっていない場合も当然ながら上記コードの動作確認には失敗するので、ローカルホスト自体[http://localhost http://localhost]にもアクセスしてみて、確認してみよう。サーバが立ち上がっているなら、webサーバ（XAMPPまたはApacheなど）の用意している画面（ロゴマークなどがある画面）が表示されるハズであるので、その画面が表示されるか確認してみよう。
=== 技術的な解説 ===
191 ⟶ 193行目:
上述の readstate プロパティおよび status プロパティの説明を合わせて考えれば、readstate 「4」および status 「200」ならば、とりあえず通信の環境構築には成功しています。
コード末尾のほうにある send() メソッドは、ここでは「通信を開始せよ」程度の意味である。「GET」コマンドでも「POST」コマンドでも、どちらの場合でも、send() メソッドによって通信を開始する。
send() メソッドによって
xhr.onreadystatechange = function(){ }
で指定した関数の内部が実行される。なお onreadystatechange プロパティは「オン・レディ・ステイト・チェンジ」である。
| |||