專利名稱:一種html頁面控件變化的定位方法和系統(tǒng)的制作方法
技術領域:
本發(fā)明涉及計算機技術領域,尤其涉及一種HTML頁面控件變化的定位方法和系統(tǒng)。
背景技術:
AJAX (Asynchronous JavaScript and XML),即異步 JavaScript 腳本語言和可擴 展標記語言XML,是一種創(chuàng)建交互式網頁應用的網頁開發(fā)技術,基于AJAX實現(xiàn)的TOB頁面 無刷新技術則是通過AJAX從服務端程序中獲得需要更改的HTML控件,然后在頁面上通過 JavaScript對該控件進行更新。HTML(HyperText Mark-up Language),即超文本標記語言或超文本鏈接標示語 言,是目前網絡上應用最為廣泛的語言,也是構成網頁文檔的主要語言。實現(xiàn)頁面無刷新重 點在于對HTML頁面中需要更新的控件進行定位。目前實現(xiàn)的方式有2種一種是通過編碼的方式手動指定需要更新的HTML控件; 另一種則是將可能需要進行無刷新更新的控件使用DIV元素進行包裹,然后對包裹的控件 進行更新。其中DIV元素是用來為HTML文檔內大塊(block-level)的內容提供結構和背 景的元素,DIV的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的,其中所包含 元素的特性由DIV標簽的屬性來控制,或者是通過使用樣式表格式化這個塊來進行控制。現(xiàn)有技術中的HTML系統(tǒng)控件頁面變化的定位方案存在以下缺點1、帶寬占用過多?,F(xiàn)有的定位方式僅僅指定了需要更新的HTML控件,并無法預知 這些控件在頁面執(zhí)行的過程中是否發(fā)生了變化。因此,每次頁面的執(zhí)行都會對這些指定的 控件進行更新,即使這些控件沒有發(fā)生任何的變化。這就造成了每一個操作都會需要通過 AJAX方式從服務端取得這些控件的HTML控件代碼,沒有做到控件有變化則更新,沒有變化 則不更新。2、使用復雜。使用DIV進行包裹的方式需要對原有頁面進行更改,而且由于DIV 本身就是一個HTML控件,這就可能對HTML頁面布局產生影響。另外,一旦頁面需要撤銷無 刷新方式,又得對頁面進行更改,刪除這些用以包裹的DIV。
發(fā)明內容
本發(fā)明要解決的技術問題在于,針對現(xiàn)有技術的上述缺陷,提供一種HTML頁面控 件變化的定位方法和系統(tǒng),其可以不更改頁面,自動定位頁面執(zhí)行過程中發(fā)生變化的控件。本發(fā)明解決其技術問題所采用的技術方案是構造一種HTML頁面控件變化的定位方法,其包括以下步驟A、分解頁面操作前的控件代碼,得到無子控件的多個獨立控件,根據各自的原層 級關系進行編號后,存儲為數據1 ;B、分解頁面操作后的控件代碼,得到無子控件的多個獨立的控件,根據各自的原 層級關系進行編號后,存儲為數據2 ;
C、按編號層級從外向內的順序,比較數據1和數據2中編號相同的控件代碼,得到 變化控件編號。本發(fā)明所述的HTML頁面控件變化的定位方法,其中,所述步驟C中,只比較具有相同編號的控件。本發(fā)明所述的HTML頁面控件變化的定位方法,其中,所述步驟C中,從層級的最外 層開始,逐步向內層進行比較。本發(fā)明所述的HTML頁面控件變化的定位方法,其中,所述步驟C中,在比較控件代 碼時,如果兩段控件代碼相同,則進入到下一層級進行比較,如果兩段控件代碼不同,則記 錄這段不同的控件代碼所對應的編號,并且不再進入到下一層級的比較。本發(fā)明所述的HTML頁面控件變化的定位方法,其中,在所述操作前的控件代碼中 包括三個控件,分別記作a控件、b控件、c控件;其中a控件內包含了 b控件、c控件,而b 控件包含了 c控件;所述步驟A包括以下步驟Al、分解頁面操作前的控件代碼,得到獨立的a控件、b控件、c控件;A2、使用具有層級關系的編號方式分別對a控件、b控件、c控件進行編號,其中a 控件編號仍為a,b控件編號為a_b,c控件編號為a-b-c ;A3、將步驟A2中得到的編號分別為a、a_b、a-b-c的控件中所包含的子控件去掉 后,保存為數據1。本發(fā)明所述的HTML頁面控件變化的定位方法,其中,所述步驟B包括以下步驟Bi、分解操作后的控件代碼,得到a控件、b控件、c控件;B2、使用具有層級關系的編號方式分別對a控件、b控件、c控件進行編號,其中a 控件編號仍為a,b控件編號為a_b,c控件編號為a-b-c ;B3、將步驟B2中得到的控件a和a_b中所包含的子控件去掉后,保存為數據2。本發(fā)明所述的HTML頁面控件變化的定位方法,其中,所述步驟C包括以下步驟Cl、比較數據1和數據2中的編號為a的控件,若不相同,則記錄a控件的編號,若 相同,則執(zhí)行步驟C2;C2、比較數據1和數據2中編號為a_b的控件,若不相同,則記錄b控件的編號,若 相同,則執(zhí)行步驟C3;C3、比較數據1和數據2中編號為a-b-c的控件,若不相同,則記錄c控件的編號, 若相同,則退出比較。本發(fā)明還提供了一種HTML頁面中控件變化的定位系統(tǒng),其中,包括控件代碼分解 模塊、編號及存儲模塊、比較模塊和變化控件列表生成模塊;其中,所述控件代碼分解模塊,用于分解頁面操作前的控件代碼,得到無子控件的多個 獨立控件,以及分解頁面操作后的控件代碼,得到無子控件的多個獨立的控件;所述編號及存儲模塊,用于對分解前的頁面操作前的多個獨立控件,根據各自的 原層級關系進行編號后,存儲為數據1,以及對分解后的頁面操作前的多個獨立控件,根據 各自的原層級關系進行編號后,存儲為數據2 ;所述比較模塊,用于按編號層級從外向內的順序,比較數據1和數據2中編號相同 的控件代碼,得到變化的控件編號;所述變化控件列表生成模塊,用于根據得到的變化的控件編號,生成變化控件編號列表。本發(fā)明通過將頁面操作前后的HTML頁面控件進行分解、編號及比較,可準確判斷出頁面操作前后所變化的控件的編號,可自動定位發(fā)生更改的HTML控件,只定位發(fā)生更改 的HTML控件,無變化的控件無需更新,有利于減少網絡傳輸數據量,簡化頁面的無刷新開 發(fā)與改造過程。
下面將結合附圖及實施例對本發(fā)明作進一步說明,附圖中圖1是本發(fā)明實施例的HTML頁面控件變化的定位方法流程圖;圖2是本發(fā)明實施例的HTML頁面控件變化的定位系統(tǒng)原理框圖。
具體實施例方式下面結合圖示,對本發(fā)明的優(yōu)選實施例作詳細介紹。本發(fā)明較佳實施例的HTML頁面控件變化的定位方法流程圖如圖1所示,本實施例 中以操作前的控件代碼中包括ID分別為a、b、c的a控件、b控件、c控件來進行具體說明, 其中a控件內包含了 b控件、c控件,而b控件包含了 c控件。頁面HTML控件代碼層次結 構如下<divid=”a”><div id=”b”><divid=”c”></div></div></div>應當理解,上述控件代碼在本實施例中僅用于結構上的示意,而與其所表示的具 體含義無關,下面詳細描述對以上控件代碼變化的定位方法,包括以下步驟步驟S10、分解頁面操作前的控件代碼,得到無子控件的多個獨立控件,根據各自 的原層級關系進行編號后,存儲為數據1,共包括以下三步第一步Sll 分解以上HTML控件代碼,得到獨立的控件,其中a控件代碼<divid=”a”><div id=”b”><divid=”c”></div></div></div>b控件代碼<div id=”b”><divid=”c”></div>
</div>c控件代碼<divid=”c”></div>第二步S12、通過第一步得到的控件,可以看到這些控件都是互相嵌套的,也就是 說a控件內包含了 b、c控件,而b控件則包含了 c控件,為了能準確標示其層級關系,我們 使用具有層級關系的編號方式分別對這三個控件進行編號。編號后結果如下a控件編號為a,代碼如下
<divid=”a”><divid=”b”><divid=”c”></div></div></div>b控件代碼編號為a_b,代碼如下<divid=”b”><divid=”c”></div></div>c的控件編號為a-b-c,代碼如下<divid=”c”></div>第三步S13、將步驟S12中得到的各控件中所包含的子控件去掉,于是得到以下結 果編號為a的a控件代碼<divid=”a”></div>編號為a_b的b控件代碼<div id =,,b,,></div>編號為a-b-c的c控件代碼<divid=”c”></div>現(xiàn)在第三步S13得到的結果作為頁面的結構數據保存起來,命名為數據1。當執(zhí)行完頁面之后,新的HTML控件代碼可能會變成如下結構<divid=”a”><div id=”b”>this is test !<divid=”c”></div>
</div></div>步驟S20、對以上頁面操作后的控件代碼重復進行步驟SlOl中的三步分析,得到 以下控件編號為a的a控件代碼<divid=,,a”></div>編號為a-b的b控件代碼<div id=”b”>this is test !</div>編號為a-b-c的c控件代碼<divid=”c”></div>將步驟S120中得到的控件結構命名為數據2,并保存。步驟S30、按編號層級從外向內的順序,比較數據1和數據2中編號相同的控件代碼,得到變化控件編號。比較的邏輯如下1)比較只在具有相同編號的控件中進行;2)從層級的最外層開始比較,順序為a、a-b、a-b-C ;3)比較的時候,如果兩段控件代碼相同則進入到下一層級進行比較,如果兩段控件代碼不同,則記錄這段不同的控件代碼所對應的編號并不再進入到下一層級的比較。根據以上比較的邏輯,步驟S103中對數據1與數據2比較的過程如下先比較編號為a的兩段控件代碼,如果編號為a的兩段控件代碼完全相同,則開始對下一層級的編號為a-b的兩段控件代碼進行比較;如果編號為a-b的兩段控件代碼不同,則不再對下一層級的編號為a-b-c的兩段控件代碼進行比較,記錄b控件的編號。本實施例中給出的是編號為a-b的兩段控件代碼不同的情況,但是如果編號為 a-b的兩段控件代碼相同,則需要再對下一層級的c控件代碼進行比較,如果c控件代碼不同,則記錄c控件的編號。步驟S40、最后再將步驟S103中比較得到的發(fā)生變化的控件編號記錄下來,生成變化控件編號列表,以便于通過JavaScript對該控件進行更新。這樣,就可以只定位發(fā)生更改的HTML控件,無變化的控件會被自動忽略,有利于減少網絡傳輸數據量,簡化HTML頁 面的無刷新開發(fā)與改造過程。以上方法中,雖然只例舉了三層嵌套關系的控件代碼結構的定位,但是可以依次原理,將該方法應用于對多層嵌套關系的控件代碼的定位。本發(fā)明實施例還提供了一種能實現(xiàn)以上定位方法的HTML頁面中控件變化的定位系統(tǒng),原理框圖如圖2所示,其包括控件代碼分解模塊10、編號及存儲模塊20、比較模塊30和變化控件列表生成模塊40。其中,控件代碼分解模塊10用于分解頁面操作前的控件代碼,得到無子控件的多個獨立控件,以及分解頁面操作后的控件代碼,得到無子控件的多個獨立的控件。編號及存儲模塊20用于對分解前的頁面操作前的多個獨立控件,根據各自的原層級關系進行編號后,存儲為數據1,以及對分解后的頁面操作前的多個獨立控件,根據各自的原層級關系進 行編號后,存儲為數據2。比較模塊30用于按編號層級從外向內的順序,比較數據1和數據 2中編號相同的控件代碼,得到變化的控件編號。變化控件列表生成模塊40用于根據得到 的變化的控件編號,生成變化控件編號列表。本發(fā)明實施例的定位系統(tǒng)的具體實現(xiàn)方法參照前面描述的定位方法,在此不再贅 述。本發(fā)明通過將頁面操作前后的HTML頁面控件進行分解、編號及比較,可準確判斷出頁面操作前后所變化的控件的編號,可自動定位發(fā)生更改的HTML控件,只定位發(fā)生更改 的HTML控件,無變化的控件無需更新,有利于減少網絡傳輸數據量,簡化頁面的無刷新開 發(fā)與改造過程。應當理解的是,對本領域普通技術人員來說,可以根據上述說明加以改進或變換, 而所有這些改進和變換都應屬于本發(fā)明所附權利要求的保護范圍。
權利要求
一種HTML頁面控件變化的定位方法,其特征在于,包括以下步驟A、分解頁面操作前的控件代碼,得到無子控件的多個獨立控件,根據各自的原層級關系進行編號后,存儲為數據1;B、分解頁面操作后的控件代碼,得到無子控件的多個獨立的控件,根據各自的原層級關系進行編號后,存儲為數據2;C、按編號層級從外向內的順序,比較數據1和數據2中編號相同的控件代碼,得到變化控件編號。
2.根據權利要求1所述的HTML頁面控件變化的定位方法,其特征在于,所述步驟C中, 只比較具有相同編號的控件。
3.根據權利要求1所述的HTML頁面控件變化的定位方法,其特征在于,所述步驟C中, 從層級的最外層開始,逐步向內層進行比較。
4.根據權利要求1所述的HTML頁面控件變化的定位方法,其特征在于,所述步驟C中, 在比較控件代碼時,如果兩段控件代碼相同,則進入到下一層級進行比較,如果兩段控件代 碼不同,則記錄這段不同的控件代碼所對應的編號,并且不再進入到下一層級的比較。
5.根據權利要求1至4中任一項所述的HTML頁面控件變化的定位方法,其特征在于, 在所述操作前的控件代碼中包括三個控件,分別記作a控件、b控件、c控件;其中a控件內 包含了 b控件、c控件,而b控件包含了 c控件;所述步驟A包括以下步驟Al、分解頁面操作前的控件代碼,得到獨立的a控件、b控件、c控件;A2、使用具有層級關系的編號方式分別對a控件、b控件、c控件進行編號,其中a控件 編號仍為a,b控件編號為a_b,c控件編號為a-b-c ;A3、將步驟A2中得到的編號分別為a、a-b、a-b-C的控件中所包含的子控件去掉后,保 存為數據1。
6.根據權利要求5所述的HTML頁面控件變化的定位方法,其特征在于,所述步驟B包 括以下步驟Bi、分解操作后的控件代碼,得到a控件、b控件、c控件;B2、使用具有層級關系的編號方式分別對a控件、b控件、c控件進行編號,其中a控件 編號仍為a,b控件編號為a_b,c控件編號為a-b-c ;B3、將步驟B2中得到的控件a和a-b中所包含的子控件去掉后,保存為數據2。
7.根據權利要求6所述的HTML頁面控件變化的定位方法,其特征在于,所述步驟C包 括以下步驟Cl、比較數據1和數據2中的編號為a的控件,若不相同,則記錄a控件的編號,若相同, 則執(zhí)行步驟C2 ;C2、比較數據1和數據2中編號為a-b的控件,若不相同,則記錄b控件的編號,若相同, 則執(zhí)行步驟C3 ;C3、比較數據1和數據2中編號為a-b-c的控件,若不相同,則記錄c控件的編號,若相 同,則退出比較。
8.—種HTML頁面中控件變化的定位系統(tǒng),其特征在于,包括控件代碼分解模塊、編號 及存儲模塊、比較模塊和變化控件列表生成模塊;其中,所述控件代碼分解模塊,用于分解頁面操作前的控件代碼,得到無子控件的多個獨立控件,以及分解頁面操作后的控件代碼,得到無子控件的多個獨立的控件;所述編號及存儲模塊,用于對分解前的頁面操作前的多個獨立控件,根據各自的原層 級關系進行編號后,存儲為數據1,以及對分解后的頁面操作前的多個獨立控件,根據各自 的原層級關系進行編號后,存儲為數據2 ;所述比較模塊,用于按編號層級從外向內的順序,比較數據1和數據2中編號相同的控件代碼,得到變化的控件編號;所述變化控件列表生成模塊,用于根據得到的變化的控件編號,生成變化控件編號列表。
全文摘要
本發(fā)明涉及一種HTML頁面控件變化的定位方法及系統(tǒng),其中HTML頁面控件變化的定位方法包括步驟A、分解頁面操作前的控件代碼,得到無子控件的多個獨立控件,根據各自的原層級關系進行編號后,存儲為數據1;B、分解頁面操作后的控件代碼,得到無子控件的多個獨立的控件,根據各自的原層級關系進行編號后,存儲為數據2;C、按編號層級從外向內的順序,比較數據1和數據2中編號相同的控件代碼,得到變化控件編號。本發(fā)明可準確判斷出頁面操作前后所變化的控件的編號,可自動定位發(fā)生更改的HTML控件,只定位發(fā)生更改的HTML控件,無變化的控件無需更新,有利于減少網絡傳輸數據量,簡化頁面的無刷新開發(fā)與改造過程。
文檔編號G06F9/44GK101799752SQ200910239528
公開日2010年8月11日 申請日期2009年12月31日 優(yōu)先權日2009年12月31日
發(fā)明者胡小波 申請人:深圳聯(lián)友科技有限公司