以下為讀AJAX 網頁程式設計--Google成功背後的技術一書的筆記

AJAX核心-XMLHttpRequest

AJAX引擎只是一個JavaScript的物件而以,也就是XMLHttpRequest物件。
微軟IE5最先支援這個物件,Mozilla 1.0(Netscape 7),Safari 1.2及Opera都開始支援相容的物件。
值得注意的是XMLHttpRequest物件並不是標準,只是知名的瀏覽器都相繼支援。
XMLHttpRequest物件早在1999年IE5發表時就已出現,何以直到2005年才以AJAX之名顯赫於世?
起因不外乎Google的大量應用,以及Adaptive Path公司的Jesse James Garrett所發表的Ajax:A New Approach to Web Applications,這篇文章替AJAX正名,也揭示了整個AJAX背後的精神與意義。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5"/>
<script language="Javascript">

// AJAX 物件
var ajax;

// 依據不同的瀏覽器,取得 XMLHttpRequest 物件
function createAJAX() {
 if (window.ActiveXObject) {
  try {
   return new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
   try {
    return new ActiveXObject("Microsoft.XMLHTTP");
   } catch (e2) {
    return null;
   }
  }
 } else if (window.XMLHttpRequest) {
  return new XMLHttpRequest();
 } else {
  return null;
 }
}

// 非同步傳輸的回應函式,用來處理伺服器回傳的資料
function onRcvData () {
 if (ajax.readyState == 4) {
  if (ajax.status == 200) {
   var content = document.getElementById ('content');
   content.innerHTML = ajax.responseText;
  } else {
   alert ("伺服器處理錯誤");
  }
 } 
}

// 非同步送出資料
function ajaxSendRequest(uri) {
 ajax = createAJAX() ;
 if (!ajax) {
  alert ('使用不相容 XMLHttpRequest 的瀏覽器');
  return 0;
 }

 ajax.onreadystatechange = onRcvData;
 ajax.open ("GET", uri, true);
 ajax.send ("");
}

</script>
</head>
<body>
<div id="content"></div><br>
<input type="button" value="查詢" onclick="ajaxSendRequest('hello.php')" >
</body>
</html>

上面程式的流程:
1.按下按鈕觸發事件
2.ajaxSendRequest()
 a.取得XMLHttpRequest物件
 b.設定非同步傳輸完成函式
 c.使用open()函式初始設定

●設定非同步傳輸完成函式
 ajax.onreadystatechange = onRcvData;
 ajax.open ("GET", uri, true);
 ajax.send ("");
AJAX的精神在於非同步傳輸,固AJAX在送出請求後,並不會去等待回應,因而必須指定一個特定的函式讓XMLHttpRequest物件在接到到伺服器回應時通知JavaScript程式。
在XMLHttpRequest物件中,是透過onreadystatechange來指定這個函式。
當XMLHttpRequest物件收到回應時,會自動呼叫onreadystatechange所指定的函式去處理。

●使用open()函式初始設定
 ajax.onreadystatechange = onRcvData;
 ajax.open ("GET", uri, true);
 ajax.send ("");
open()函式原型如下:
open("method","URL"[,"asyncFlag"[,"userName"[,"password"]]])
method參數:POST, GET
URL參數:指定所要存取檔案的位置
asyncFlag參數:決定採用非同步傳輸或不採用

●使用send()傳輸
 ajax.onreadystatechange = onRcvData;
 ajax.open ("GET", uri, true);
 ajax.send ("");
XMLHttpRequest的open()函式只是用來做初始化及設定參數,真正的資料傳遞是由send()負責。

●取得伺服器的回應
function onRcvData () {
 if (ajax.readyState == 4) {
  if (ajax.status == 200) {
   var content = document.getElementById ('content');
   content.innerHTML = ajax.responseText;
  } else {
   alert ("伺服器處理錯誤");
  }
 } 
}
當XMLHttpRequest物件收到伺服器的回應後,會設定下列屬性:
1.readyState:
 0:尚未讀取
 1:讀取中
 2:已下載完畢
 3:資訊交換中
 4:處理完畢
2.Status:即HTTP協定的狀態碼
3.responseText:回應內容
4.responseXML:回應內容XML格式


參考資料:AJAX 網頁程式設計--Google成功背後的技術

jck11 發表在 痞客邦 PIXNET 留言(4) 人氣()


留言列表 (4)

發表留言
  • chukong
  • 謝謝分享
  • Ting
  • THX for Help! Awesome
  • Joushua
  • thank you for help
  • 林芸琦
  • 非常感謝分享,很簡單易懂