[發(fā)明專利]一種html頁面上內(nèi)容的同步模塊化加載方法

在審

• 申請?zhí)枺?/td>: 201410526835.0
• 申請日: 2014-10-09
• 公開（公告）號: CN104270447A
• 公開（公告）日: 2015-01-07
• 發(fā)明（設(shè)計）人: 田尚杰
• 申請（專利權(quán)）人: 浪潮通用軟件有限公司
• 主分類號: H04L29/08
• 分類號: H04L29/08
• 代理公司: 濟南信達專利事務(wù)所有限公司 37100
• 代理人: 姜明

技術(shù)領(lǐng)域

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

背景技術(shù)

在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的方式將會導致無法對需要索引的內(nèi)容編制索引，html頁面上動態(tài)內(nèi)容無法索引，對SEO是不友好的。

故，針對上述現(xiàn)有技術(shù)存在的缺陷，實有必要進行開發(fā)研究，以提供一種方案，通過引入動態(tài)向請求中附加內(nèi)容的方法，解決html頁面上動態(tài)內(nèi)容無法索引的問題。

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

為解決上述問題，本發(fā)明的目的在于提供一種html頁面上內(nèi)容的同步模塊化加載方法，以解決html頁面上動態(tài)內(nèi)容無法索引的問題。

為實現(xiàn)上述目的，本發(fā)明的技術(shù)方案為：

一種html頁面上內(nèi)容的同步模塊化加載方法，包括如下步驟：

步驟一、根據(jù)內(nèi)容顯示的需要，規(guī)劃每個模塊化內(nèi)容的服務(wù)器端數(shù)據(jù)獲取接口；

步驟二、注冊數(shù)據(jù)獲取接口到配置文件；

步驟三、進行html頁面上模塊化內(nèi)容顯示區(qū)域的標識和描述；

步驟四、于系統(tǒng)服務(wù)器端提供一個部件引擎，當配置完成后的html頁面被用戶訪問時，部件引擎會對用戶請求進行攔截，并分析其請求的html頁面代碼結(jié)構(gòu)，從中過濾出有標記data_render的dom元素。

進一步地，步驟一中，進行數(shù)據(jù)接口描述，約定模塊化內(nèi)容區(qū)域數(shù)據(jù)接口的基本形式和結(jié)構(gòu)。

進一步地，步驟三中，對html頁面上所有在運行時動態(tài)從服務(wù)器端獲取數(shù)據(jù)并顯示內(nèi)容的動態(tài)內(nèi)容區(qū)域進行標識，標識方式為在該區(qū)域的dom元素上添加標記data_render并為其賦值，其值是服務(wù)器端數(shù)據(jù)獲取接口的name。

進一步地，步驟四中，在客戶端發(fā)起請求時，服務(wù)器端對請求進行攔截，并分析所請求的html頁面，使用data_render對頁面dom元素進行過濾，對于過濾到的dom元素，通過其data_render的值，在服務(wù)器端動態(tài)反射其所需數(shù)據(jù)接口的實例，并通過調(diào)用GetData方法獲得所需數(shù)據(jù)，然后附加到這個dom元素中。

相較于現(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ù)接口的復用。

附圖說明

圖1為本發(fā)明的方法流程圖示。

圖2為本發(fā)明架構(gòu)圖示。

具體實施方式

本發(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ā)明的發(fā)明目的、特征、優(yōu)點能夠更加的明顯和易懂，下面將結(jié)合本發(fā)明實施例中的附圖，對本發(fā)明實施例中的技術(shù)方案進行清楚、完整地描述，顯然，下面所描述的實施例僅僅是本發(fā)明一部分實施例，而非全部實施例?；诒景l(fā)明中的實施例，本領(lǐng)域的技術(shù)人員所獲得的所有其他實施例，都屬于本發(fā)明保護的范圍。

本發(fā)明的說明書和權(quán)利要求書及上述附圖中的術(shù)語“第一”、“第二”等是用于區(qū)別類似的對象，而不必用于描述特定的順序或先后次序。應該理解這樣使用的術(shù)語在適當情況下可以互換，這僅僅是描述本發(fā)明的實施例中對相同屬性的對象在描述時所采用的區(qū)分方式。此外，術(shù)語“包括”和“具有”以及他們的任何變形，意圖在于覆蓋不排他的包含，以便包含一系列單元的過程、方法、系統(tǒng)、產(chǎn)品或設(shè)備不必限于那些單元，而是可包括沒有清楚地列出的或?qū)τ谶@些過程、方法、產(chǎn)品或設(shè)備固有的其它單元。

以下分別進行詳細說明。

請參照圖1、圖2所示，本發(fā)明html頁面上內(nèi)容的同步模塊化加載方法，包括如下步驟：

步驟一、根據(jù)內(nèi)容顯示的需要，規(guī)劃每個模塊化內(nèi)容的服務(wù)器端數(shù)據(jù)獲取接口；