Sars' History

本頁是唯讀的，您可以看到原始碼，但不能更動它。您如果覺得它不應被鎖上，請詢問管理員。
====== Head Rush Ajax 讀書筆記 ======
===== Chapter One =====
  * 使用 JavaScript 物件做出請求，而__不是__提交表單。
  * 請求與回應皆由網頁瀏覽器處理，而非直接由 JavaScript 程式處理。
  * 當網頁瀏覽器收到非同步請求的回應，會以伺服器的回應「回頭呼叫」JavaScript 程式。

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

==== 建立請求物件 ====

<code>
<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!");
}
</code>

==== 送出請求 ====
<code>
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);    // 送出請求
}
</code>

  * 四種備妥狀態：
    - 連線初始化
    - 正在處理
    - 伺服器即將完成請求
    - 完成
  * onreadystatechange 會影響所有備妥狀態

==== HTML 部份 ====
  <span id="boards-sold">1012</span>

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

==== 更新資料 ====
有用到書本提供的現成 JavaScript text-utils.js 處理網頁上的文字。
<code>
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);    // 更新網頁
    }
}
</code>
Sars' History

使用者工具

網站工具

頁面工具
