Sars' History

本頁是唯讀的，您可以看到原始碼，但不能更動它。您如果覺得它不應被鎖上，請詢問管理員。
====== Head Rush Ajax 讀書筆記 ======
===== Chapter Three =====
==== HTML ====
將 Javascript 獨立成檔案。在 <script...> 和 </script> 中間最好空一格，不然有些瀏覽器無法載入！
    <script type="text/javascript" src="ajax.js"> </script>
    <script type="text/javascript" src="coffee.js"> </script>

第一個 div，主要控制 coffeemaker1-status 中的文字。
透過 document.getElementById("coffeemaker1-status"); 來存取。
      <div id="coffeemaker1">
        <h2>Coffee Maker #1</h2>
        <p><img src="images/CoffeeMaker1.gif" alt="Coffee Maker #1" /></p>
        <div id="coffeemaker1-status">Idle</div>
      </div>

整個網頁的第一個 form，也就是 document.forms[0]。
<code>
  <form>
    ...
    // forms[0].size
    <input type="radio" name="size" value="small" checked="true">Small</input>
    <input type="radio" name="size" value="medium">Medium</input>
    <input type="radio" name="size" value="large">Large</input>
    ...
    // forms[0].beverage
    <input type="radio" name="beverage" value="mocha" checked="true">Mocha</input>
    <input type="radio" name="beverage" value="latte">Latte</input>
    <input type="radio" name="beverage" value="cappucino">Cappucino</input>
    ...
    <input type="button" onClick="orderCoffee();" value="Order Coffee" />
  </form>
</code>

==== ajax.js ====
<code>
function createRequest() {
  var request = null;
  try {
      request = new XMLHttpRequest();
  } catch (trymicrosoft) {
      ......  // for M$
  }

  if (request == null)
      alert ("Error creating request object!");
  else {
      return request;    // 傳出初始好的物件
  }
}

// 分成兩個要求，避免後面的請求把前面的蓋掉
var request1 = createRequest();
var request2 = createRequest();
</code>

==== coffee.js ====
<code>
// 不同的 request 用不同的物件，url 也不一樣
function sendRequest(request, url) {
  request.onreadystatechange = serveDrink;
  request.open("GET", url, true);
  request.send(null);
}
</code>

當伺服器的回應完成之後，備妥狀態為 4，即時再度請求物件，也無法重新設定備妥狀態，使 request1.readyState == 4 會永遠成立，但 readyState 是唯獨屬性，只能由瀏覽器去更改，因此以建立新物件的方式重設備妥狀態。
<code>
function serveDrink() {
  if (request1.readyState == 4) {
    if (request1.status == 200) {
      var response = request1.responseText;    // 取得 server 傳回來的資料
      var whichCoffeemaker = response.substring(0,1);    // 分解字串
      var name = response.substring(1,response.length);

      if (whichCoffeemaker == "1") {
        var coffeemakerStatusDiv1 = document.getElementById("coffeemaker1-status");
        replaceText(coffeemakerStatusDiv1, "Idle");
      } else {
        var coffeemakerStatusDiv2 = document.getElementById("coffeemaker2-status");
        replaceText(coffeemakerStatusDiv2, "Idle");
      }

      alert(name + ", your coffee is ready!");
      request1 = createRequest();    // 利用重新創造一個新物件的方式讓 readyState 重設
    }
  } else if (request2.readyState == 4) {
      if (request2.status == 200) {
        ... ... 同上 1 ... ...
      } else
          alert("Error! Request status is " + request.status);
  }
}
</code>

<code>
// 從網頁表單接受訂單
function orderCoffee() {
  var name = document.getElementById("name").value;
  var beverage = getBeverage();
  var size = getSize();

  var coffeemakerStatusDiv1 = document.getElementById("coffeemaker1-status");
  var status = getText(coffeemakerStatusDiv1);

  if (status == "Idle") {
    replaceText(coffeemakerStatusDiv1, "Brewing " + name + "'s "
                                                  + size + " " + beverage);
    document.forms[0].reset();    // 成功送出資料後清除表單
    var url = "coffeemaker.php?name=" + escape(name) + "&size=" + escape(size) + "&beverage=" + escape(beverage) + "&coffeemaker=1";
    sendRequest(request1, url);
  } else {
    var coffeemakerStatusDiv2 = document.getElementById("coffeemaker2-status");
    var status = getText(coffeemakerStatusDiv2);

    if (status == "Idle") {
      ... 同上 ...
    } else {
      alert("Sorry! Both coffee makers are busy. Try again later.");
    }

  }
}
</code>

<code>
// 利用 DOM 取出所圈選的資料
function getSize() {
  var sizeGroup = document.forms[0].size;    // 整個網頁中第一個 form 裡的 size
  var i;
  for (i=0; i<sizeGroup.length; i++) {
    if (sizeGroup[i].checked == true)
      return sizeGroup[i].value;
  }
  return 0;
}

function getBeverage() {
  var beverageGroup = document.forms[0].beverage;    // 整個網頁第一個 form 裡的 beverage
  ... ... }
</code>
Sars' History

使用者工具

網站工具

頁面工具
