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 趕緊推出囉.
在〈xmlRequest更換網頁內容〉中有 1 則留言
[…] https://diary.tw/archives/274 撰寫了一個更容易測試的 html 範例, 一則以測試同步及非同步, […]