Linux実践講座

2章　Ajax リクエストを作成する

非同期JavaScript の内部事情を知る。

異なる種類のブラウザにリクエストを送信する方法、処理状態とステータスコードをマスターすることに挑戦する。

その他にダイナミックHTML(dhtml)のテクニックをいくつか習得する。

1. ブレークネック宅配ピザ
2. Ajaxスタイルのブレークネックピザ
1. アプリを図式化する
2. 設計図を描こう
3. HML基礎講座：ユーザ入力を受け取る
1. Webページでイベントが発生したとき、ブラウザによってJavaScript関数を実効することで、ユーザがそのページに入力した値にアクセスすることができる。
2. onChange
4. イベントハンドラでHTMLとJavaScript を関連付ける
1. onChange
2. onFocus
3. onBlur
5. DOM( Document Object Model)を使って電話番号を取得する
1. JavaScriptは、DOMを使ってWebブラウザにWebページの情報を要求する。
2. WebブラウザからWebページ全体にアクセスするにはdocument変数を使う。
6. ブラウザをさがせ！
7. requestオブジェクトの作成

   var request = null;

   try {
     request = new XMLHttpRequest();
   } catch (trymicrosoft) {
     try {
       request = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (othermicrosoft) {
       try {
         request = new ActiveXObject("Microsoft.XMLHTTP");
       } catch (failed) {
         request = null;
       }
     }
   }

   if (request == null)
     alert("Error creating request object!");

8. 複数のブラウザに対応する
9. PHP... at a glance
10. リクエストURLによってデータをサーバに運ぶ
11. サーバにリクエストを送信する
12. 顧客情報を取得する
• requestオブジェクトの処理状態が変更されるたびに、ブラウザは毎回コールバック関数を実効する
13. httpの処理状態の世界 p.104
1. 接続開始前
2. 接続の初期化
3. レスポンスの処理中
4. サーバレスポンスの取得
5. サーバレスポンスの完了
6. サーバから送信された値を使ってHTMLページを更新
14. 処理状態を確認する
15. ブラウザは何をしているの？ readyState
• ブラウザは、JavaScriptのrequestオブジェクトを使って、サーバレスポンスを利用する
16. requestオブジェクトから、サーバのレスポンスデータを取得する
• var hogehoge = request.responseText;
17. 注文フォームを更新する
• DOMを使ってWebページを更新する
18. アプリケーションをテストする
19. ブラウザがリクエストURLをキャッシュするとき...
• ブラウザは、同一のリクエストURLが発行されると、時間節約するために、サーバにリクエストを送信せずに、キャッシングテーブルにあるレスポンスをコードに返す。
20. 60秒で復習しよう

---

設計図を描こう

1. アプリケーションを実現するために必要な捨てっっ付を書き込んで、必要な関数やそれらの関係をメモしてみる。

イベントハンドラのまとめ

onChange：onChangeイベントは、フォームにあるフィールドの値が変更されるたびにじっこうされます。
実効される時：

• フィールドの値が変更されたとき

onFocus：onFocusに関連付けられた JavaScriptは、フィールドまたはその他のページコンポーネントがフォーカスされたときに実効されます。
実効される時：

• フィールドがフォーカスされたとき

onBlur：onBlurはユーザがフィールドから別の場所に移動したときに、関連付けられたコードを実効します。
実効される時：

• フィールドからフォーカスがはずれたとき

tips

ページのロード時に、HTMLドキュメント内の最初のフォーム( forms[0] ) にある値がクリアされる。

DOMを使って電話番号を取得する。

var phone = document.getElementByID("phone").value;

escape関数

escape関数を用いて、日本語などそのままURLに渡すと問題が起こる可能性のある文字をエンコードする。
unescape関数は、エンコードされた文字列をデコードし、元の文字に戻す。

静的JavaScript

• Webページで、関数の外に記述されているJavaScriptのコードは、すべて「静的」に実行される。 p.92

ブラウザがリクエストURLをキャッシュするとき...

リクエストURLにダミーの引数を加える。

var url ="hogehoge.php";
url = url + "?dumy=" + new Date().getTime();

リクエストのステータスを確認する

requestoオブジェクトには、statusというプロパティがあり、ここに格納された値を見ることによって、エラーがおきているかどうかを確認することが出来る。

if ( request.readyState == 4) {
    if ( request.status == 200 ) { // 処理が問題なく完了したときのステータスコード 200
        処理
    } else
        alert("エラー！ステータスコード：" + request.status);
    }
}