Ajaxの基本的な仕組みをサンプルで学習

Ajaxな日々
Ajax Download ScriptTaculousr Rico YAHOO API YAHOO API(JP) GOOGLE API Jquery Ajaxサイト -
  左の箱をこの↓にDrag Dropすれば内容が表示されます。
 

Ajaxをサンプルプログラムで学習しよう!!

ドラッグドロップ

 0.はじめに

ようこそAjaxな日々へ。各コンテンツを上の箱へドラッグドロップしてください。

ドラッグドロップ

 1.

Ajaxで通信を行う(基本)*IE7対応


Ajaxで非同期な通信を行います。xmlhttpを使ったオーソドックスな方法からprototype.jsを 使ったAjax.Request,Ajax.Updaterなどの通信の仕方を勉強します。IE7にも対応しています。

ドラッグドロップ

 2.

AjaxでXMLの操作(扱い方)


web2.0式にタグを使う開発方法を勉強します。xmlは今や必須のアイテムです。

ドラッグドロップ

 3.

Ajaxで別ドメインからXMLを取得する


YAHOOやGOOGLEのような別のサイトからXMLデータを取得する方法を勉強します。 クロスドメイン制約などの決まりがあり、自サイトのデータを扱うより開発の手間がかかります。

ドラッグドロップ

 4.

JSONPを使う(クロスドメインの克服)


JSONPを使えば別ドメインにあるデータをCGIなど使わず簡単に取得できます。 JSONPは取得するデータ形式がJson形式でなければなりません。ここでは Jqueryを使ってJSON形式のデータを扱います。

ドラッグドロップ

 5.

Ajaxでドラッグドロップする


ScriptTaculousを使ってドラッグドロップの基本的な動きやスライド操作について勉強します。

ドラッグドロップ

 6.

Ajaxでeffect関数を使う


ScriptTaculousのeffect関数を使うと様々な動きをするオブジェクトが作成できます。 少し遊んでみましょう。

ドラッグドロップ

 7.

AjaxでRico関数を使う


Ricoライブラリを使うと図形の形を簡単に変える事ができます。ここでは右上、左上の角を丸くした 図形を作ってみます。ホームページを作るときに重宝します。


ようこそAjaxな日々へ。このサイトはAjax初心者の方へ第一歩を踏み出して頂く目的で作成しました。 Sec.1からSec.4でAjaxの開発の基本をご理解いただけるかと思います。今後も私のメモ書きを兼ね、 時間の許す限りサイトを拡張していきます。

各タグを上のボックスにドラッグドロップすれば内容が表示されます。



Asynchronous  JavaScript  And  XML       mail:ajax_days@mail.goo.ne.jp