AJAX学习笔记

AJAX学习笔记
参考馮彥文的《AJAX 的 client/server 溝通機制探究》

AJAX是Asynchronous JavaScript And XML的缩写
主要用到XHTML&CSS、DOM、JavaScript、XMLHttpRequest技术

基本的过程
// 建立 XHR
request = new XMLHttpRequest();
// 設定回呼函式
request.onreadystatechange=handleResponse;
// 開啟連結
request.open("GET","http://abc.com",true);
// 傳送資料
request.send(null);

function handleResponse() {
  // 檢查 XHR 狀態
  if(request.readyState == 4){
    // 檢查 http 狀態
    if(request.status == 200){
      // 讀取回傳 XML 資料
      var doc = request.responseXML;
      // 取得網頁上需被更新的 node 位置
      var node = document.getElementById(“resp");
      // 設定該 node 的內容
      node.innerHTML =
        doc.documentElement.childNodes[0].nodeValue;
    }
  }
}

//因为浏览器支持的方式不同，IE的支持方式老，所以前面建立XHR实际应该如下：
function httpRequest(reqType,url){
  if(window.XMLHttpRequest){ // Mozilla, Opera, Safari, …
    request = new XMLHttpRequest();
  } else if (window.ActiveXObject){ // IE
    request=new ActiveXObject("Msxml2.XMLHTTP");
    if (!request){
        request=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  if(request){
    …
  } else {
    alert("Your browser does not permit the use of all "+
          "of this application's features!");
  }
}

AJAX可以传TEXT,HTML,XML,JAVASCRIPT.
XHR 限制僅能存取該網站上的資料, 無法存取其他網站的資料.