HOME  »   チップス  »  Head Rush Ajax 学びながら読むAjax入門 を読む 1章
チップス

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


ajaxbooks　なんとなく便利に使っている Ajax (Asynchronous Javascript and XML )ですが、これからリッチ・クライアントな業務アプリを作るためにまじめに学習しておこうと思って、7章からなる 「Head Rush Ajax 学びながら読むAjax入門」をのんびりとマイペースで読み進んでみようと思っています。

今日は、はじまりのはじまり。第1章を読み進んでいきます。

1章　次世代の Web アプリケーション Ajax を始めよう

  1. Web、このリロードされるもの
  2. 2世紀へようこそ！
    • 非同期リクエスト。
    • ページをリロードすることなく必要な部分だけを更新する。
  3. 「リロードなんてカッコ悪い。もう必要ないよ」
  4. 1章のハイラトロリール
    • 非同期アプリケーションでは、JavaScriptで作成したオブジェクトを用いてリクエストを送信する。フォームからの送信は行わない。
    • リクエストとレスポンスの処理は、Web ブラウザによって行われる。JavaScript のコードで直接処理されるのではない。
    • 送信した非同期リクエストに対するサーバからのレスポンスは、ブラウザが受信する。ブラウザはそのレスポンスを用いてjavaScript を「コールバック」する。
  5. requestオブジェクトを作成する
    • XMLHttpRequestと ActiveXObject ブラウザの種類に応じて、異なった request オブジェクト名が必要になる。
  6. PHP ... at a glance
  7. これまでのサーバの仕事...
  8. これからのサーバの仕事
  9. 接続を初期化する
  10. Webサーバに接続する
  11. イベントハンドラを追加する
  12. updatePage()をコーディングする
  13. そもそもWebアプリとは何なのでしょう
  14. Webブラウザの登場
  15. サーバから受信したレスポンスを、ブラウザはどう処理すればよいか？
    • onreadystatechange：サーバから返されたHttpステータスコード
    • readyState：リクエストに対するサーバレスポンス受信時、ブラウザが関数を実効する時に利用する。
    • onreadystatechange：リクエストのステータスを表す数値。読込み中、処理中、処理終了、などがある。
    • status：リクエストに大使、サーバがレスポンスとして返した値。
  16. ブラウザに指示を送信する
  17. サーバからのレスポンスを取得する
    • responseText
  18. 適切な処理状態を確認する
    • readyStateプロパティは、リクエストがその時点でどの状態にあるかを示す。
      1. 接続が開始される。
      2. リクエストが処理され始める。
      3. サーバによるリクエストの処理はもうすぐ完了する。
      4. すべて完了。差バーのレスポンスを使用する準備ができた。
  19. 60秒で復習しよう
  • Ajax アプリケーションでは、JavaScript はサーバと非同期で通信する。
    （ページ全体をリロードさせることなく、返された値を処理することができる。）
  • Ajax では、Webフォームをそのまま送信するのではなく、JavaScriptを使ってリクエストを作成する。
  • Ajax をすべてのリクエストで使うのではなく、動的にページを処理したい場合、たとえばイメージを変更したり、フィールドを更新したり、ユーザの操作に反応したい時に Ajax を使う。
  • フォームへの入力が完了して、ユーザに「送信」ボタンをクリックさせて、フォーム全体をWebサーバに送信したい場合などは Ajax を用いるべきではない。
  • <div>で指定したidをCSSから参照することで、<div>の範囲にまとめてスタイルを摘要することができる。
  • サンプルで使用している <span>エレメント内のテキストを更新する関数 replaceText()、getText()は text-utils.js で定義されている。

参考URL
Head First Labs
XMLHttpRequest wikipedia

DOMとは

Ajax Tower より

DOMとはDocument Object Modelの略でHTMLやXML文書を取り扱うためのAPIです。

DOMではHTMLやXML文書をノードと呼ばれるものの階層的な構造として識別します。そしてJavaScriptなど様々なプログラミング言語やスクリプトから、扱いたいノードを特定し操作できるようにする仕組みを提供してくれます。

JavaScriptはクライアント側のブラウザ上で動作しますので、JavaScriptからDOMを利用するにはブラウザでもDOMを扱えるようになっている必要があります。ただ現状ではほとんど全てのブラウザでデフォルトでDOMを扱えるようになっていますので特別なにかをする必要はありません。

XMLHttpRequestによる送受信（基本形）

Ajaxはじめの一歩　XMLHttpRequest より

[1] XMLHttpRequest オブジェクト生成
↓
[2] open メソッド
　(POSTやGET、リクエストするURL、同期か非同期かなどを指定)
↓
[3] send メソッド
　(データ送信)
↓
【サーバー側】
↓
[4] onreadystatechange イベント(ie以外ではコールバックなonloadも使えます)
　(送受信状態が変った時に起動するイベント)
↓
[5] readyState プロパティ
　(送受信状態をあらわす値、4で受信完了。onloadなら不要。)
↓
[6] responseTextまたは、responseXML プロパティ
　(受信データ)


   チップス