Linux実践講座

Linux実践講座

コンピュータを便利に使う tips などをメモ

--- 広告 ---
--- 広告 ---

Head Rush Ajax 学びながら読むAjax入門 を読む 2章

読了までの目安時間:約 7分

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

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

 

この記事に関連する記事一覧


最近の投稿
 
%d人のブロガーが「いいね」をつけました。