Bluezz旅遊筆記本

讚一個! Bluezz粉絲團
  • 計數器
  • 寄給朋友
  • facebook分享
  •  建立:2007-04-20  更新:2010-07-02
 

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



字體:
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/



參考資料:
BLUEZZ 原創
本頁網址:https://bluezz.tw/c.php?id=690



讚一個! Bluezz粉絲團

留言討論區


↑39344樓
 標 題  ajaxItem_zz內容即時更新範例(AJAX)
 暱 稱
 訪客
時間:2016-10-11 17:07:40 來自:118.163.80.xxx
其他錯誤
站長回覆

年代久遠



↑228樓
 標 題  Re:ajaxItem_zz內容即時更新範例(AJAX)
 暱 稱
 Allen
時間:2007-12-15 15:45:26 來自:220.131.252.xxx
不知道為什麼..上傳到asp網站上確不能使用
站長回覆ajaxItem_zz是屬於使用者端(client)的程式所以和伺服器端(server)的語言是無關,jsp,asp,php均可正常使用。可能錯誤的原因很多...,仍細注意IE的錯誤回應進而除錯即可正常。


標 題   ※必填
暱 稱  ※必填
E-Mail  
評 價  非常好普通非常差
內 容  
 確認碼  
 更換一組認證碼 ※必填不分大小寫