近期 Ajax 技術的發展讓網頁應用在使用上帶來很大的進步,當你將犀利的 PHP 與靈巧的 JavaScript 結合在一起時就會蹦出閃亮的結果。在一個讓你更好的理念下,我想分享一些方法讓你的網站帶給使用者到一個全新的境界。

以下的清單是50個最佳的免費程式,他們有最好的品質與更少的設定,大家來用用看吧。

1. Ajax Forms

使用 Ajax 送出表單超簡單!

1.1 Server side jQuery with Jaxer

Ajax Examples


建立一個 ‘master’ 表單,使用伺服端 DOM 控制 Jaxer 開關或在元素到達用戶端前完全移除某一個表單。我們可從伺服端使用 jQuery 去選取某些元素並幹掉他們或是在該元素送達用戶端瀏覽器前幹掉他們。

1.2 Ajax login form (PHP & Javascript)

Ajax Examples


一個不錯的 Ajax 登入表單,只用到3個JS檔、2個PHP檔、1個CSS。

1.3 Form Plugin

Ajax Examples


這個 jQuery 表單外掛可以悄悄地讓你 HTML 表單輕易升級到 AJAX,主要函式 jaxForm, ajaxSubmit 可從表單元素中做如何管理發送過程的判斷,這兩個函式皆支援讓你在資料發送時具有最高控制權限的數字選項。

2. Ajax ShoutBox

2.1 wTag (Ajax shoutbox)

Ajax Examples


wTag 是一個使用 PHP, JavaScript 的即時留言聊天室,使用 Ajax 傳遞資料不需重新整理頁面,後端則使用 MySQL。特色有:廣告過濾、下拉式表情符號、髒話過濾、表單驗證。

2.2 Shoutbox Ajax

Ajax Examples


Shoutbox Ajax 是一個 jQuery 的表單外掛,可以讓你在網頁上放置一個即時留言聊天室,這個聊天室是使用文字檔做紀錄的,想要改成資料庫紀錄只要加個己行程式就OK。

3. Validate a Username AJAX

3.1 Validate a username using Javascript and PHP ( AJAX )

Ajax Examples


使用 Ajax 確認使用者名稱是否合法

4. Ajax Instant Messenger

4.1 Ajax Instant Messenger

Ajax Examples


Ajax im 是一個以瀏覽器為基礎的即時通。使用 Ajax 製造一個即時通環境,可與社群、內網、社群網站結合。一樣不會重新整理…使用 JavaScript 做資料傳遞。

4.2 Ajax and XML: Ajax for chat

學習使用 Ajax 在你的網頁上建立聊天系統.

5. Ajax Tabs Content

5.1 Ajax Tabs Content

Ajax Examples


這是一個多功能的 Ajax 標籤內容程式他可以顯示外部檔 div 內的內容並用 CSS 組織。特色包涵:擷取與顯示外部頁面、支援全自動模式、自動縮放任何 div、動態選擇一個標籤、支援巢狀式 Ajax 標籤。

5.2 AjaxControlToolkit TabContainer

Ajax Examples


TabContainer佈景是專門給在網頁上浮動的標籤風格控制項使用。

6. Ajax Shopping Carts

6.1 Drag and drop shopping cart

Ajax Examples


一個有趣的拖曳式購物車,script.aculo.us出品。

7. Ajax Star Ratings

7.1 Starbox

Ajax Examples


Starbox 讓你輕鬆製作任何類型的人氣投票只需用到一張PNG圖片,這是 Prototype 的外掛。

7.2 Unobtrusive AJAX Star Rating Bar

Ajax Examples


這是一個 PHP 與 MySQL 應用的投票列程式,他可以讓使用者對某樣事情投票就像 Netflix 或 Amazon 那樣,跟其他 Web 2.0 服務一樣不會重整頁面,如果使用者瀏覽器不允許 JavaScript 這程式還是能照樣執行。

7.3 CSS: Star Rater Ajax Version

Ajax Examples


使用 komodomedia’s tar rating 技術。在資料庫上執行不需重整頁面 (但需要使用 Ajax 與資料庫溝通)。在這個版本可以使用圖形介面 (用法是 unique id = imgId)。

8. Ajax Inline Edit

AJAX, DOM, 可讓人不需使用按鈕就能任意更改文字內容。

8.1 Easy AJAX inline text edit 2.0

Ajax Examples


這個外掛會將所有含有 class=』editText』 並有 id 屬性的 SPAN 標記加上 onclick 的事件,這個 onclick 觸發會新增 textfield/input (取決於編輯文字的區域大小),觸發者可以編輯該段文字,blur 觸發會將編輯後的文字內容以 XMLHttpRequest 方式更新到資料庫,並顯示修改後的內容。

8.2 Ajax.InPlaceEditor

Ajax Examples


這個程式有三個參數,第一個是目標元素,第二個是送出改變值的 URL,最後是選項。

8.3 Edit In Place with AJAX Using jQuery

Ajax Examples


讓使用者即時編輯內容的一個 AJAX (或 AHAH) 所見即所得編輯器。按文字內容即可將該文字元素置換成可編輯的 textarea,編輯後的內容經由 AHAH 送到 PHP 更新資料庫。

  • 效果預覽: 爆炸的連結.

9. Ajax Progress Bar

有時候我們建置網站時會用到進度條或百分比列去顯示進度,但是我們很難找到用 Flash 以外製作的外掛,以下是純粹使用 Ajax 的進度條。

8.1 jsProgressBarHandler

Ajax Examples


jsProgressBarHandler 是一個用 JavaScript 寫的百分比進度列程式,靈感是來自於 WebAppers 與 Bare Naked App。程式結構與 WebAppers 相近,只要簡單地設定幾個參數就能套用。

8.2 A YUI Loading Panel Widget

Ajax Examples


想要處理冗長 Ajax request 且不會一直出現讀取中讓使用者以為網站掛掉。方法是使用 Ajax 做處理!

10. Ajax Pagination

10.1 Ajax Pagination Script

Ajax Examples


這程式使用 Ajax 讓你從多個頁面載入內容並在有需要時將其顯示。換頁連結在使用者 request 時會自動建立 (可加速傳遞與節省頻寬)。

10.2 Preloading Data with Ajax and JSON

Ajax Examples


這是一個在背景從資料庫預讀上下頁內容的換頁範例,當使用者換頁時不必花時間等待。

11. AJAX File Browser & Manager

11.1 jQuery File Tree

Ajax Examples


jQuery File Tree 是一個基於 jQuery 可設定的 AJAX 檔案瀏覽外掛。你只需要簡單一行 JavaScript 就能製作一個客製、互動的檔案目錄。這外掛可用在 PHP, ASP, ASP.NET, JSP, Lasso.

11.2 jQuery File Tree

Ajax Examples


KFM 是一個可以獨立作業的線上檔案管理員,也可以像是 FCKeditor, TinyMCE 的 rich-text 編輯器的外掛。特色包括:拖拉任何東西、圖示介面、清單頁面、外掛、圖片操作…

12. Ajax Calendar

在網頁上我們時常會用到線上月曆。這麼的熱門,但對於第一次寫線上月曆的程式設計師來說是非常麻煩的,現在市場上有許多熱門的線上月曆但有些複雜,讓我們瞧瞧這些優秀的 Ajax 月曆吧。

12.1 Vista-like Ajax Calendar version 2

Ajax Examples


Vista-like Ajax Calendar 是一個仿 Windows Vista 工具列的線上月曆,使用 MooTools, AJAX, XHTML, CSS, PHP 製作。

12.2 Quick Calendar Using AJAX and PHP

Ajax Examples


學習如何用 Ajax 與 PHP 製作一個有趣的月曆。你可以不需刷新頁面進行月曆的瀏覽。

13. Ajax Photo Manipulation

13.1 Phototype

Ajax Examples


一個基於 Prototype 的用戶/伺服端函式庫,可支援所有類型的圖片操作。在伺服端使用 PHP GD 函式顯示圖片。在用戶端使用 Prototype 進行圖片旋轉、縮放、翻轉等功能。

13.2 mooImageCrop

Ajax Examples


這是一個基於 MooTools 與 PHP 的圖片剪裁程式。這個範例告訴你如何使用 Ajax 跟 PHP 程式從圖片製作剪裁區並直接得到結果。你可以定義剪裁區的長寬。這個外掛主要可以用在使用者頭像或一些固定長寬比例圖片的上傳功能。

14. Ajax Dynamic Image Gallery and Slideshows

14.1 Dynamic Image Gallery and Slideshow

Ajax Examples


這是個僅有 3kb 的超小型的畫廊與圖片展示程式並有許多酷炫的特色。

15. AJAX File Upload

15.1 Max’s AJAX file uploader

Ajax Examples


Max’s AJAX file uploader 是一個可以讓你不需重整頁面就能上傳檔案到伺服端的簡易程式。

15.2 Ajax Multi Image File Upload

Ajax Examples


基於 Ajax 的圖片上傳,包括縮圖預覽與刪除的功能。

15.3 jQuery Multiple File Upload Plugin

Ajax Examples


The Multiple File Upload Plugin (jQuery.MultiFile) 是一個非阻礙式的 jQuery 外掛,可以讓使用者一次上傳多個檔案也提供一些基本的驗證功能幫助開發者判斷簡單的錯誤而不需使用表單。

16. AJAX AutoCompleter

16.1 Autocomplete Control Version Released

Ajax Examples


使用這外掛你可以改變自動建議物件的外觀介面,也可以從伺服端傳送你的建議物件到用戶端。

16.2
FaceBook Like – jQuery and autosuggest Search Engine

Ajax Examples


從 Facebook 得到靈感的一個 jQuery 自動建議搜尋引擎。

17. AJAX CMS

17.1 NicEdit

Ajax Examples


NicEdit 是一個輕量、跨平台的文字內容編輯器,讓你在網站讓可以做快速的編輯。NicEdit 可以快速整合到任何網站讓 element/div 可編輯,或將 textareas 轉成編輯器。

17.2 FCKEditor

Ajax Examples


這個外掛使用 jQuery 讓你在網頁上安裝 FCKEditors 更加容易。他將 FCKEditors 與 jQuery Form Plugin 做整合並讓 FCKEditor 的內容可透過 Ajax 做傳遞。

18. AJAX Polls

18.1 Ajax Poller

Ajax Examples


這個程式需要安裝 PHP 才能跟 MySQL 溝通。

18.2 Creating a Dynamic Poll with jQuery and PHP

Ajax Examples


在這個教學我們會用 PHP 與 XHTML 製作一個投票,然後用一些 jQuery Ajax 的特效防止頁面刷新並增加視覺效果。

19. AJAX Tabular data manipulations

19.1 Sorttable

Ajax Examples


製作一個藉由按欄位名稱即可進行表格排序的可按式表頭。這個外掛在排序數字與日期很正常,但非以上兩者可能…

19.2 FlexiGrid

Ajax Examples


小巧且強大的 JavaScript DataGrid,可以縮放欄位、將資料捲動到表頭,新增讀取 XML 資料來源內容的功能。效仿 ExtGrid 概念的靈感是出自於 jQ 的輕量化與簡易設定。

19.3 DDDrasticGrid

Ajax Examples


DrasticGrid 是一個以 Ajax 為基礎的可編輯 DataGrid。資料來源使用 MySQL,能支援頁碼、排序、紀錄新增/編輯/刪除。

19.4 Improving Extra wide Grid View

Ajax Examples


使用 ASP.NET AJAX 用戶端的 API 重編 Tablecloth 的範例。

20. Miscellaneous

20.1 Ajax Scrolling pages

Ajax Examples


這個程式可以從伺服器載入內容並將內容插入你網頁上的一個空的元素節點中。可以動態地新增頁面,程式會自動下拉新頁面的內容。

20.2 jTip – A jQuery Tool Tip

Ajax Examples


jTip 不像 Thickbox 使用隱藏 http request 去呼叫伺服端資料。jTip 是使用 HttpXMLRequest 物件將內容拉到工具提示,只需要用到一個 “jTip” 屬性去連結元素。jTip 也可透過 jQ 字串自訂寬度。

20.3 Ajax Broken Link Checker

這模組使用 request 讀取伺服器的回應檢查你的連結,如果伺服器回應 200 OK 那這個連結會顯示 ‘active’ 的 class,如果得到其他結果這個連結會顯示 ‘inactive’。

20.4 Facebox

Ajax Examples


Facebox 是一個 jQuery 外掛,Facebook-style lightbox 可以顯示圖片, Div, 或外部網頁。外掛可用在錯誤訊息處理, 交易確認, 預覽, 畫廊等功能。

20.5 Drop Down Panel script

Ajax Examples


Drop Down Panel 在你的網頁頂端新增一個下拉面板,這個面板的內容可以透過 Ajax 抓外部檔寫入其中。當訪客按下按鈕這個面板會自動拉下並顯示內容。