Head Rush Ajax 讀書筆記

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

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

靜態 JavaScript：程式不在任何 function 中，當瀏覽器載入頁面時即執行

<script language="javascript" type="text/javascript">
// 靜態 JavaScript
        var request = null;
        // 原本放在 createRequest() 中
        try {
                 request = new XMLHttpRequest();    // 非微軟的瀏覽器(Safari、FireFox、Mozilla、Opera...etc)
        } catch (trymicrosoft) {
                try{
                         request = new ActiveXObject("Msxml2.XMLHTTP");    // 大多數 IE
                 } catch (othermicrosoft) {
                         try {
                                request = new ActiveXObject("Microsoft.XMLHTTP");    // 還是 IE
                        } 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);    // 送出請求
}

四種備妥狀態：

  0. 尚未初始化
  1. 連線已經初始化
  2. 正在處理
  3. 伺服器即將完成請求，將資料傳給瀏覽器
  4. 完成，可透過請求物件的 responseText 屬性取得回應資料

• 每次備妥狀態一改變，瀏覽器都會去執行 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);    // 更新網頁
    }
}

若 url 一樣時，瀏覽器會快取，再次送出請求(按下 button)時，瀏覽器會直接拿之前快取的資料，不會真正再向伺服器請求一次資料，造成資料無法更新。

在 url 放入一些無意義的假參數(如時間)，即可每次產生不同的 url。

url = url + "?dummy=" + new Date().getTime();