▶ ERP 達人專欄

jQuery 與應用系統的結合(上)

文 - Morris


關鍵字:jQuery、Ajax、Asynchronous JavaScript and XML、JavaScript、HTML5、函式庫

有沒有一種工具,能不影響現有的應用程式架構下,就讓使用者更方便地輸入資料?傳統的應用程式,不管是三層式(3-Tier)或主從式架構(Client-Server)架構,對使用者輸人資料的習慣而言,都是「一筆一筆」的輸入,並非直覺化的圖形界面,但使用者卻往往因使用時間久了,逐漸習慣這種做法,但隨著開發工具日趨多元化,加上以使用者為中心的設計意識抬頭,讓 jQuery 加 Ajax(即 Asynchronous JavaScript and XML,非同步的 JavaScript 與 XML 技術) 快速成為市場的主流技術。

jQuery 是一種新形態的 JavaScript 函式庫,原先做為網頁開發的技術,著重於使用者的前端瀏覽器技術,簡化了 HTML 與 JavaScript 的操作,方便定義網頁內的物件,建立按鈕事件、動態效果、或外掛其它函式庫等功能。而 Ajax 則是一種非同步的 JavaScript,能在網頁上向伺服器傳送並取回資料,並處理如何將取回的資料顯示在瀏覽器上,同時減少網頁重覆讀取造成的時間延遲及網頁資料,進而降低伺服器的負荷,這項工具已經被大量的應用在 Web 網站上,甚至是以行動應用程式(mobile application,簡稱 mobile app、app)開發,使用者的個人電腦只要有瀏覽器就可以開始作業,毋需另行安裝任何軟體。

通常應用程式的開發都具備能開啟瀏覽器的功能,因此能應用 jQuery 所開發出的網頁,而 jQuery 的物件可做出動態化的圖形效果,定義圖形物件屬性,提供使用者有目的地拖曳,進而達到新增資料或設定順序的要求,架構流程是使用者由應用程式帶參數呼叫出開發人員以 jQuery 開發的瀏覽器,瀏覽器根據參數透過 AJAX 語法到資料庫取回資料,並根據資料轉換為圖形介面供使用者拖拉,最後結果將再由 AJAX 寫回資料庫。舉一個最簡單的例子來說,在應用程式中,如果要設定公司組織層級,一筆一筆的資料其實是很抽象的,還需要透過報表或某個呈現的畫面才能確定設定是否正確,但如果能用圖形介面呈現,使用者就不用憑空想像每一筆資料的關係,還可以很直覺地拉出組織層級關係,大幅簡化使用者的工作。

要發揮 jQuery 功能,並能應用到現有的應用程式架構下,最簡單地做法就是從網頁 HTML5 加上 CSS,再引用 jQuery 的 JavaScript 語法,對開發人員來說,只要有過開發過網頁的經歷,就等同具備此技能,不需太深入掌握網站設計知識。簡單地說 jQuery 具備的優勢就是開發時程短、可應用性高、易於學習,此外, jQuery 是免費的工具,不須額外的費用負擔,因此非常適合在現有的應用程式架構下進行延伸性的開發。更多的 jQuery 與應用系統的結合,請待下篇說明。

推Plurk
列印