一種html頁面上內(nèi)容的同步模塊化加載方法
【專利摘要】本發(fā)明一種html頁面上內(nèi)容的同步模塊化加載方法，包括如下步驟：步驟一、根據(jù)內(nèi)容顯示的需要，規(guī)劃每個模塊化內(nèi)容的服務(wù)器端數(shù)據(jù)獲取接口；步驟二、注冊數(shù)據(jù)獲取接口到配置文件；步驟三、進行html頁面上模塊化內(nèi)容顯示區(qū)域的標(biāo)識和描述；步驟四、于系統(tǒng)服務(wù)器端提供一個部件引擎，當(dāng)配置完成后的html頁面被用戶訪問時，部件引擎會對用戶請求進行攔截，并分析其請求的html頁面代碼結(jié)構(gòu)，從中過濾出有標(biāo)記data_render的dom元素。本發(fā)明實現(xiàn)動態(tài)內(nèi)容的模塊化加載，解決了html頁面下動態(tài)內(nèi)容對SEO不友好的問題。
【專利說明】—種html頁面上內(nèi)容的同步模塊化加載方法

【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及web開發(fā)【技術(shù)領(lǐng)域】【技術(shù)領(lǐng)域】，具體涉及一種html頁面上內(nèi)容的同步模塊化加載方法。

【背景技術(shù)】
[0002]在html頁面上，模塊化動態(tài)加載內(nèi)容的實現(xiàn)一般都是采用ajax的方式，這種方式的內(nèi)容加載可以分解為兩步，第一步是在用戶打開頁面時，先行加載頁面基本html和腳本，不包含主要的數(shù)據(jù)內(nèi)容；第二步是在頁面基本html加載完成后，由頁面上的腳本向服務(wù)器端發(fā)送請求，獲取到數(shù)據(jù)后，再動態(tài)顯示到第一步加載的dom元素里面，這種方式通常被稱作“ajax”。在這種方式下，第二步請求返回的數(shù)據(jù)在頁面上對人眼是可見的，但是在請求得到的頁面源碼中卻是不可見的。然而，搜索引擎對頁面進行索引時的依據(jù)就是請求得到的頁面源碼，所以ajax的方式將會導(dǎo)致無法對需要索引的內(nèi)容編制索引，html頁面上動態(tài)內(nèi)容無法索引，對SEO是不友好的。
[0003]故，針對上述現(xiàn)有技術(shù)存在的缺陷，實有必要進行開發(fā)研究，以提供一種方案，通過弓I入動態(tài)向請求中附加內(nèi)容的方法，解決html頁面上動態(tài)內(nèi)容無法索弓I的問題。


【發(fā)明內(nèi)容】

[0004]為解決上述問題，本發(fā)明的目的在于提供一種html頁面上內(nèi)容的同步模塊化加載方法，以解決html頁面上動態(tài)內(nèi)容無法索引的問題。
[0005]為實現(xiàn)上述目的，本發(fā)明的技術(shù)方案為:
一種html頁面上內(nèi)容的同步模塊化加載方法，包括如下步驟:
步驟一、根據(jù)內(nèi)容顯示的需要，規(guī)劃每個模塊化內(nèi)容的服務(wù)器端數(shù)據(jù)獲取接口 ；
步驟二、注冊數(shù)據(jù)獲取接口到配置文件；
步驟三、進行html頁面上模塊化內(nèi)容顯示區(qū)域的標(biāo)識和描述；
步驟四、于系統(tǒng)服務(wù)器端提供一個部件引擎，當(dāng)配置完成后的html頁面被用戶訪問時，部件引擎會對用戶請求進行攔截，并分析其請求的html頁面代碼結(jié)構(gòu)，從中過濾出有標(biāo)記data_render的dom兀素。
[0006]進一步地，步驟一中，進行數(shù)據(jù)接口描述，約定模塊化內(nèi)容區(qū)域數(shù)據(jù)接口的基本形式和結(jié)構(gòu)。
[0007]進一步地，步驟三中，對html頁面上所有在運行時動態(tài)從服務(wù)器端獲取數(shù)據(jù)并顯示內(nèi)容的動態(tài)內(nèi)容區(qū)域進行標(biāo)識，標(biāo)識方式為在該區(qū)域的dom元素上添加標(biāo)記data_render并為其賦值，其值是服務(wù)器端數(shù)據(jù)獲取接口的name。
[0008]進一步地，步驟四中，在客戶端發(fā)起請求時，服務(wù)器端對請求進行攔截，并分析所請求的html頁面,使用data_render對頁面dom元素進行過濾,對于過濾到的dom元素,通過其data_render的值,在服務(wù)器端動態(tài)反射其所需數(shù)據(jù)接口的實例，并通過調(diào)用GetData方法獲得所需數(shù)據(jù)，然后附加到這個dom元素中。
[0009]相較于現(xiàn)有技術(shù)，本發(fā)明html頁面上內(nèi)容的同步模塊化加載方法能夠在html類型的頁面中，實現(xiàn)動態(tài)內(nèi)容的模塊化加載，解決了 html頁面下動態(tài)內(nèi)容對SEO不友好的問題。同一個服務(wù)器端數(shù)據(jù)結(jié)構(gòu)，通過傳入不同的參數(shù)，可以加載不同的數(shù)據(jù)，形成對數(shù)據(jù)接口的復(fù)用。

【專利附圖】

【附圖說明】
[0010]圖1為本發(fā)明的方法流程圖示。
[0011]圖2為本發(fā)明架構(gòu)圖示。

【具體實施方式】
[0012]本發(fā)明實施例提供了一種html頁面上內(nèi)容的同步模塊化加載方法能夠在html類型的頁面中，實現(xiàn)動態(tài)內(nèi)容的模塊化加載，解決了 html頁面下動態(tài)內(nèi)容對SEO不友好的問題。同一個服務(wù)器端數(shù)據(jù)結(jié)構(gòu)，通過傳入不同的參數(shù)，可以加載不同的數(shù)據(jù)，形成對數(shù)據(jù)接口的復(fù)用。
[0013]為使得本發(fā)明的發(fā)明目的、特征、優(yōu)點能夠更加的明顯和易懂，下面將結(jié)合本發(fā)明實施例中的附圖，對本發(fā)明實施例中的技術(shù)方案進行清楚、完整地描述，顯然，下面所描述的實施例僅僅是本發(fā)明一部分實施例，而非全部實施例?；诒景l(fā)明中的實施例，本領(lǐng)域的技術(shù)人員所獲得的所有其他實施例，都屬于本發(fā)明保護的范圍。
[0014]本發(fā)明的說明書和權(quán)利要求書及上述附圖中的術(shù)語“第一”、“第二”等是用于區(qū)別類似的對象，而不必用于描述特定的順序或先后次序。應(yīng)該理解這樣使用的術(shù)語在適當(dāng)情況下可以互換，這僅僅是描述本發(fā)明的實施例中對相同屬性的對象在描述時所采用的區(qū)分方式。此外，術(shù)語“包括”和“具有”以及他們的任何變形，意圖在于覆蓋不排他的包含，以便包含一系列單元的過程、方法、系統(tǒng)、產(chǎn)品或設(shè)備不必限于那些單元，而是可包括沒有清楚地列出的或?qū)τ谶@些過程、方法、產(chǎn)品或設(shè)備固有的其它單元。
[0015]以下分別進行詳細(xì)說明。
[0016]請參照圖1、圖2所示，本發(fā)明html頁面上內(nèi)容的同步模塊化加載方法，包括如下步驟:
步驟一、根據(jù)內(nèi)容顯示的需要，規(guī)劃每個模塊化內(nèi)容的服務(wù)器端數(shù)據(jù)獲取接口 ；
進行數(shù)據(jù)接口描述，約定模塊化內(nèi)容區(qū)域數(shù)據(jù)接口的基本形式和結(jié)構(gòu)，對應(yīng)頁面上各個模塊化內(nèi)容區(qū)域的數(shù)據(jù)接口實現(xiàn)該接口。數(shù)據(jù)接口根據(jù)統(tǒng)一接口定義要求，主要實現(xiàn)GetData方法。本發(fā)明實施例中，統(tǒng)一接口定義如下:public interface IPortlet{ public string GetData(object param)
}
步驟二、注冊數(shù)據(jù)獲取接口到配置文件
在服務(wù)器端配置文件中通過形如〈add name= 〃SinaRssNews〃 value=〃GenerSoft.EPP.RSS.RSSReader, GenerSoft.EPP.RSS〃 />的方式注冊接口調(diào)用名稱、程序集反射入口。實現(xiàn)了 IPortlet接口的數(shù)據(jù)接口要在接口描述文檔中進行注冊，注冊時主要指明其name、value和params,其中name是其全局唯一調(diào)用標(biāo)記；value是其用于.NET反射的程序及名稱。
[0017]步驟三、進行html頁面上模塊化內(nèi)容顯示區(qū)域的標(biāo)識和描述
對html頁面上所有在運行時動態(tài)從服務(wù)器端獲取數(shù)據(jù)并顯示內(nèi)容的動態(tài)內(nèi)容區(qū)域進行標(biāo)識，標(biāo)識方式為在該區(qū)域的dom元素上添加標(biāo)記data_render并為其賦值，其值是服務(wù)器端數(shù)據(jù)獲取接口的name ；params是其所需參數(shù)，json字符串類型，配置完成后的dom元素，形如:
< d i V id = 〃sina_news〃 data_render = 〃SinaRssNews" params = 〃{url:' http:, itemsCount:8}〃 ></div>
步驟四、于系統(tǒng)服務(wù)器端提供一個部件引擎，當(dāng)配置完成后的html頁面被用戶訪問時，部件引擎會對用戶請求進行攔截，并分析其請求的html頁面代碼結(jié)構(gòu)，從中過濾出有標(biāo)記data_render的dom兀素。
[0018]具體地，在客戶端發(fā)起請求時，服務(wù)器端對請求進行攔截，并分析所請求的html頁面，使用data_render對頁面dom元素進行過濾,對于過濾到的dom元素,通過其data_render的值，在服務(wù)器端動態(tài)反射其所需數(shù)據(jù)接口的實例，并通過調(diào)用GetData方法獲得所需數(shù)據(jù)，然后附加到這個dom元素中。實現(xiàn)代碼如下:
public class PortletHandler:1HttpHandler
{
public bool IsReusable
{
在過濾出所有標(biāo)記有data_render的dom元素后,根據(jù)data_render的值,獲取到對應(yīng)的數(shù)據(jù)接口程序集名稱，并利用.NET的反射機制實例化該程序集，并調(diào)用其GetData方法獲取數(shù)據(jù)，填充到對應(yīng)的動態(tài)內(nèi)容區(qū)域。所有內(nèi)容區(qū)域的數(shù)據(jù)獲取完畢后，部件引擎把處理后的html內(nèi)容Response到客戶端用戶瀏覽器。
[0019]通過以上的實施方式的描述，所屬領(lǐng)域的技術(shù)人員可以清楚地了解到本發(fā)明可借助軟件加必需的通用硬件的方式來實現(xiàn)，當(dāng)然也可以通過專用硬件包括專用集成電路、專用CPU、專用存儲器、專用元器件等來實現(xiàn)。一般情況下，凡由計算機程序完成的功能都可以很容易地用相應(yīng)的硬件來實現(xiàn)，而且，用來實現(xiàn)同一功能的具體硬件結(jié)構(gòu)也可以是多種多樣的，例如模擬電路、數(shù)字電路或?qū)Ｓ秒娐返取５?，對本發(fā)明而言更多情況下軟件程序?qū)崿F(xiàn)是更佳的實施方式?；谶@樣的理解，本發(fā)明的技術(shù)方案本質(zhì)上或者說對現(xiàn)有技術(shù)做出貢獻的部分可以以軟件產(chǎn)品的形式體現(xiàn)出來，該計算機軟件產(chǎn)品存儲在可讀取的存儲介質(zhì)中，如計算機的軟盤，U盤、移動硬盤、只讀存儲器(ROM，Read-Only Memory)、隨機存取存儲器(RAM, Random Access Memory)、磁碟或者光盤等,包括若干指令用以使得一臺計算機設(shè)備(可以是個人計算機，服務(wù)器，或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行本發(fā)明各個實施例所述的方法。
[0020]綜上所述，以上實施例僅用以說明本發(fā)明的技術(shù)方案，而非對其限制；盡管參照上述實施例對本發(fā)明進行了詳細(xì)的說明，本領(lǐng)域的普通技術(shù)人員應(yīng)當(dāng)理解:其依然可以對上述各實施例所記載的技術(shù)方案進行修改，或者對其中部分技術(shù)特征進行等同替換；而這些修改或者替換，并不使相應(yīng)技術(shù)方案的本質(zhì)脫離本發(fā)明各實施例技術(shù)方案的精神和范圍。
【權(quán)利要求】
1.一種html頁面上內(nèi)容的同步模塊化加載方法，其特征在于，包括如下步驟: 步驟一、根據(jù)內(nèi)容顯示的需要，規(guī)劃每個模塊化內(nèi)容的服務(wù)器端數(shù)據(jù)獲取接口 ； 步驟二、注冊數(shù)據(jù)獲取接口到配置文件； 步驟三、進行html頁面上模塊化內(nèi)容顯示區(qū)域的標(biāo)識和描述； 步驟四、于系統(tǒng)服務(wù)器端提供一個部件引擎，當(dāng)配置完成后的html頁面被用戶訪問時，部件引擎會對用戶請求進行攔截，并分析其請求的html頁面代碼結(jié)構(gòu)，從中過濾出有標(biāo)記data_render的dom兀素。
2.如權(quán)利要求1所述html頁面上內(nèi)容的同步模塊化加載方法，其特征在于:步驟一中，進行數(shù)據(jù)接口描述，約定模塊化內(nèi)容區(qū)域數(shù)據(jù)接口的基本形式和結(jié)構(gòu)。
3.如權(quán)利要求2所述html頁面上內(nèi)容的同步模塊化加載方法，其特征在于:步驟三中，對html頁面上所有在運行時動態(tài)從服務(wù)器端獲取數(shù)據(jù)并顯示內(nèi)容的動態(tài)內(nèi)容區(qū)域進行標(biāo)識，標(biāo)識方式為在該區(qū)域的dom元素上添加標(biāo)記data_render并為其賦值，其值是服務(wù)器端數(shù)據(jù)獲取接口的name。
4.如權(quán)利要求3所述html頁面上內(nèi)容的同步模塊化加載方法，其特征在于:步驟四中，在客戶端發(fā)起請求時，服務(wù)器端對請求進行攔截，并分析所請求的html頁面，使用data_render對頁面dom元素進行過濾,對于過濾到的dom元素,通過其data_render的值，在服務(wù)器端動態(tài)反射其所需數(shù)據(jù)接口的實例，并通過調(diào)用GetData方法獲得所需數(shù)據(jù)，然后附加到這個dom元素中。
【文檔編號】H04L29/08GK104270447SQ201410526835
【公開日】2015年1月7日 申請日期:2014年10月9日 優(yōu)先權(quán)日:2014年10月9日
【發(fā)明者】田尚杰 申請人:浪潮通用軟件有限公司