TWM511643U - 植基於ajax技術的數據集中控管系統 - Google Patents

Description

植基於AJAX技術的數據集中控管系統

本創作係涉及網路技術領域，特別指一種於植基於AJAX技術的數據集中控管系統，透過規畫出網頁共通部份，並依此設定數個網頁上的DOM元件作為共通部份的容器，達成統一控管網頁共通部份的目的。

網站的開發已經是一個非常重要的技術及工作，現今社會，一個團體(甚至是個人)的代表網站已儼然成為其另一種門面，因此，網站的各種技術應運而生，請同時參閱第1A圖與第1B圖，係繪製傳統網站應用系統和Ajax網站應用系統的資料傳輸示意圖，其包含至少一電腦主機50，該電腦主機50係包含有顯示裝置以提供使用者透過該顯示裝置以開啟Web瀏覽器，進而瀏覽不同網頁，而該電腦主機50係以有線或無線方式連接一Web伺服器10，而Web伺服器10連接至少一資料庫60，該資料庫60係儲存有前述網頁中所需的各種資料，而瀏覽該複數個網頁係向Web伺服器10發送請求，如第1A圖所示，或者透過Ajax引擎並向Web伺服器10發送資料請求，如第1B圖所示，而Web伺服器10依該資料請求並回傳數據資料至該些網頁以顯示，以提供使用者可瀏覽該些網頁中的資訊。

Ajax(Asynchronous JavaScript And XML)是一種創建互動式網頁應用的網頁開發技術，Ajax與傳統網站應用系統模式不同在於，瀏覽器自行負責建立請求傳給伺服器，並處理傳來的回應，Ajax模組提供了一個中間層來控制這個 溝通過程，Ajax引擎其實就是前端在請求伺服器資訊時要呼叫的JavaScript物件和函式。不像傳統方式中連結(link)是設定到另一個資源的URL(像是另一個網頁之類的)，現在每個連結都變成在呼叫Ajax引擎，由它來排定和執行這些請求，而且這些請求是非同步的，也就是說不必等候回應，介面仍可以繼續操作，而伺服器的部份，過去回應的是HTML、影像、CSS或JavaScript，現在則被設定為回傳Ajax引擎可以使用的資料。這些資料可以是普通的文字、XML，或任何你需要的資料格式，只要Ajax引擎能解譯的資料格式都可以。

一般而言，網站內的各個網頁，往往會有許多共通的部份，也就是長得一樣的部份，以便讓人使用起來有一個整體感，因此，目前有許多方式來處理這些共通部份，最常見的有兩種：第一種方式，是利用框架iframe，此種方式將共通部份寫在主網頁中，例如index.html，然後在其中放置一個iframe，當使用者在網站內的各個頁面切換時，就是將iframe裡的內容切換到另一個網頁；第二種方式，是透過一個設計平台，將共通部份設計好之後，透過該平台自動加到每個網站內的網頁內，這樣，當使用者切換頁面時，雖然是整個頁面都變更了，但因為共通部份是完全一樣的，因此，呈現到頁面上，使用者會覺得沒變化。

然，上述兩種方式都有蠻大的缺點，對於第一種而言，最大的問題是搜尋引擎無法搜尋到，這個會造成網站內的網頁內容的曝光率大幅減低，從而喪失作為一個網頁該有的功能；而事實上，第二種方式也就是針對第一種方式的改善，但，第二種方式中，設計平台通常需要收費，而且變更平台不易，再者，遇上瀏覽器更新或者HTML版本更新等情形，可能要等待平台有新的版本支援才能因應。

為有效解決先前技術中所存在的問題，本創作揭露一種植基於AJAX技術的數據集中控管系統，其包含有一電腦主機以及連結一資料庫之一伺服器端，該電腦主機係以有線或無線方式連結該伺服器端，且該電腦主機係提供一使用者開啟一Web瀏覽器以瀏覽複數個網頁，其中該網頁包含一共通元件部分與一常變元件部分，而瀏覽該複數個網頁係透過呼叫一前端程式模組並向該伺服器端發送資料請求，該伺服器端係依資料請求回傳數據資料至該網頁，，其特徵在於設定該些網頁上的一DOM元件作為共通元件部份之容器，並撰寫設定之共通元件部份成為獨立網頁，而前端程式模組讀取該些網頁之該共通元件部份，並載入相對應的DOM元件中，其中共通元件部份置入一<div>元件中並給予一特定id，以提供前端程式模組進行讀取，使共通元件部分與該常變元件部分分別嵌入至網頁中所對應之DOM元件中以形成前述該數據集中控管系統。

10‧‧‧伺服器端

11‧‧‧共通元件部分

12‧‧‧常變元件部分

20‧‧‧前端程式模組

30‧‧‧web瀏覽器

31‧‧‧DOM元件

32‧‧‧初始化函數

40‧‧‧Web伺服器

50‧‧‧電腦主機

60‧‧‧資料庫

第1A圖係繪製傳統網站應用系統模式示意圖。

第1B圖係繪製Ajax網站應用系統模式示意圖。

第2圖係繪製本創作之植基於AJAX技術數據集中控管共通部份的作業方式之系統架構示意圖。

基於AJAX網頁技術，主要目的在於提高網頁的互動性(Interactivity)、可用性(Usability)以及傳輸效能(Performance)，由於傳統的網頁技術係採用同步式(Synchronous)，即必須等待伺服器端的程式執行完成後才能顯示新網頁，一位軟體開發人員和使用者介面專家，為開發較佳的Ajax Web應用程式須遵循的關鍵原則： 1.減少資料傳輸量：Ajax應用程式應該儘可能的從伺服器傳遞和接收愈少量的資訊愈好；2.不要造成突襲事件：Ajax應用程式與傳統網站應用程式的差別，就是在於它與眾不同的使用者互動模式，不像傳統網站典型的點選和等候，有些Ajax應用程式採用其他的使用者互動方式，如：滑鼠的拖拉放下或雙擊點選。無論你選擇的是哪一種使用者互動模式，都要與使用者的操作配合，讓使用者確實知道下一步驟會是什麼；3.建立慣例：不要浪費時間來發明新的、使用者不熟悉的使用者互動模式；4.不要造成干擾：減少不必要的、會造成干擾的網頁元素；5.容易使用：想像一下，你的主要和次要使用者會是誰，還有他們會想要如何來使用你寫的Ajax系統。不要閉門造車只為你自己寫程式，這會讓你的系統被一位不存在的使用者綁死；6.避免下載整個網頁：在第一個網頁下載後，所有對於伺服器的溝通都應該由Ajax來控管；7.使用者優先：試著讓常用的使用案例容易完成，而不要為了加上廣告或酷炫特效忘了重點。

Ajax網頁技術中有幾個重要的關鍵哪幾個技術，其包含HTML/XHTML(主要的內文展示語言)，CSS(為XHTML提供樣式格式)，DOM(動態地修改一個已載入的網頁文件)，XML(資料交換格式)，XSLT(將XML轉換為XHTML)，XMLHttp(主要的溝通中間層)，以及JavaScript(用來寫Ajax引擎的語言)，其中XHTML是呈現資訊時一定要用到的，DOM則是用來動態的改變現有網頁的內容，而不需重新載入整個網頁，JavaScript則是用來建立客戶端與伺服器的溝通 程式，還有用來操作DOM以改變網頁內容，最後確認一個想要用的應用程式伺服器，無論你選擇在伺服器端撰寫的是PHP、JavaServlet/JSP，或是.NET，你只要確定會用正確的資料格式將結果傳回給前端的Ajax引擎即可。

AJAX網頁是屬於用戶端(展示層)的技術，在用戶端的瀏覽器必須使用JavaScript的XMLHttpRequest送出非同步的Http Request，此時只會將指定的欄位資料傳送至伺服器端，而網頁的其它資料並不會進行回傳(PostBack)，接著再透過Http Response方式將更新後的執行結果下載至用戶端的瀏覽器，最後透過JavaScript將更新後的執行結果以背景執行的方式寫回DHTML或DOM(Document Object Model)指定的標籤區塊，此時指定的區塊即會進行更新，由於傳送和接收資料是屬於非同步的模式，因此使用者可以在不換頁的情形下繼續在網頁上進行任何操作。

呈上所述，Ajax在本質上是一個瀏覽器端的技術，首先面臨無可避免的第一個問題即是瀏覽器的相容性問題，不同的瀏覽器對於JavaScript/DOM/CSS的支援總有部分不太相同或是有Bug，甚至同一瀏覽器的各個版本間對於JavaScript/DOM/CSS的支援也有可能部分不一樣，這導致在寫Ajax應用時花大部分的時間在偵錯瀏覽器的相容性而非在應用程式本身，因此，目前大部分的Ajax連結庫或開發框架大多以JS連結庫的形式存在，進一步說明，Ajax技術之主要目的在於局部交換客戶端及伺服器之間的資料，如同傳統之主從架構，無可避免的會有部分的業務邏輯會實作在客戶端，或部分在客戶端部分在伺服器，由於業務邏輯可能分散在客戶端及伺服器，且以不同之程式語言實作，這導致應用程式不易維護的情況，再者，如有使用者介面或業務邏輯之更動需求，再加上前一個JavaScript/DOM/CSS之相容性問題，更造成開發上的難度。

請參閱第2圖所示，其繪製AJAX技術數據集中控管共通部份的作業方式，本創作所述之植基於AJAX技術的數據集中控管系統，該系統包含前述先前技術中第1B圖中所述之該些硬體及其資料傳遞路徑，故於此不在另行贅述，本創作所述之該數據集中控管系統係架構於一伺服器端10、一前端程式模組20與一Web瀏覽器30之間的數據資料傳遞方式，其中Web瀏覽器30提供使用者可開啟複數個網頁，該網頁包含一共通元件部分與一常變元件部分，首先確認於一web瀏覽器30的各個網頁中複數個共通元件部分11，以及複數個常變元件部分12，而前述之該web瀏覽器可為google chrome、微軟的IE、Firefox、百度、新浪、QQ..等等，並且規畫好作為容器的一DOM元件31，舉例說明，包含可能需要放置標題，清單，及在網頁底端放置地址及聯絡方式等…各種資料，便可規畫出如第2圖所繪製的網頁版型，呈上所述，將前述之規畫的各個共通部份撰寫成各自獨立的網頁，呈前述所舉之例，則可撰寫出header.html，menu.html，footer.html…，其共通元件部份11可置於一個<div>元件中，並給予一個特定的id，以提供下述之撰寫的前端程式模組進行讀取，而被<div>元件包起來的文字、圖片...各種資料等等，web瀏覽器30都會將之視作一個物件，就如同我們在打包物品一樣，<div>元件包住的網頁元件會變成一個「區塊物件」，也就是會「自成一塊」，最後是撰寫前端程式模組30，其可為JavaScript，透過AJAX技術方式讀取各個共通元件部份11的網頁內容，再將特定id的div元件內容讀出，然後將前述之該些內容嵌入至欲顯示的網頁中的特定DOM元件31中，而前端程式模組20則是存放於獨立的JS檔中，透過引入的方式提供給每個網頁的一初始化函數呼叫使用32，其中Web瀏覽器30根據一使用者之請求以取得該伺服器端輸出的數據，並依該請求數據資料 所對應的顯示格式解析所述之該數據資料並回傳至該網頁中顯示，該請求數據資料為一JAVASCIPT數據，而該JAVASCIPT數據可為JAVASCIPT數據形式或者XML形式，透過上述之數據共通部份的集中控管架構進行數據傳輸方式，便能達到統一控管網站內網頁共通部份的目的，又能擺脫以往對於網頁共通部分控管方法的缺失。

綜上所述，本創作之植基於AJAX技術的數據集中控管系統，規畫出網頁共通部份，並依此設定數個網頁上的HTML DOM元件作為共通部份的容器，其次，撰寫規畫出來的共通部份成為獨立的若干網頁，最後，再撰寫網站內每個網頁時，使用特定的前端程式模組(JAVSCRIPT)，並透過AJAX的技術將共通部份載入並將內容置入相對應的DOM元件中，一方面可達成統一控管網頁共通部份的目的，另一方面也避免了先前技術所產生的缺失。

藉由以上較佳具體實施例之詳述，係希望能更加清楚描述本創作之特徵與精神，而並非以上述所揭露的較佳具體實施例來對本創作之範疇加以限制，相反地，其目的是希望能涵蓋各種改變及具相等性的安排於本創作明所欲申請之專利範圍的範疇內，因此，本創作所申請之專利範圍的範疇應該根據上述的說明作最寬廣的解釋，以致使其涵蓋所有可能的改變以及具相等性的安排。

10‧‧‧伺服器端

11‧‧‧共通元件部分

12‧‧‧常變元件部分

20‧‧‧前端程式模組

30‧‧‧web瀏覽器

31‧‧‧DOM元件

32‧‧‧初始化函數

Claims (5)

1. 一種植基於AJAX技術的數據集中控管系統，該數據集中控管係統包含有一電腦主機以及連結一資料庫之一伺服器端，該電腦主機係以有線或無線方式連結該伺服器端，且該電腦主機係提供一使用者開啟一Web瀏覽器以瀏覽複數個網頁，其中該網頁包含一共通元件部分與一常變元件部分，而瀏覽該複數個網頁係透過呼叫一前端程式模組並向該伺服器端發送資料請求，該伺服器端係依資料請求回傳數據資料至該網頁，其特徵在於：設定該些網頁上的一DOM元件作為該共通元件部份之容器，並將該共通元件部份形成複數個獨立網頁，而該前端程式模組讀取該些網頁之該共通元件部份，並載入相對應的該DOM元件中以形成前述該數據集中控管系統。
2. 如申請專利範圍第1項所述之植基於AJAX技術的數據集中控管系統，其中該共通元件部份置入一<div>元件中並給予一特定id，以提供該前端程式模組進行讀取，使該共通元件部分與該常變元件部分分別嵌入至該網頁中所對應之該DOM元件中。
3. 如申請專利範圍第2項所述之植基於AJAX技術的數據集中控管系統，其中該<div>元件可包住一文字、一圖片、一表格或者一動畫。
4. 如申請專利範圍第1項所述之植基於AJAX技術的數據集中控管系統，其中該請求數據資料為一JAVASCIPT數據，而該JAVASCIPT數據可為JAVASCIPT數據形式或者XML形式。
5. 如申請專利範圍第1項所述之植基於AJAX技術的數據集中控管系統，其中該前端程式模組係存放於獨立的JS檔中，透過引入的方式提供給該些網頁的初始化函數呼叫使用。