ほしい物リストを作る 3

前回からの引き続きで、「ほしい物リストを作る」。

XMLHttpRequestを説明するまえに、今後よく見かけるであろうAjaxという用語について。
「All About-Ajaxの基本」にわかりやすい説明がありましたので、まずはご一読を。
XMLHttpRequestによる送受信の流れもわかりやすく書いてあります。

Ajaxとは、Asynchronous JavaScript + XML(非同期なJavaScriptとXML)の略。
XMLHttpRequestはAjaxの中心となる技術で、ページ遷移なしで、非同期にサーバーとデータのやりとりをすることができます。ひどく目新しい技術、ということではなく、従来のJavaScriptの延長線上にあるものと考えて差し支えありません。ただ、はじめてこれを目にすると、かなり衝撃をうけます。
（ｊQueryのライブラリを使用する方法もありますが、このサイトでは使用していません）

Ajaxの特徴
情報を取ってくるのにページ遷移不要ですので、現在表示中のページに影響をおよぼしません。
非同期なので、ブラウザがロックしません（読み込み完了しなくても、別の操作ができます）。
上記のような理由もあり気づきにくいですが、gmailやGoogleマップなどでも使用されています。

ほしい物リストを作るための、もうすこし具体的な話
1.フリーページ
・ほしい物リスト表示ページの枠を作成→HTML、CSS
・Cookieを読んで、商品IDを取得→ｊQuery、JavaScript
・Ajaxで商品詳細ページのデータ取得→XMLHttpRequest
・取得後、必要情報を切り出し→JavaScript（indexOf、substring）
・ほしい物リスト表示ページをの枠に入れていく→JavaScript（document.getElementById(id).innerHTML）
2.商品詳細ページ
・ほしい物リストに追加するボタンを設置。クリック時にCookieに商品IDを書き込み→ｊQuery

XMLHttpRequestは、おいおい解説記事を書く予定ではありますが、まずは各自自習でよろしくお願いします。
簡単なサンプルを使用して（コピペするだけでも良いので）、動くところを実際にみて確認しておくと、このあとの作業でイメージがしやすいと思います。

次回「ほしい物リストを作る 4」 では、サンプルを作ってみます。