|
 |
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註解
範例:
https://www.bluezz.tw/works/ajaxItem_zz/
// ==================================================
// 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註解
範例:
https://www.bluezz.tw/works/ajaxItem_zz/
建立日期：2007-04-20
更新日期：2021-08-09
BLUEZZ 原創
更新日期：2021-08-09
BLUEZZ 原創
網站 照片