http://www.cyberdummy.co.uk/test/slider/
DOM Javascript Slider Bar
Examples update a value inside a MySQL Database using the AJAX method when drag stops.
Speed
%
Speed 2
100%
View the source php code (code for Sajax.php).
Download Files | Comments
AJAX method
下一代網頁介面變革的前兆：AJAX
http://www.ithome.com.tw/itadm/news/news.php?c=33040
最近許多人都在談論Google Maps地圖資訊服務，討論其好用之處。
究其原因，不僅只是Google Maps讓我們看到全球各地的衛星照片（甚至看得到連雷達都看不到的隱形戰機），更因為Google採用有別於傳統的架構。
以往的地圖服務，不論是縮放或是移位，每一次都必須整頁全部更新。例如使用者選擇放大地圖，則網頁伺服器必須將新的地圖資訊，以及整個網頁的所有元件，全部再組合成網頁，並且傳送至使用者端。可以想見，在網頁伺服器重組網頁、傳回全新的整頁網頁的期間，使用者就只能等待。
Google Maps並不是採取上述傳統的作法，而是只更新需要更新的地圖資訊部分。當使用者選擇放大地圖後，整個網頁就只有地圖部分會改變圖像，網頁的周邊元件都不會變動。對使用者而言，網頁並沒有整頁更新。
受限於傳統網頁傳送的型式，網頁必須逐次更新整頁，其使用介面一直無法像視窗應用程式的使用介面一樣。然而，上述Google Maps網頁互動使用經驗，卻非常接近使用一般的地圖軟體。何以能達到如此效果？是Google採用了什麼新穎的技術嗎？Google在旗下諸多服務中使用（如Gmail、Google Suggest、Group），而新興的服務如Flickr、A9.com、MSN Virtual Earth Project、Technorati等也紛紛採用，這個技術是何以重要？
Google所使用的技術，目前多數人稱之為AJAX（Asynchronous JavaScript and XML），由字面上看來這倒不是什麼嶄新的技術，AJAX的3種組合元素：DHTML、JavaScript、XMLHTTP，以及非同步的技術，都已經有人在使用，然而透過這些新興網站服務的推波助瀾，讓大家看到了下一代網頁發展的契機──更豐富的互動式使用介面，與Rich Client、Smart Client，有異曲同功之妙。
AJAX像是網頁用戶端與網頁伺服器端之間的代理，雖然用戶端的網頁看起來並未更新，但AJAX可能已經在幕後非同步地與網頁伺服器交換資料了，像是地圖這種需要傳輸大量資料的應用，在傳統同步更新的架構下，要等待大量資訊傳完，使用者才看得到地圖圖片，但透過AJAX在幕後不斷地與網頁伺服器交換資料，前端使用者就不會感受到因傳輸大量資料而必須等待。
此外，透過非同步更新的方式，可以更平順地在背景進行資料檢核等等工作，例如檢查表單的格式，以往若要在使用者輸入資料後立即檢查，就必須藉助用戶端電腦的JavaScript，若要由伺服器端檢查，就必須接受網頁整頁更新的不便；透過AJAX，則可以在不更新網頁的情況下，由伺服器端來檢查。
AJAX這個詞彙誕生於今年2月，才歷經短短的幾個月就成為熱門討論的話題，甚至有人認為AJAX是2005年上半年最有影響力的技術。這會不會只是一股熱潮？最近微軟的網路平臺與工作團隊，在部落格公布微軟的AJAX專案──代號Atlas，預計將在2周後的PDC05會議中首度公開，它將支援ASP .NET 2.0，未來可望整合至Visual Studio 2005。微軟的加入，勢必更炒熱AJAX的熱度，而且.NET與JavaScript的整合度可望更好。
不過，AJAX也不是毫無缺點。AJAX能做到什麼程度？該如何設計AJAX型式的網頁？請見本期的專題報導。（請見第48頁）
最近許多人都在談論Google Maps地圖資訊服務，討論其好用之處。
究其原因，不僅只是Google Maps讓我們看到全球各地的衛星照片（甚至看得到連雷達都看不到的隱形戰機），更因為Google採用有別於傳統的架構。
以往的地圖服務，不論是縮放或是移位，每一次都必須整頁全部更新。例如使用者選擇放大地圖，則網頁伺服器必須將新的地圖資訊，以及整個網頁的所有元件，全部再組合成網頁，並且傳送至使用者端。可以想見，在網頁伺服器重組網頁、傳回全新的整頁網頁的期間，使用者就只能等待。
Google Maps並不是採取上述傳統的作法，而是只更新需要更新的地圖資訊部分。當使用者選擇放大地圖後，整個網頁就只有地圖部分會改變圖像，網頁的周邊元件都不會變動。對使用者而言，網頁並沒有整頁更新。
受限於傳統網頁傳送的型式，網頁必須逐次更新整頁，其使用介面一直無法像視窗應用程式的使用介面一樣。然而，上述Google Maps網頁互動使用經驗，卻非常接近使用一般的地圖軟體。何以能達到如此效果？是Google採用了什麼新穎的技術嗎？Google在旗下諸多服務中使用（如Gmail、Google Suggest、Group），而新興的服務如Flickr、A9.com、MSN Virtual Earth Project、Technorati等也紛紛採用，這個技術是何以重要？
Google所使用的技術，目前多數人稱之為AJAX（Asynchronous JavaScript and XML），由字面上看來這倒不是什麼嶄新的技術，AJAX的3種組合元素：DHTML、JavaScript、XMLHTTP，以及非同步的技術，都已經有人在使用，然而透過這些新興網站服務的推波助瀾，讓大家看到了下一代網頁發展的契機──更豐富的互動式使用介面，與Rich Client、Smart Client，有異曲同功之妙。
AJAX像是網頁用戶端與網頁伺服器端之間的代理，雖然用戶端的網頁看起來並未更新，但AJAX可能已經在幕後非同步地與網頁伺服器交換資料了，像是地圖這種需要傳輸大量資料的應用，在傳統同步更新的架構下，要等待大量資訊傳完，使用者才看得到地圖圖片，但透過AJAX在幕後不斷地與網頁伺服器交換資料，前端使用者就不會感受到因傳輸大量資料而必須等待。
此外，透過非同步更新的方式，可以更平順地在背景進行資料檢核等等工作，例如檢查表單的格式，以往若要在使用者輸入資料後立即檢查，就必須藉助用戶端電腦的JavaScript，若要由伺服器端檢查，就必須接受網頁整頁更新的不便；透過AJAX，則可以在不更新網頁的情況下，由伺服器端來檢查。
AJAX這個詞彙誕生於今年2月，才歷經短短的幾個月就成為熱門討論的話題，甚至有人認為AJAX是2005年上半年最有影響力的技術。這會不會只是一股熱潮？最近微軟的網路平臺與工作團隊，在部落格公布微軟的AJAX專案──代號Atlas，預計將在2周後的PDC05會議中首度公開，它將支援ASP .NET 2.0，未來可望整合至Visual Studio 2005。微軟的加入，勢必更炒熱AJAX的熱度，而且.NET與JavaScript的整合度可望更好。
不過，AJAX也不是毫無缺點。AJAX能做到什麼程度？該如何設計AJAX型式的網頁？請見本期的專題報導。（請見第48頁）
最後由 yehlu 於 2005-11-03 14:31:37 編輯，總共編輯了 1 次。
http://www.neo.com.tw/archives/000670.html
http://www.neo.com.tw/archives/000670.html
PHP AJAX 除了廣為人知的 SAJAX、JPSPAN (原名為ScriptServer) 之外，Sourceforge 近期可下載的 PHP AJAX 又多了 xajax 、AJASON、flxAJAX、AjaxAC。
這些都有供乘法範例程式(好像變成 AJAX 的 Hello world!) ，雖然乘法範例只能當參考，但至少可看出大致的架構。
[xajax]
xajax 最大的特色是支援 UTF-8 及 Smarty。而且 xajax 連網站都是 AJAX，乘法範例請直接到網站的 Example 看。
(連線太慢時可能會導致 Javascript 載入不完全，以致於網站無法換頁)
在乘法範例中可以看出最大的特色是 client 端不用自己寫 callback。client 端送出運算請求給 Server 端後，Server 端可以直接把運算結果傳送到網頁元素上。
至於 Smarty 支援的部份，因為 Client 端只需一行 $xajax->printJavascript(); 就可以產生 AJAX 所需的 Javascript，所以應該大部份的 Template engine 也都支援。
[AJASON]
AJASON 只能在 PHP 5 的環境執行，網站上提供的範例寫的相當清楚，乘法範例中提供了 function 、class 二種不同的使用方式，另外還有錯誤處理展示。至於經典的autocomplete 也值得一看。
[Flexible Ajax] (flxajax)
flxajax 主要是以 PHP5 寫的，有另外提供 PHP 4 的版本。範例只有提供乘法範例可看，而且 client 端的程式碼切的不如前二者完整。
[AjaxAC]
AjaxAC 提供了四則運算的範例。看過原始碼後發現邏輯相當的亂，Client 端還要寫程式告知哪些網頁元素要當成 widgets 才能交由 Server 端控制。而 Server 端竟然還有 Javascript Code (Callback)，雖然看起來 event 部份規畫的很好，但是前後端的邏輯根本完全混在一起，實在太遜了。
總結:
以乘法範例比較起來，我個人比較偏好 xajax ，最主要原因是邏輯跟畫面分的相當清楚。(當然 UTF-8 也是原因之一)
xajax 讓 Server 端程式握有的網頁元素有絕對的主控權，在架構程式時可以很清楚的把邏輯完全放在 Server 端，Client 端只要負責正確的顯示畫面及傳送請求，這也是寫 ASP.Net 程式時所使用的方式。
在這幾種 PHP AJAX 之中，xajax 比 flxajax、AjaxAC 更有資格稱為 Framework，可是 xajax 在 Sourceforge 上也只自稱為 library:
xajax is an open source PHP class library that allows you to easily create powerful, web-based, Ajax applications using HTML, CSS, JavaScript, and PHP that can asynchronously call server-side PHP functions and update content without reloading the page.
目前 xajax 採用 LGPL 授權，版本為 0.1 beta4 ，也期待正式版本的推出。
PHP AJAX 除了廣為人知的 SAJAX、JPSPAN (原名為ScriptServer) 之外，Sourceforge 近期可下載的 PHP AJAX 又多了 xajax 、AJASON、flxAJAX、AjaxAC。
這些都有供乘法範例程式(好像變成 AJAX 的 Hello world!) ，雖然乘法範例只能當參考，但至少可看出大致的架構。
[xajax]
xajax 最大的特色是支援 UTF-8 及 Smarty。而且 xajax 連網站都是 AJAX，乘法範例請直接到網站的 Example 看。
(連線太慢時可能會導致 Javascript 載入不完全，以致於網站無法換頁)
在乘法範例中可以看出最大的特色是 client 端不用自己寫 callback。client 端送出運算請求給 Server 端後，Server 端可以直接把運算結果傳送到網頁元素上。
至於 Smarty 支援的部份，因為 Client 端只需一行 $xajax->printJavascript(); 就可以產生 AJAX 所需的 Javascript，所以應該大部份的 Template engine 也都支援。
[AJASON]
AJASON 只能在 PHP 5 的環境執行，網站上提供的範例寫的相當清楚，乘法範例中提供了 function 、class 二種不同的使用方式，另外還有錯誤處理展示。至於經典的autocomplete 也值得一看。
[Flexible Ajax] (flxajax)
flxajax 主要是以 PHP5 寫的，有另外提供 PHP 4 的版本。範例只有提供乘法範例可看，而且 client 端的程式碼切的不如前二者完整。
[AjaxAC]
AjaxAC 提供了四則運算的範例。看過原始碼後發現邏輯相當的亂，Client 端還要寫程式告知哪些網頁元素要當成 widgets 才能交由 Server 端控制。而 Server 端竟然還有 Javascript Code (Callback)，雖然看起來 event 部份規畫的很好，但是前後端的邏輯根本完全混在一起，實在太遜了。
總結:
以乘法範例比較起來，我個人比較偏好 xajax ，最主要原因是邏輯跟畫面分的相當清楚。(當然 UTF-8 也是原因之一)
xajax 讓 Server 端程式握有的網頁元素有絕對的主控權，在架構程式時可以很清楚的把邏輯完全放在 Server 端，Client 端只要負責正確的顯示畫面及傳送請求，這也是寫 ASP.Net 程式時所使用的方式。
在這幾種 PHP AJAX 之中，xajax 比 flxajax、AjaxAC 更有資格稱為 Framework，可是 xajax 在 Sourceforge 上也只自稱為 library:
xajax is an open source PHP class library that allows you to easily create powerful, web-based, Ajax applications using HTML, CSS, JavaScript, and PHP that can asynchronously call server-side PHP functions and update content without reloading the page.
目前 xajax 採用 LGPL 授權，版本為 0.1 beta4 ，也期待正式版本的推出。
http://openrico.org/
http://openrico.org/ 另一個js 的元件
相關文章
使用 Rico 撰寫 Ajax 之 縣市郵遞區號
http://blog.xuite.net/ben19770209/ASBeginner/4033908
使用 AJAX 溝通 ASP 連接資料庫搜尋公司資料
http://blog.xuite.net/ben19770209/ASBeginner/4047196
邁向 AJAX 的第一步：一個簡單的範例
http://blog.yam.com/syshen/archives/187264.html
AJAX 的介紹,很詳細
http://blog.yam.com/syshen/archives/184517.html
一些實做
http://blog.donews.com/limodou/category/61220.aspx
相關文章
使用 Rico 撰寫 Ajax 之 縣市郵遞區號
http://blog.xuite.net/ben19770209/ASBeginner/4033908
使用 AJAX 溝通 ASP 連接資料庫搜尋公司資料
http://blog.xuite.net/ben19770209/ASBeginner/4047196
邁向 AJAX 的第一步：一個簡單的範例
http://blog.yam.com/syshen/archives/187264.html
AJAX 的介紹,很詳細
http://blog.yam.com/syshen/archives/184517.html
一些實做
http://blog.donews.com/limodou/category/61220.aspx