Head Rush Ajax 学びながら読むAjax入門 を読む 2章
2章 Ajax リクエストを作成する
非同期JavaScript の内部事情を知る。
異なる種類のブラウザにリクエストを送信する方法、処理状態とステータスコードをマスターすることに挑戦する。
その他にダイナミックHTML(dhtml)のテクニックをいくつか習得する。
- ブレークネック宅配ピザ
- Ajaxスタイルのブレークネックピザ
- アプリを図式化する
- 設計図を描こう
- HML基礎講座:ユーザ入力を受け取る
- Webページでイベントが発生したとき、ブラウザによってJavaScript関数を実効することで、ユーザがそのページに入力した値にアクセスすることができる。
- onChange
- イベントハンドラでHTMLとJavaScript を関連付ける
- onChange
- onFocus
- onBlur
- DOM( Document Object Model)を使って電話番号を取得する
- JavaScriptは、DOMを使ってWebブラウザにWebページの情報を要求する。
- WebブラウザからWebページ全体にアクセスするにはdocument変数を使う。
- ブラウザをさがせ!
- requestオブジェクトの作成
- 複数のブラウザに対応する
- PHP... at a glance
- リクエストURLによってデータをサーバに運ぶ
- サーバにリクエストを送信する
- 顧客情報を取得する
- requestオブジェクトの処理状態が変更されるたびに、ブラウザは毎回コールバック関数を実効する
- httpの処理状態の世界 p.104
- 接続開始前
- 接続の初期化
- レスポンスの処理中
- サーバレスポンスの取得
- サーバレスポンスの完了
- サーバから送信された値を使ってHTMLページを更新
- 処理状態を確認する
- ブラウザは何をしているの? readyState
- ブラウザは、JavaScriptのrequestオブジェクトを使って、サーバレスポンスを利用する
- requestオブジェクトから、サーバのレスポンスデータを取得する
- var hogehoge = request.responseText;
- 注文フォームを更新する
- DOMを使ってWebページを更新する
- アプリケーションをテストする
- ブラウザがリクエストURLをキャッシュするとき...
- ブラウザは、同一のリクエストURLが発行されると、時間節約するために、サーバにリクエストを送信せずに、キャッシングテーブルにあるレスポンスをコードに返す。
- 60秒で復習しよう
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!");
設計図を描こう
- アプリケーションを実現するために必要な捨てっっ付を書き込んで、必要な関数やそれらの関係をメモしてみる。
イベントハンドラのまとめ
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);
}
}