AJAX學習筆記

2012年2月17日星期五

AJAX學習筆記

市面上常用的瀏覽器很多

設計一個AJAX網站

為了讓所有使用者都可以正常瀏覽

就需要判別目前使用的瀏覽器

用其所定義的XMLHttpRequest物件

if (window.XMLHttpRequest)
{// 如果是 Mozilla, Safari,...
  http_request = new XMLHttpRequest();
} 
else if (window.ActiveXObject)
{// 如果是 IE
  try
  {// IE 又分成新版和舊版的，其處理方式也不同
   // 新版的 IE
    http_request = new ActiveXObject("Msxml2.XMLHTTP");
  }
  catch (e)
  {
    try
    {// 舊版的 IE
      http_request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e) {}
  }
}

建立好XMLHttpRequest物件之後

開始跟web server要資料

http_request.open("GET/POST", "資源URL", true/false);
http_request.send([參數]);

參數說明：
open()
一、GET/POST是看web server支援情況
二、資源只可存取於同一個web server，指定其完整的URL
三、是否非同步，true可在資源傳送完成前執行其他動作

send()
GET直接帶null

http_request.send(null);

如果用POST
需定義MIME類型及URL參數

http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
http_request.send("[id1]=[value1]&[id2]=[value2]&[id3]=[value3]&...");

既然是非同步

那麼在發送我們要哪些資源前

需要先做好"完成資源傳送"的事件處理函數

http_request.onreadystatechange = function()
{
  // 要執行的事件函數
};

可以用readyState得知送出的http_request處理狀況
0 未初始化：未呼叫open()
1 載入中：未呼叫send()
2 載入完成：server以接收，可以取得content header
3 資源傳送中：可以取得部分傳送完成的資源
4 完成：資源已傳送完成

以及states得知處理結果
請檢視HTTP Status Codes ( 狀態碼 )

if (http_request.readyState == 4)
{
  if (http_request.status == 200)
  {
    // 可以依照我們的需求來處理資源了
  }
  else
  {
    // 自行決定要如何處理錯誤的情形
  }
}

資源都傳送完成了

就可以開始接收與處理資源

http_request 提供兩種方式來存取資料：
http_request.responseText：回傳的資料為字串，需利用字串的處理函數。
http_request.responseXML ：回傳的資料為XMLDocuemnt，可利用JavaScript的DOM APIs來存取這份XML物件。

回aspnet目錄
回html目錄
回C#目錄
回首頁

程式設計筆記

2012年2月17日星期五