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

3章　非同期アプリケーション

　ユーザがサーバにリクエストを送信した後、

レスポンスが帰ってくるのを待たずに

そのまま操作を続けられるようにするにするにはどうすればよいか

を学ぶ。

1. 非同期の本質とは？
2. Ajaxな珈琲メーカーアプリケーションを作ろう
3. Ajax開発、行ったり来たり

「反復開発（iterative development）」

• アプリケーションの多くは「反復的」に作られる。一度奇術をすませた部分にも、必要な場合はそこに戻って改良を加える方法。
4. JavaScriptとHTMLを分離させる
• アプリケーションのロジック（JavaScript）を、アプリケーションの構造とスタイル（HTML と CSS）から分離させるために、JavaScriptは別ファイルに記述することにする。
1. ajax.js：すべてのAjaxアプリケーションに胸痛のどー度を格納するファイル
2. coffee.js：コーヒーメーカーのアプリケーションに固有のコードを格納するファイル
5. JavaScriptを分離する
6. リクエストを送信してコーヒーを淹れる
7. ラジオボタングループから値を得るには

function getSize() {
  var sizeGroup = document.forms[0].size;
  for (i=0; i
非同期アプリケーションと同期アプリケーション
<div>内のテキストの取得と変更
<div>エレメント内のテキストを更新する
オーダーボタンを押下して注文が行われたと同時にフォームをクリアする

フォームの内容をクリアするには、reset()メソッドを使う。
orderCoffee関数内で document.forms[0]reset();

PHP... at a glance
コールバック関数を作成する
serveDrink()

サーバからのレスポンスを受信すると、注文者の名前と、コーヒーを作成し終えたコーヒーメーカーの番号を調べ、次に、そのコーヒーメーカーのステータスを「待機中」に変更して注文者にコーヒーが出来たことを知らせる。

JavaScriptのsubstring()関数を使う
coffee.jsで使用している。
最終テスト（ですよね？）
requestオブジェクトが2つ必要です！
2つのrequestオブジェクトを使う
非同期ワールドへようこそ！

非同期通信とは

非同期とは、Webサーバがリクエストに応答している間、その処理が終わるのをクライアント側が待たなくても良いということを意味する。つまり、ユーザは「足止め」されずに、そのまま操作を続けることができ、サーバがリクエスト処理を終えたら、それをサーバから知らせてもらう。

サンプル 「非同期なコーヒーメーカー」をつくるための３つの材料

1. コーヒーメーカーHTML
   • 注文入力を受け付けるとともに、２つのコーヒーメーカーがどのような状態にあるかを表示する。
2. JavaScriptコード
• requestオブジェクトを作成するコード
• サーバサイドのコーヒー作成スクリプトに注文を送信する関数
• コーヒーが出来たら、それを注文した人に知らせるための関数
• これらのjavaScript関数とWebフォームのボタンを関連付けるためのイベントハンドラ
3. サーバ側でコーヒーを作成するスクリプト PHP
• このアプリケーションでは２つのコーヒーを同時に作る必要があるので、このスクリプトでは、２つのコーヒーメーカーを使って注文を処理しなくてはならない。
• このPHPスクリプトが子ヒーを作る。注文はすべてこのスクリプトに送信する。

サンプル coffee.jsとで定義されているfunction

sendRequest(request, url)
getSize()
getBeverage()
orderCoffee()
serveDrink()

<p id="clear"></p>

CSS：clear:bothは回り込みの解除です。

#clear {
  clear: both;
}

substring関数、length関数

文字列の中から、指定した範囲の文字列を切り出す。

var newString = myString.substring(startIndex, endIndex);

var newString = myString.substring(2, myString.length)

startIndex：切り出し開始文字のインデックス。１番先頭文字=0に注意。
endIndex：切り出し終了文字のインデックス。