bluezz旅遊筆記本

附近

ajaxItem_zz內容即時更新範例(AJAX)



// ABOUT
// ==================================================
// ajaxItem_zz內容即時更新範例
// made by zenon blue, 2007/4
// http://bluezz.tw/c.php?id=690
// service@bluezz.com.tw
// Copyright 2007 by bluezz
// ==================================================

=====修改記錄=====
v0.5   2007/4
       初步完成

=====功能說明=====
◎滑鼠移到按鈕時可即時捉取網路上的內容
◎此程式利用AJAX(Asynchronous JavaScript And XML)所編寫而成的線上即時更新範列
◎相關應用可配合php,asp,jsp等Server端程式存取DateBase

=====設定說明=====
1.加入css 與 js
ex:
<link href="tools/ajaxItem_zz.css" rel="stylesheet" type="text/css">
<script src="tools/ajax_zz.js" type="text/javascript" charset="utf-8"></script>

2.加入javascript函數
setB(num,btnNum):更換按鈕背景圖
getAjax(url,data):找Ajax資料

ex:
<script>
<!--
function setB(num,btnNum){
eval("document.getElementById('b"+ 1 +"').className='button1'");
eval("document.getElementById('b"+ num +"').className='button'+ btnNum");
}
//==== 找Ajax資料 =====
function getAjax(url,data){
ajax_url =url;
ajax_data='&q='+ data;
var flag= sendRequest(AjaxResult,ajax_data,"POST",ajax_url,true);
function AjaxResult(oj){
result.innerHTML = oj.responseText;
}
}
-->
</script>

3. 網頁載入時先呼叫一部分內容
沒加入的話一開始內容是空白的
ex:
<body onLoad="setB(1,2);getAjax('content1.htm','')">

4.設定按鈕
content1.htm為要讀取的內容頁,此部分可以改讀php,asp,jsp等動態程式
ex:
<td class="button1" id="b1" onMouseOver="setB(1,2);getAjax('content1.htm','')" onMouseOut="setB(1,1)">內容一</td>
<td class="button1" id="b2" onMouseOver="setB(2,2);getAjax('content2.htm','')" onMouseOut="setB(2,1)">內容二</td>
<td class="button1" id="b3" onMouseOver="setB(3,2);getAjax('content3.htm','')" onMouseOut="setB(3,1)">內容三</td>

5.設定內容要顯現的地方
<td valign="top"><span id='result'></span></td>

=====授權說明=====
◎可自由使用,但需保留各檔案之ABOUT註解

範例:

http://bluezz.tw/works/ajaxItem_zz/




建立日期:2007-04-20 
更新日期:2010-07-02
參考資料:
BLUEZZ 原創