xmlRequest更換網頁內容

AJAX?

不就是這樣子嗎? 利用一種方法, 在不換頁的狀況下, request web 的 content 後, 進行訊息的顯示或是畫面的更新(dhtml), 這不就是 AJAX? 是的, 其實很容易也很簡單實現, 要做到不換頁更新畫面的方法就是這麼簡單.

整理了一下 client 的 javascript code, 讓 client 可以自行發出 request 後, 取得內容, 並利用 dynamic html 的特性, 將結果輸出, 以下為部分程式列表:

web request code:

var xmlhttp=false;  // for async call
function httpRequest(xUrl, method, sendData, sync, callbackHandler) {
  /*@cc_on @*/
  /*@if (@_jscript_version >= 5)
  // JScript gives us Conditional compilation, we can cope with old IE versions.
  // and security blocked creation of the objects.
   try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
    try {
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
     xmlhttp = false;
    }
   }
  @end @*/
  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
      try {
          xmlhttp = new XMLHttpRequest();
      } catch (e) {
          xmlhttp=false;
      }
  }
  if (!xmlhttp && window.createRequest) {
      try {
          xmlhttp = window.createRequest();
      } catch (e) {
          xmlhttp=false;
      }
  }
 
 
  // initial xmlhttp end..
 
  // uppercase post and get
  method = method.toUpperCase();
 
  if(method!="POST" && method!="GET")
      return false;
 
  xmlhttp.open(method, xUrl, sync);    
  if(sync) xmlhttp.onreadystatechange = callbackHandler;
  if(method=="POST")
      xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

  // send data to server     
  xmlhttp.send(sendData);
  if(!sync)
    return xmlhttp.responseText;
  else
    return true;
}

上面的 code 要注意的地方是在 post 時, 要記得將 post 的資料加上 Content-Type: application/x-www-form-urlencoded 的這個 header, 否則 web server 是無法解析出 form post 的內容哦! XMLHTTPRequest 參考資料: http://www.xmlhttp.cn/manual/xmlhttprequest.members.html
另外要注意的地方是跨 domain 的部分, 因為安全性的關係, 是不允許的, 這是在程式實作時要注地的, 還有就是同步或非同步的應用方法, 也就是在 open 的第三個參數, 若使用了不同步的方式, 則必需利用 event handler 來處理非同步的事件回應.

再來是 get 及 post 的 code, 取得內容後並利用 innerHTML更新 div 的內容:

function getContent(objname, cid)
{
   var obj = document.getElementById(objname);
   if(obj)
   {
       //alert(obj.innerHTML);
       obj.innerHTML = httpget("dcontent2.asp?cid="+cid, "GET", "");
   }

}

function postContent(objname, postdata)
{
   var obj = document.getElementById(objname);
   if(obj)
   {
       //alert(obj.innerHTML);
       obj.innerHTML = httpget("dcontent2.asp", "POST", postdata);
   }

}

上面的 innerHTML 為動態更新該 obj (通常為 div) 的 html code.

最後附上這個程式的 asp code sample:
dcontent2.zip

在 asp 內要注意的幾點, 就是 post 的部分, 利用 encodeURIComponent (javscript 內建函數, ie5.5 以上支援, 參考資料: http://blog.terac.com/andy/e_181.html)將內容進行編碼, 以利 post back 回 server 時, 不會有亂碼, 另外 asp 的 output 要指定 UTF-8 的輸出, 也就是 65001 的 codepage 要設定. 另外就是判定 get 或 post back 的參數及要回傳的內容, 這個部分比較單純.

最後說明, 其實 server side 的 code 無論是用 asp, asp.net, php, perl 都是一樣的, 就是把握相同的原則, 應該就沒有什麼太大的問題囉.
附上一個 ajaxtoolbox 網址, 內有整理好的好用 request 物件, 精細地控制 request 功能, 請參考: http://www.ajaxtoolbox.com/
AJAX入門: http://web.nchu.edu.tw/~jlu/classes/xml/ajax/ajax.shtml

[2006/8/26 01:58]
ASP.NET AJAX 組件及相關文章:
http://www.microsoft.com/taiwan/msdn/columns/ASPNET_2/aspnet_2_20051212.htm
http://atlas.asp.net/Default.aspx?tabid=47

[2006/8/29 02:16]
掌握 Ajax，第 1 部分: Ajax 簡介
http://www-128.ibm.com/developerworks/tw/library/wa-ajaxintro1.html

[2006/10/14 22:53]
實作 Ajax 版 RSS 閱讀工具
http://www.flag.com.tw/book/cento-5105.asp?bokno=F6472&id=194

 

kyle 2006/07/15 02:20

Hello, Tim…還有一個叫FJAX的方式,感覺可以讓js更輕鬆化….你可以參考看看..^^

http://kyle.jolin.info/tt/index.php?pl=395&ct1=4

Timothy 2006/07/15 17:53

感謝提供參考資料, 事實上, 如你所言, ajax 的這個部分, 無論使用 javascript 或是透過 flash 做為該 request 的 provider 都是很好的應用實例, 目的就是做到不換頁就能更新資訊, 其實 flash 早期在沒有 ajax 概念時, 就是做這件事的重要工具了, 只是後來到 dynamic html 後, 變成在 client side code 可以做更多功能的時候, flash 在這個部分就比較沒有這麼效果顯著了. 不過整理好的 fjax 工具的確也是很方便的哦..

jocosn 2006/10/22 02:23

‧IE 7 版後提供 XMLHttpRequest 類別建立 native object。
var request = new XMLHttpRequest();

另外 IE 好像有個 MSXML2.XMLHTTP.3.0 可以這樣建立物件：
new ActiveXObject(“MSXML2.XMLHTTP.3.0”)
但沒找不什麼詳細的說明。

Timothy 2006/10/22 11:28

謝謝您的通知, 我將再試試看. IE7好像是這兩天才 release 出來的, 看來是 Vista 要上市囉, IE7 趕緊推出囉.