xmlRequest更換網頁內容
程式技術/Javascript 2006/07/15 00:22 views: 182874 times
AJAX?
不就是這樣子嗎? 利用一種方法, 在不換頁的狀況下, request web 的 content 後, 進行訊息的顯示或是畫面的更新(dhtml), 這不就是 AJAX? 是的, 其實很容易也很簡單實現, 要做到不換頁更新畫面的方法就是這麼簡單.
AJAX?
不就是這樣子嗎? 利用一種方法, 在不換頁的狀況下, request web 的 content 後, 進行訊息的顯示或是畫面的更新(dhtml), 這不就是 AJAX? 是的, 其實很容易也很簡單實現, 要做到不換頁更新畫面的方法就是這麼簡單.
more..
整理了一下 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:
在 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
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
Trackback Address :: http://diary.tw/tim/trackback/18
Waiting...