温故知新 linux実践講座

温故知新 linux実践講座

温故知新。linuxを使いこなしてみよう。

ホーム » スクリプト入門 » Head Rush Ajax 学びながら読むAjax入門 を読む 2章

— 広告 —


— 広告 —

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] ) にある値がクリアされる。

<body onLoad="document.forms[0].reset();">

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);
    }
}
-- 広告 -- -- 広告 --

 

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

アフィリエイトで稼ぐ
プロフィール

ぴよふぁくとりぃです。

職業は自宅でサーバ管理、資格は薬剤師です。
趣味も職業もパソコンラブです。
よろしくね。
連絡先: admin@arakanoj.com
URL: http://piyofactory.com

検索
人気ページ
東京電力予想最大電力(万kW)
twitter
使い方を知れば知るほど楽しく使える Linux。
Linux の基本を覚えてもっともっと楽しいコンピュータの使い方を身につけましょう。