Ajaxを勉強しよう

このページはAjaxを勉強してみたい人向けの学習用ページです。サーバーを入れ替えたため一部CGIを使用したものが動作していません。時間のある時に修正します。また、書いてから、かなり時間が経過しているため内容的に古いものもあります。ご了承ください。
Ajaxで利用されるエフェクトに関しては別ページ(Ajax Effect)に移動しました。
Ajax関連書籍に関してはAjax関連書籍一覧ページを用意しました。
Prototype系ライブラリ サンプルプログラム【New !!】のページを用意しましたので、Prototype系のライブラリを利用している方は参考にしてみてください。
ミスや間違いなどがありましたらopenspc@po.shiojiri.ne.jpまでお願いします。

Last update:2008/3/2 PM 8:40
>>Ajaxライブラリリファレンス
>>jQuery入門
>>Google Maps API リファレンス【書籍：Google Maps API逆引きクイックリファレンス／書籍サンプルページ】
>>逆引きAdobe Spryリファレンス
>>Ajaxで利用できるWebサービスAPI一覧
>>IE6 vs IE7ベンチマーク（参考）
>>マイコミジャーナル（Ajax関連記事一覧）
第一章　Ajaxって？
  1. AjaxとRIA
  2. AjaxとDHTML
  3. AjaxとFlash
  4. Ajaxに必要な知識と技術
  5. Ajaxの弱点／難点

第二章　プログラムを作って体験しよう
  1. どうやって通信すればよいのか？
  2. ブラウザとOSの違い
  3. XMLHttpRequestを使う
  4. Internet Explorerの場合のデータの受け取り方
  5. 共通に利用できる関数を作成する
  6. データが受け取れなかった場合の処理
  7. サーバー上のテキストファイルを読み込みページ上に表示する
  8. サーバー上のHTMLファイルを読み込みページ上に表示する
  9. サーバー上のXMLファイルを読み込む
  10. サーバー上の画像ファイルを読み込む

第三章　データを解析し表示しよう
  1. タブ区切りテキストを表示する
  2. CSVデータを表示する
  3. ゲームのマップを表示する
  4. EXCELのXMLデータを表示する
  5. ファイルメーカーのXMLデータを表示する
  6. JSONのデータを表示する
  7. 簡単なデータベース検索を行う

第四章　サーバーにデータを送る
  1. 従来のフォーム送信(CGI)とどう違うのか？
  2. GETメソッドでデータを送信する
  3. POSTメソッドでデータを送信する
  4. サーバー側でデータを保存する
  5. 簡易エディタを作成する
  6. 画像カタログを作成する


第五章　クライアントサイドの技術
  1. 違和感の少ないインターフェース
  2. HTMLへのアクセス方法 - 入力フォーム -
  3. HTMLへのアクセス方法 - 画像 -
  4. HTMLへのアクセス方法 - div -
  5. HTMLへのアクセス方法 - その他のタグ -
  6. スタイルシートへのアクセス方法 - 背景色／文字色／文字サイズ -
  7. スタイルシートへのアクセス方法 - 位置指定 -
  8. スタイルシートへのアクセス方法 - クリッピング（表示範囲指定） -
  9. 各種イベントについて
  10. イベント処理の注意点
  11. ドラッグ処理を行う
  12. タイマーで定期的に処理を行わせる
  13. マウスの座標を取得する
  14. ページにタグを追加/削除する
  15. エラー処理 (try...catch)


第六章　他のサイトを利用する
  1. Yahoo検索結果を表示する
  2. goo検索結果を表示する
  3. Infoseek検索結果を表示する
  4. 楽天市場の検索結果を表示する
  5. 他のサイトをページ内に表示する
  6. RSSを利用して記事を検索する


第七章　Google Mapsを利用する
  1. Google Mapsを表示する
  2. 各種コントロールを表示する
  3. 表示（地図、衛星写真）を切り替える
  4. 指定座標に移動させる
  5. 座標を取得して表示する
  6. 情報ウィンドウを表示する
  7. マーカーを表示する
  8. イベント処理を行う


第八章　アマゾンを利用する
  1. アマゾンのWebサービスを利用するには
  2. 書籍一覧を表示する
  3. 表示条件を設定する
  4. 特定キーワードの書籍を表示する
  5. DVD一覧を表示する
  6. 家電商品一覧を表示する
  7. その他の商品表示について


第九章　Yahooを利用する
  1. Yahooのサービスを利用するには
  2. Web検索を行うには
  3. 検索オプションを指定する
  4. 画像検索を行う
  5. 動画検索を行う
  6. ディレクトリ検索を行う


第十章　郵便番号検索
  1. サーバー側で検索する
  2. クライアント側で検索する
  3. 検索を高速化する


第11章　RSS, Atomデータを利用する
  1. RSS 1.0 (RDF)を読み込む
  2. RSSの記事と内容を処理する
  3. RSS 2.0を読み込む
  4. Atomを読み込む
  5. 全ての形式に対応させる


第12章　応用サンプル
  1. 写真共有サイト
  2. アマゾンを利用してISBNコード検索を行う
  3. 蔵書共有 Ajax
  4. Yahoo JAPANランクインチェック
  5. Google AdSense文字数不足チェック
  6. Ajaxこっくりさん


第13章　マイクロソフトワードの処理
  1. マイクロソフトワードのXMLデータを表示する
  2. 太字（ボールド）に対応させる
  3. 斜体と下線（アンダーライン）に対応させる
  4. 色指定に対応させる
  5. 文字サイズ指定に対応させる


第14章　マイクロソフトエクセルの処理
  1. マイクロソフトエクセルのXMLデータ表示ライブラリ


第15章　(米) Yahoo Mapsを利用する
  1. Yahoo Mapsを表示する
  2. 各種コントロールを表示する
  3. ズームの処理
  4. ドラッグの処理
  5. サイズや位置を取得する
  6. イベントを処理する
  7. マーカーを表示する
  8. 情報ウィンドウを表示する


第16章　フォト蔵を利用する
  1. フォト蔵へのアクセス


第17章　お天気Webサービスを利用する
  1. 今日〜明後日の天気を表示する
  2. 天気概況を表示する
  3. 天気のアイコンを表示する


第18章　Googleの検索サービスを利用する
  1. Web検索を行う


第19章　Adobe Spryを利用する
  1. データを表示する
  2. 指定した範囲のデータを表示する
  3. 条件に一致したデータを表示する
  4. XMLファイルを読み込んでデータを表示する
  5. タグの属性値にXMLデータを埋め込む
  6. XMLデータをソートして表示する
  7. XMLデータをテーブルで表示する
  8. XPathフィルタリング


第20章　Adobe Spry（ウィジェット／エフェクト）
  1. アコーディオン
  2. エフェクト（フェード処理）
  3. エフェクト（ハイライト処理）
  4. エフェクト（グロー「拡大縮小」処理）
  5. エフェクト（潰し処理）
  6. エフェクト（シェイク処理）
  7. エフェクト（ブラインド処理）
  8. エフェクト（スライド処理）


第21章　jQuery
  1. イベントを設定する
  2. タグ名、クラス名、ID名による指定方法
  3. 内容を書き換える
  4. 属性値を設定する
  5. エフェクトを設定する
  6. 非同期通信を行う


第22章　Google AJAX Feed API
  1. Google AJAX Feed APIを利用する（前段階）
  2. RSSデータのタイトルを表示する
  3. RSSデータのタイトルと本文を表示する


第23章　TAGGY Search API
  1. TAGGY Search APIを利用する（前段階）
  2. 記事のタイトルを表示する
  3. 検索総数を表示する
  4. 任意のキーワードで検索し結果を表示する


■特殊効果（エフェクト）：Effectのページに移動しました


■付録１　既存のライブラリ等を利用する
  1. prototype.js：ダウンロードして使ってみよう
  2. prototype.js：データをページ上に出力する
  3. prototype.js：手軽にデータをページ上に出力する
  4. prototype.js：エラー処理
  5. prototype.js：フォームのエレメントの値を手軽に読み込む
  6. prototype.js：空欄チェック
  7. prototype.js：タグをカットする
  8. prototype.js：通信を中断する
  9. prototype.js：URLパラメータを生成する
  10. prototype.js：クラスを作成する
  11. prototype.js：バージョンを取得する


■付録２　Yahoo! UI Libraryを利用する
  1. Yahoo! UIライブラリをダウンロードして使ってみよう
  2. 不透明度の処理
  3. アニメーションの開始、終了時に処理を行う
  4. カレンダーをダウンロードして使ってみよう
  5. カレンダーで年月を指定して表示する
  6. カレンダーイベント
  7. 複数の日を選択できるようにする
  8. スライダーを表示する
  9. スライダーの値を設定する
  10. スライダーの値を取得する
  11. ツリービューを表示する
  12. ページ上のオブジェクトを移動させる
  13. ページ上のオブジェクトの座標を取得する
  14. ドラッグする
  15. ドラッグで移動量を制限する
  16. ドラッグ中に座標を表示する
  17. 非同期通信を行う
  18. 通信エラーの処理
  19. 通信状態のチェック


■付録３　Dojoを利用する
  1. Dojoをダウンロードして使ってみよう
  2. Widget カレンダー (Date Picker)
  3. Widget カラーパレット (Color Palette)


■付録４　Prototype JavaScript Windows（マルチウィンドウシステム）
  1. ウィンドウを開いて表示する
  2. ダイアログを表示する


■付録５　Lighbox JS（スライド）/Lightbox Gone Wild（ページ内にページを表示）
  1. 格好良く写真を表示する
  2. ディレクトリ内の写真枚数に応じて処理する
  3. ページ内にページを表示する


■付録６　カーセンサーラボ
  1. メーカー一覧を表示する
  2. 件数を表示する
  3. 色別に件数を表示する
  4. メーカー別に件数を表示する
  5. サムネールを表示する
  6. カタログ検索


■付録７　フロムエー・ナビ
  1. 求人総数を表示する
  2. 求人会社を表示する
  3. 給与を表示する
  4. 職種の詳細を表示し企業サイトへリンクする


■付録８　Smatch!（スマッチ／物件情報）
  1. 物件総数を表示する
  2. 物件名を表示＆リンクする
  3. 物件の詳細情報を表示する


■付録9　じゃらん（宿情報）
  1. 検索で見つかった宿数を表示する
  2. 宿名を表示＆リンクする
  3. サムネール画像を表示する


■付録10　script.aculo.us（スクリプタキュラス）
  1. slider.js　横スライダー
  2. slider.js　縦スライダー
  3. slider.js　スライダー値の範囲を指定する
  4. slider.js　スライダーの値を限定する
  5. builderjs　ノードを追加する
  6. dragdrop.js　ドラッグする
  7. dragdrop.js　ドロップする
  8. dragdrop.js　ソートする
  9. 編集可能にする
  10. オートコンプリート（ローカル）
  11. オートコンプリート（サーバー）


■付録11　Link Thumbnail（リンクサムネール）
  1. リンク先のサムネール画像を表示する


■付録12　reflection（リフレクション／反射効果）
  1. 不透明度と高さを設定する


■関連リンク（Ajaxの記事など）
  1. Ajaxの価値を再考する