Ajaxで重要なものは、XmlHttpRequestオブジェクトを利用した非同期通信です。サンプルコードの実行結果はこちら
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Ajaxを使ってサーバーとやりとりを行う</title> </head> <body> <form name="testForm"><p> <input type="button" value="load" onclick="getFile('data/test.txt');"> </p></form> <div id="testResult"> </div> <script> var req; function getFile(path){ /* new演算子とコンストラクタでXMLHttpRequestオブジェクトを 生成します。非同期通信では、リクエストを送ってからデータ取得が 完了するまでの間、別の処理を行うことが可能です。 そのため、いつデータを取得したかを知らなければいけません。 そのために使用されるのがコールバック関数です。 */ req = new XMLHttpRequest(); /* コールバック関数は、onreadystatechangeプロパティで 設定します。 */ req.onreadystatechange = showData; /* openメソッドは、サーバーに送るHTTPリクエストの内容を指定 第1引数:HTTPプロトコルのコマンド 「GET」はデータを取得するためのコマンドです。 第2引数:データファイルのパス 第3引数:非同期・同期の指定 true:非同期通信 false: 同期通信 */ req.open("GET",path,true); /* sendメソッドが実行されたときに、サーバーに HTTPリクエストが送信される。 GETコマンドの場合は、引数に何もないことを示す「null」を指定 */ //HTTPリクエストを送信 req.send(null); } function showData(){ /* 下記のif文でデータの取得が完了したかを判定します。 readtState:通信状態を表すプロパティ status:サーバー側がリクエストに対して返す ステータスコードと呼ばれる値を表すプロパティ 詳細は記事をご覧ください。 */ if( req.readyState == 4 && req.status == 200 ){ /* サーバーから取得したテキストが格納されている プロパティです。その値を要素div「testResult」の innerHTMLプロパティに代入し、HTMLと解釈して 表示します。 */ document.getElementById("testResult") .innerHTML = req.responseText; } } </script> </body> </html> |
HTTPリクエストを送る順番
サンプルコードの21行目~49行目にコメントを付しました。
そちらをご覧ください。
コールバック関数の処理内容
詳細はサンプルコードの57~70行目のコメントをご覧ください。
●readyStateの値
値 | 値の説明 |
---|---|
0 | 未初期化状態 |
1 | リクエスト準備中 |
2 | リクエスト完了 |
3 | データ受信中 |
4 | データ取得完了 |
●statusの値
コード | コードの説明 |
---|---|
200 | リクエストが正しく処理された |
400 | リクエストが不正なものであった |
403 | アクセスが拒否された |
404 | ファイルが見つかりません |
405 | 指定したメソッドがサポートされていない |
415 | 指定したメディアタイプがサポートされていない |
500 | サーバー内部でエラーが発生した |
505 | リクエストしたHTTPプロトコル・バージョンはサポートされていない |