TWM530980U - 植基於ajax技術於網頁共通部分控管框架的系統架構 - Google Patents

Description

植基於AJAX技術於網頁共通部分控管框架的系統架構

本創作係涉及網路技術領域，特別指一種植基於AJAX技術於網頁共通部分控管框架的系統架構，透過規畫出網頁共通部份，並於共同屬性id定義一特定HTML語意標籤以形成一框架，簡化網頁運算與更新的耗時並達成不妨礙到搜尋引擎工作的目的。

網站的開發已經是一個非常重要的技術及工作，現今社會，一個團體(甚至是個人)的代表網站已儼然成為其另一種門面，因此，網站的各種技術應運而生，請同時參閱第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引擎能解譯的資料格式都可以。

目前的網站越做越複雜，網站內所存在的網頁數量越來越多，每個網頁都會有許多共通的部分，例如頁面logo或功能選單等，當網頁被載入時，若能讓這些部份不用重新載入，僅置換差異內容的部份，那麼將可提升前端使用者及後端伺服器的電腦工作效率。以往對於此方面的實作方式不外以下幾種。

一種是使用HTML提供的frameset方式，將頁面預先分割成幾個frame，讓每個frame各自載入內容，在設計時僅需將共通部份和差異內容部份放在不同的frame中，便可讓使用者在切換該網頁內各項選單之的內容時，不需重覆載入共通部份，僅需對差異內容的部份進行更換。然則，由於此種方式破壞網頁的整體性，對於網頁的瀏覽效果有負面影響，目前已不多見。

另一種是使用HTML提供的iframe功能，此種方式實際是frameset的改良方式，對於網頁的瀏覽效果沒有破壞性，而實作方式幾乎和frameset的方式是相同的，通常在設計時是將共通部份放在主網頁中，而將差異部份放置於iframe中，於使用者點選選單切換內容時，僅需對iframe內容進行重載即可。此種方式雖然非常簡單方便，也能有效地達成目的，但，對於目前網頁搜尋引擎 大量被使用的環境下卻招致了很大的致命傷，就是，iframe的運用嚴重影響到網頁搜尋引擎對網頁內容的搜尋。其影響主要來自兩個方面，一是由於使用者僅能從該網站的初始頁面進入，因此，對於搜尋引擎而言，只能計算到該初始頁面的點擊率，二是即使搜尋引擎可搜尋到該頁面，但當使用者點擊該連結時，只會載入該頁面的差異內容，無法載入附帶的其他共通部份，以致於嚴重影響頁面瀏覽的完整性。

第三種方式，則是利用AJAX技術進行差異內容的載入，此方式大異於以往frame，實做上較為複雜，但對於網頁瀏覽的整體性及效能上有更顯著的提昇，但，對搜尋引擎的干擾則更甚於採用iframe的方式，因為目前使用AJAX載入的方式都僅將差異部份當作資料的形式儲存，而非一般網頁的形式。再者實做方法複雜，導致網站開發者卻步。

為有效解決先前技術中所存在的問題，本創作揭露一種植基於AJAX技術於網頁共通部分控管框架的系統架構，其運作於包含有一電腦主機、一Web伺服器與連結Web伺服器的一資料庫之間數據傳遞，電腦主機係以有線或無線方式連結該Web伺服器，且電腦主機係提供一使用者開啟一web瀏覽器以瀏覽複數個網頁，而網頁包含一共通元件部分與一常變元件部分，而瀏覽複數個網頁係透過呼叫一前端程式模組並向該Web伺服器發送資料請求，該Web伺服器係依一資料請求回傳數據資料至該網頁，其特徵在於指定複數個網頁中的共通元件部份與常變元件部分係分別以複數個特定id的一HTML語意標籤包覆，來定義複數個網頁中之至少一文件區段，於共通元件部分中分別定義一特定js檔，提供前端程式模組讀取該些網頁之共通元件部份，並且回傳相對應的網頁及其內 容，其中HTML語意標籤係為<section>，而每一網頁之該共通元件部分中的該複數個特定id需定義不相同。

101‧‧‧回傳網頁

102‧‧‧回傳網頁內容

11‧‧‧共通元件部分

12‧‧‧常變元件部分

20‧‧‧前端程式模組

30‧‧‧web瀏覽器

301‧‧‧當前網頁

302‧‧‧當前網頁內容

40‧‧‧Web伺服器

50‧‧‧電腦主機

60‧‧‧資料庫

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

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

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

基於AJAX網頁技術，主要目的在於提高網頁的互動性(Interactivity)、可用性(Usability)以及傳輸效能(Performance)，由於傳統的網頁技術係採用同步式(Synchronous)，即必須等待Web伺服器的程式執行完成後才能顯示新網頁，一位軟體開發人員和使用者介面專家，為開發較佳的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圖中所述之該些硬體及其資料傳遞路徑，故於此不在另行贅述，其係架構於一Web伺服器40、一前端程式模組20與一Web瀏覽器30之間的資訊傳遞的運作方式，其中Web瀏覽器30提供使用者可開啟複數個網頁，該網頁包含一共通元件部分11與一常變元件部分12，首先確認於一web瀏覽器30的各個網頁中複數個共通元件部分11，以及複數個常變元件 部分12，而前述之該web瀏覽器可為google chrome、微軟的IE、Firefox、百度、新浪、QQ..等等，而共通元件部分11，舉例說明，包含可能需要放置標題，清單，及在網頁底端放置地址及聯絡方式等...各種資料，便可規畫出如第2圖所繪製的網頁框架。

前端程式模組20，其可為JavaScript，透過AJAX技術方式讀取各個共通元件部份11的網頁內容，而前端程式模組20則是存放於獨立的JS檔中，透過引入的方式提供該些網頁的初始化函數呼叫使用。

本實施例中，將前述之各個共通元件部份11撰寫成各自獨立的網頁，呈前述所舉之例，則可撰寫出header.html，menu.html，footer.html...，而AJAX網頁所描述的頁面結構之HTML語意標籤包括<header>、<section>、<article>、<nav>、<aside>和<footer>，可建立擁有自我描述能力的HTML網頁，使開發者可以容易並快速存取指定語意的元素，將欲呈現的共通部份放進去，並利用具有特定id的<section>標籤框住，其並不影響所指定的網頁在被獨立瀏覽時的效果。

將所開發網站的各個網頁中皆置入如前述之該特定屬性id的<section>標籤，內容為空白，並且加入一特定的js檔，使能透過AJAX載入相對應的共通部份網頁，再將內容注入到對應的<section>標籤中，而該些網頁中常變元件部分12置入具有一特定id，例如<section id=content>，以形成本案所述之網頁框架，而該AJAX框架可自動針對不同網站中的超連結標籤<a>附加一個onclick事件處理函數(handler)，亦說明使用者點及網站中的該些網頁連結時，會呼叫該事件處理函數，以先行判斷是否為該網站內的網頁，若為否定，係以傳統方式跳轉其網頁頁面，反之，係透過AJAX呼叫去載入目標網頁，其利用上述 所置入特定id=content的<section>標籤中的內容擷取出來，並載入至目前網頁的id=content的<section>標籤中，而網址轉址係經由history.pushState()方式改寫成目標網頁的網址，前述history.pushState()方法，係可以加入或修改歷史紀錄，使用history.pushState()後，會改變XMLHttpRequest時HTTP標頭中referrer的值。referrer會是創造XMLHttpRequest物件時的當前視窗文件(this)的URL。

本實施例所述之AJAX框架的運作係可大致分為頁面載入的部份，及頁面切換的部份，頁面載入的部份係指進入網站後，首次進入某網頁，或者因點選重新整理發生的頁面載入工作，此時，由Web瀏覽器30載入向伺服端10發出載入請求，回傳頁面原始碼後，除了會將一當前網頁301的一當前網頁內容302顯示出來之外，透過該頁面內設定的window.onload處理函式可藉由AJAX請求，將共通部份頁面內容載入，並回傳到對應的<section>中，以呈現一回傳網頁101中的一回傳網頁內容102。

呈上所述，頁面切換的部份，則是透過AJAX向伺服端10請求網頁原始碼後，從中截取id=content的<section>內容，再透過將此內容指定給contentSection.innerHTML的方式注入到該<section>標籤中，進而取代了當前網頁301的當前網頁內容302，達到切換頁面的效果，再者，藉由history.pushState()函數改寫網址列內的URL，使得使用者於重整頁面時能維持在當前網頁，並且於網頁中點選〈上一頁〉〈下一頁〉功能時亦能依用戶的瀏覽順序正確顯示頁面。

利用本案所述之用於網頁共通部分控管之AJAX框架進行套用於完成開發的網站時，僅需進行以下該些流程：

1.先辨識出網站中各個網頁的共通元件部份為何，並將這些共通部份元件盡可能區分為須定義的指定部份。

2.將網頁框架中預設共通部份的網頁複製出數個(視步驟1所定義的該些指定部份)，然後將上一步定義所得的各個共通部份內容貼到<section>標籤內，並且更改其id，儘量保持id與檔名相同，例如，header的內容，則<section>的id=header，如第2圖中當前網頁301中所示，而將檔名則存成header.html，以方便網站整體運用，而前述之每個共通部份的各id均需不同。

3.產生網站中的網頁版型，其利用網頁框架中提供的基本版型，根據前述產生出的共通部份的網頁，加入不同的<section>標籤，例如，若前述產生header.html及menu.html...，則加入<section id=header>及<section id=menu>...。

4.利用前端程式模組20中的AJAX技術，修改layout.js載入共通頁面的設定，使能將第二步產生的頁面內容注入到第三步產生的<section>標籤內。以header.html為例，則需於適當位置加入底下兩行程式碼：var headerLoader=new AddInLoader("header.html","headerSection")；headerLoader.load,撰寫網站中複數個當前網頁內容102，並將該複數個當前網頁內容102之分別置入id=content的<section>標籤內，即完成了本案所述之網頁框架套用程序，若是新開發的網站需要進行套用框架，流程大致也相同，只是內容網頁部份可直接複製一份新的之後，直接修改id=content的<section>標籤的內容即可。

綜上所述，本創作之植基於AJAX技術於網頁共通部分控管框架的系統架構，規畫出網頁共通部份，網站內的所有網頁的共通部份只會有一份， 當共通部份需修改時，網站維護者僅需修一份即可，並且修改的方式等同於修改某一個網頁一樣的方便單純，特定的js檔中的AJAX處理函數原則上僅需透過特定的方式呼叫使用，不需開發者修改才能使用，相當便利而網頁跳轉需耗費的運算(包含網頁的解析及網頁各項元件的初始化工作)可被省去，對於網頁瀏覽上的回應性可增進不少(回應速度加快，頁面不用刷新)，而且，當用戶重整頁面時，會停留在目前的頁面，而不是回到所謂的首頁；再者，此種處理方式也同時達成了不妨礙到搜尋引擎工作的目的。

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

101‧‧‧回傳網頁

102‧‧‧回傳網頁內容

11‧‧‧共通元件部分

12‧‧‧常變元件部分

20‧‧‧前端程式模組

30‧‧‧web瀏覽器

40‧‧‧Web伺服器

301‧‧‧當前網頁

302‧‧‧當前網頁內容

Claims (9)

1. 一種植基於AJAX技術於網頁共通部分控管框架的系統架構，其運作於包含有一電腦主機、一Web伺服器與連結該Web伺服器的一資料庫之間數據傳遞，該電腦主機係以有線或無線方式連結該Web伺服器，且該電腦主機係提供一使用者開啟一web瀏覽器以瀏覽複數個網頁，其中該網頁包含一共通元件部分與一常變元件部分，而瀏覽該複數個網頁係透過呼叫一前端程式模組並向該Web伺服器發送資料請求，該Web伺服器係依一資料請求回傳數據資料至該網頁，其特徵在於：指定該複數個網頁中的該共通元件部份與該常變元件部分係分別以複數個特定id的一HTML語意標籤包覆，來定義該複數個網頁中之至少一文件區段，於該共通元件部分中分別定義一特定js檔，提供該前端程式模組讀取該些網頁之該共通元件部份，並且回傳相對應的網頁及其內容。
2. 如申請專利範圍第1項所述之植基於AJAX技術於網頁共通部分控管框架的系統架構，其中該HTML語意標籤係為<section>。
3. 如申請專利範圍第1項所述之植基於AJAX技術於網頁共通部分控管框架的系統架構，其中每一網頁之該共通元件部分中的該複數個特定id需定義不相同。
4. 如申請專利範圍第1項所述之植基於AJAX技術於網頁共通部分控管框架的系統架構，其中於超連結標籤<a>附加一onclick事件處理函數。
5. 如申請專利範圍第4項所述之植基於AJAX技術於網頁共通部分控管框架的系統架構，其中連結外部網站之網址係透過history.pushState()函數改寫成網址列內的URL。
6. 如申請專利範圍第2項所述之植基於AJAX技術於網頁共通部分控管框架的系統架構，其中一頁面載入作業係經由該資料請求透過該網頁中設定的window.onload處理函式，將共通部份頁面內容載入並注入到對應的<section>中。
7. 如申請專利範圍第2項所述之植基於AJAX技術於網頁共通部分控管框架的系統架構，其中一頁面切換作業係經由該資料請求透過擷取網頁中id=content的<section>內容，再透過將內容指定給contentSection.innerHTML的方式注入到該<section>標籤中。
8. 如申請專利範圍第1項所述之植基於AJAX技術於網頁共通部分控管框架的系統架構，其中該請求回傳數據資料為一JAVASCIPT數據，而該JAVASCIPT數據可為JAVASCIPT數據形式或者XML形式。
9. 如申請專利範圍第1項所述之植基於AJAX技術於網頁共通部分控管框架的系統架構，其中該前端程式模組係存放於獨立的JS檔中，透過引入的方式提供給該些網頁的初始化函數呼叫使用。