• 使用 JavaScript 物件做出請求，而不是提交表單。
• 請求與回應皆由網頁瀏覽器處理，而非直接由 JavaScript 程式處理。
• 當網頁瀏覽器收到非同步請求的回應，會以伺服器的回應「回頭呼叫」JavaScript 程式。

• DIV - 透過 DIV 的 ID 可套用 CSS 樣式
• SPAN - 可裝飾文字，但不必開始一個新段落或區塊。

<script language="javascript" type="text/javascript">

var request = null;
function createRequest() {
        try {
                 request = new XMLHttpRequest();    // for firefox
        } catch (trymicrosoft) {
                try{
                         request = new ActiveXObject("Msxml2.XMLHTTP");    // for IE
                 } catch (othermicrosoft) {
                         try {
                                request = new ActiveXObject("Microsoft.XMLHTTP");
                        } catch (failed) {
                                request = null;
                        }
                }
         }

        if (request == null)
                alert ("Error creating request object!");
}

function getBoardsSold() {
        createRequest();
        var url = "getUpdatedBoardSales-ajax.php";
        url = url + "?dummy=" + new Date().getTime();
        createRequest();
        request.open("GET", url, true);    // 初始化連線，將資料以 GET 的方式送到伺服器上給 url 檔案處理，true 表非同步
        request.onreadystatechange = updatePage;    // 當備妥狀態改變時，瀏覽器會執行此程式，函式名稱後面不能有括弧
        request.send(null);    // 送出請求
}

• 四種備妥狀態：
  1. 連線初始化
  2. 正在處理
  3. 伺服器即將完成請求
  4. 完成
• onreadystatechange 會影響所有備妥狀態

<span id="boards-sold">1012</span>

<form method="GET">    // 不送表單，因此不再需要 action
<input value="Show Me the Money" type="button" onClick="getBoardsSold();" />    // type 改用 button
</form>

有用到書本提供的現成 JavaScript text-utils.js 處理網頁上的文字。

function updatePage() {
    if (request.readyState == 4 ) {    // 在備妥狀態為完成時動作
        var newTotal = request.responseText;    // 請求物件的屬性，放置來自伺服器的回應資料
        var boardsSoldEl = document.getElementById("boards-sold");    // 取得現有網頁中的資料
        var cashEl = document.getElementById("cash");
        replaceText(boardsSoldEl, newTotal);    // 更新網頁

        var priceEl = document.getElementById("price");
        var price = getText(priceEl);
        var costEl = document.getElementById("cost");
        var cost = getText(costEl);
        var cashPerBoard = price - cost;
        var cash = cashPerBoard*newTotal;

        cash = Math.round(cash*100)/100;
        replaceText(cashEl, cash);    // 更新網頁
    }
}