動態數據使用 Ajax 來實現，且通常為異步發生

動態數據建造的網頁被稱為數據驅動網頁，即僅有框架，數據負責網頁的內容

• XMLHttpRequest

  • readyState ： 請求狀態：0 ( 未初始 )， 1 ( 開啟 )， 2 ( 已傳送 )， 3 ( 接受中 )， 4 ( 已載入 )

  • status ： HTTP 的請求狀態 ： 404 ( 找不到文件 )， 200 ( OK )

  • onreadystatechange ： 請求狀態改變時調用的函數引用

  • responseText ： 服務器返回的響應數據，格式為純文本字符串

  • responseXML ： 服務器返回的響應數據，格式為 XML 節點樹構成的對象

  • send() ： 傳送請求，交給服務器處理

  • open() ： 準備請求，指定請求的類型，URL 及其他細節

  • abort() ： 取消請求

• GET 和 POST

  • GET ： 從服務器獲取數據，send() 中參數為 null

  • POST ： 上傳數據到服務器，send() 中參數為要傳送的數據

• 自定義對象 AjaxRequest

  • request

  • getReadyState()

  • getStatus()

  • getResponseText()

  • getResponseXML()

  其中有個十分重要的方法 send()

  send(type, url, handler, postDataType, postData);
   
  

  • type 為 GET 或 POST，若為 GET，則省去後兩項不寫

  • handler 為處理響應的回調函數

  • postDataType 為被傳送的數據類型

  • postData 為要傳送的數據

  簡單好用的方法，可以的話盡量使用 AjaxRequest 對象

• 示例

  • XMLHttpRequest 對象

    1 var request = new XMLHttpRequest();
    2 
    3 request.onreadystatechange = handler;

    • GET

      1 request.open("GET","xxx.xml",true);
      2 
      3 request.send(null
       
      );

      由於傳送的值為空，該服務器返回數據，故 send() 中為 null

    • POST

      1 request.open("POST","xxx.php",true);
      2 
      3 request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
      4 
      5 request.send("待傳輸數據");

      由於需傳輸數據到服務器，指明數據類型，在 send() 中填入該數據

    • 是否傳輸成功

      1 if(request.status = 200){
      2     alert(request.responseText);
      3 }

      若狀態為200，則傳輸成功，彈出響應內容

  • AjaxRequest對象

    var ajaxReq = new AjaxRequest();

    • GET

      ajaxReq.send("GET","xxx.xml",handleRequest);

      get 為從服務器獲取數據，故腳本為客戶端腳本 xml 文件

    • POST

      ajaxReq.send("POST","xxx.php",handleRequest,"application/x-www-form-urlencoded;charset=UTF-8",postData);

      post 為從客戶端上傳數據到服務器，需要服務器端腳本 php 文件，同時需指明數據類型， postData 格式為 "名稱=值&名稱=值&名稱=值"，即 URL-encoded 格式

END~~~≥ω≤

動態數據