一種實時加載網(wǎng)頁中業(yè)務(wù)數(shù)據(jù)的方法和系統(tǒng)的制作方法
【技術(shù)領(lǐng)域】
[0001] 本發(fā)明涉及網(wǎng)絡(luò)技術(shù)領(lǐng)域，尤其涉及一種實時加載網(wǎng)頁中業(yè)務(wù)數(shù)據(jù)的方法和系 統(tǒng)。
【背景技術(shù)】
[0002] 在現(xiàn)有技術(shù)中瀏覽器通過以下兩種方式記載網(wǎng)頁中的業(yè)務(wù)數(shù)據(jù)：
[0003] 第一種：瀏覽器發(fā)起一個瀏覽網(wǎng)頁的網(wǎng)絡(luò)連接請求，服務(wù)器接收到該瀏覽器的請 求后，根據(jù)頁面框架定義的業(yè)務(wù)數(shù)據(jù)塊從多個業(yè)務(wù)模塊獲取相應(yīng)的業(yè)務(wù)數(shù)據(jù)，然后把獲取 的所有業(yè)務(wù)數(shù)據(jù)和頁面框架代碼進行處理，生成完整的頁面數(shù)據(jù)，返回給瀏覽器；瀏覽器接 收頁面數(shù)據(jù)后，服務(wù)器會斷開本次網(wǎng)絡(luò)連接；瀏覽器解析頁面數(shù)據(jù)，并渲染成最終的頁面后 顯示。以通過瀏覽器獲取一個商家主頁為例，瀏覽器首先發(fā)送一個商家主頁的網(wǎng)絡(luò)請求，月艮 務(wù)器接收到該請求后，會依照業(yè)務(wù)執(zhí)行的前后順序，從多個業(yè)務(wù)模塊獲取相應(yīng)的業(yè)務(wù)數(shù)據(jù)， 比如先從用戶模塊獲取商家的頭像信息，然后從皮膚模塊中獲取商家自定義的皮膚，再從 插件模塊中獲取商家購買的插件信息等等，然后處理所有的業(yè)務(wù)數(shù)據(jù)和頁面框架，生成一 個完整的頁面數(shù)據(jù)，服務(wù)器將該頁面數(shù)據(jù)發(fā)送至瀏覽器，由瀏覽器渲染后顯示頁面。
[0004] 此種方式中，瀏覽器發(fā)起頁面連接請求后，需要一直等待服務(wù)器反饋完整的頁面 數(shù)據(jù)，當(dāng)服務(wù)器后臺獲得多個業(yè)務(wù)模塊的業(yè)務(wù)數(shù)據(jù)很慢或者調(diào)用的某個業(yè)務(wù)模塊返回數(shù)據(jù) 很慢時，服務(wù)器生成完整的頁面代碼也會很慢，這會導(dǎo)致在此過程中沒有數(shù)據(jù)從服務(wù)器返 回至瀏覽器，即使有的業(yè)務(wù)數(shù)據(jù)已獲取完成也不能發(fā)送至瀏覽器顯示，使得瀏覽器一直處 于等待狀態(tài)，此時，瀏覽器顯示給用戶的界面僅是白板頁面。
[0005] 第二種：瀏覽器發(fā)起瀏覽網(wǎng)頁的第一網(wǎng)絡(luò)連接請求，第一網(wǎng)絡(luò)連接請求包括頁面 框架請求，服務(wù)器接收到瀏覽器的請求后，立即將頁面框架數(shù)據(jù)返回給瀏覽器，此時服務(wù)器 不做任何的業(yè)務(wù)處理并在瀏覽器接收完頁面框架數(shù)據(jù)后，斷開本次網(wǎng)絡(luò)連接。瀏覽器解析 服務(wù)器返回的頁面框架數(shù)據(jù)，根據(jù)頁面框架定義的業(yè)務(wù)數(shù)據(jù)塊，瀏覽器建立對應(yīng)每個業(yè)務(wù) 數(shù)據(jù)塊的第二網(wǎng)絡(luò)連接請求，為每個業(yè)務(wù)數(shù)據(jù)塊請求業(yè)務(wù)數(shù)據(jù)，并將第二網(wǎng)絡(luò)連接請求發(fā) 送至服務(wù)器；服務(wù)器接收請求后，分別處理每個業(yè)務(wù)數(shù)據(jù)塊連接請求對應(yīng)的業(yè)務(wù)，然后返回 相應(yīng)的業(yè)務(wù)數(shù)據(jù)給瀏覽器，并斷開響應(yīng)的網(wǎng)絡(luò)連接；瀏覽器解析渲染業(yè)務(wù)數(shù)據(jù)到頁面框架 對應(yīng)的業(yè)務(wù)數(shù)據(jù)塊上，從而形成顯示的網(wǎng)頁。仍以通過瀏覽器獲取一個商家主頁為例，瀏覽 器首先發(fā)送第一網(wǎng)絡(luò)連接請求，請求獲取頁面框架；服務(wù)器接收到瀏覽器的請求后，立即將 頁面框架代碼返回給瀏覽器，并在瀏覽器接收完頁面框架代碼后，斷開本次網(wǎng)絡(luò)連接；瀏覽 器解析服務(wù)器返回的頁面框架數(shù)據(jù)，根據(jù)頁面框架定義的業(yè)務(wù)數(shù)據(jù)塊，瀏覽器建立對應(yīng)每 個業(yè)務(wù)數(shù)據(jù)塊的第二網(wǎng)絡(luò)連接請求，如對應(yīng)頭像信息數(shù)據(jù)塊發(fā)送頭像數(shù)據(jù)塊的第二網(wǎng)絡(luò)連 接請求，對應(yīng)皮膚數(shù)據(jù)塊發(fā)送皮膚數(shù)據(jù)塊的第二網(wǎng)絡(luò)連接請求，對應(yīng)插件信息數(shù)據(jù)塊發(fā)送 插件信息數(shù)據(jù)塊的第二網(wǎng)絡(luò)連接請求等等，服務(wù)器根據(jù)收到的第二網(wǎng)絡(luò)連接請求對應(yīng)的從 用戶模塊、皮膚模塊、插件模塊等業(yè)務(wù)模塊獲取相應(yīng)的業(yè)務(wù)數(shù)據(jù)，并將業(yè)務(wù)數(shù)據(jù)發(fā)送至瀏覽 器，由瀏覽器解析渲染業(yè)務(wù)數(shù)據(jù)到頁面框架對應(yīng)的業(yè)務(wù)數(shù)據(jù)塊上，從而形成顯示的網(wǎng)頁。
[0006] 采用此種方式可以較快的從服務(wù)器獲得頁面框架數(shù)據(jù)，通過渲染頁面框架，從而 不用顯示頁面白板，增加用戶體驗；但是，需要對應(yīng)頁面框架的多個業(yè)務(wù)數(shù)據(jù)塊，必須對應(yīng) 的發(fā)送多個第二網(wǎng)絡(luò)連接請求，這會導(dǎo)致增加瀏覽器和服務(wù)器之間的網(wǎng)絡(luò)連接數(shù)量。而對 于瀏覽器而言，一般瀏覽器和服務(wù)器之間同時可并發(fā)的網(wǎng)絡(luò)連接數(shù)量是有限的，如IE瀏覽 器的并發(fā)網(wǎng)絡(luò)連接數(shù)量為2個，chrome瀏覽器的并發(fā)網(wǎng)絡(luò)連接數(shù)量為6個，firefox瀏覽器 的并發(fā)網(wǎng)絡(luò)連接數(shù)量為4個，當(dāng)實際網(wǎng)絡(luò)連接數(shù)量大于瀏覽器的上限時，多余的請求必須 等待瀏覽器執(zhí)行完前面的請求，才能發(fā)送后續(xù)的請求，從而造成延遲。

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

[0007] 本發(fā)明提供了一種實時加載網(wǎng)頁中業(yè)務(wù)數(shù)據(jù)的方法和系統(tǒng)，以提高網(wǎng)頁的加載速 度，并節(jié)省瀏覽器和服務(wù)器之間的網(wǎng)絡(luò)連接數(shù)。
[0008] 本發(fā)明采用的技術(shù)手段如下：
[0009] -種實時加載網(wǎng)頁中業(yè)務(wù)數(shù)據(jù)的方法，包括：
[0010] 步驟A :瀏覽器與服務(wù)器建立網(wǎng)絡(luò)連接，并向服務(wù)器發(fā)送網(wǎng)頁頁面請求；
[0011] 步驟B:服務(wù)器接收到所述網(wǎng)頁頁面請求后，存儲網(wǎng)絡(luò)連接信息，將頁面框架數(shù)據(jù) 發(fā)送至瀏覽器，并根據(jù)頁面框架定義的業(yè)務(wù)數(shù)據(jù)塊從多個業(yè)務(wù)模塊并行獲取相應(yīng)的業(yè)務(wù)數(shù) 據(jù)，且每當(dāng)一個業(yè)務(wù)數(shù)據(jù)塊對應(yīng)的業(yè)務(wù)數(shù)據(jù)獲取完成后，根據(jù)存儲的所述網(wǎng)絡(luò)連接信息，將 業(yè)務(wù)數(shù)據(jù)以及該業(yè)務(wù)數(shù)據(jù)對應(yīng)的數(shù)據(jù)塊信息發(fā)送至瀏覽器，直至所有的業(yè)務(wù)數(shù)據(jù)及對應(yīng)的 數(shù)據(jù)塊信息均發(fā)送至瀏覽器后，服務(wù)器斷開網(wǎng)絡(luò)連接；
[0012] 步驟C:瀏覽器解析頁面框架數(shù)據(jù)，渲染顯示頁面框架，并實時解析和渲染接收到 的業(yè)務(wù)數(shù)據(jù)，根據(jù)該業(yè)務(wù)數(shù)據(jù)對應(yīng)的數(shù)據(jù)塊信息形成頁面信息進行顯示。
[0013] 進一步，在步驟B中，將所述數(shù)據(jù)塊信息和其對應(yīng)的業(yè)務(wù)數(shù)據(jù)封裝為JS (Javascript)腳本后，發(fā)送至瀏覽器。
[0014] 進一步，在步驟C中，瀏覽器接收到JS腳本后，執(zhí)行所述JS腳本，獲得業(yè)務(wù)數(shù)據(jù)和 該業(yè)務(wù)數(shù)據(jù)對應(yīng)的數(shù)據(jù)塊信息，解析和渲染業(yè)務(wù)數(shù)據(jù)，并根據(jù)數(shù)據(jù)塊信息在頁面框架的對 應(yīng)數(shù)據(jù)塊形成頁面信息進行顯示。
[0015] 本發(fā)明還提供了一種實時加載網(wǎng)頁中業(yè)務(wù)數(shù)據(jù)的系統(tǒng)，包括瀏覽器和服務(wù)器；
[0016] 其中，所述瀏覽器用于與服務(wù)器建立網(wǎng)絡(luò)連接，并向服務(wù)器發(fā)送網(wǎng)頁頁面請求，接 收頁面框架數(shù)據(jù)、業(yè)務(wù)數(shù)據(jù)及該業(yè)務(wù)數(shù)據(jù)對應(yīng)的數(shù)據(jù)塊信息，并解析和渲染顯示頁面框架， 以及實時解析和渲染接收到的業(yè)務(wù)數(shù)據(jù)，并根據(jù)該業(yè)務(wù)數(shù)據(jù)對應(yīng)的數(shù)據(jù)塊信息形成頁面信 息進行顯示；
[0017] 所述服務(wù)器包含多個業(yè)務(wù)模塊，用于在接收到網(wǎng)頁頁面請求后，存儲連接信息，將 頁面框架數(shù)據(jù)發(fā)送至瀏覽器，并根據(jù)頁面框架定義的業(yè)務(wù)數(shù)據(jù)塊從多個業(yè)務(wù)模塊并行獲取 相應(yīng)的業(yè)務(wù)數(shù)據(jù)，且每當(dāng)一個業(yè)務(wù)數(shù)據(jù)塊對應(yīng)的業(yè)務(wù)數(shù)據(jù)獲取完成后，根據(jù)存儲的所述連 接信息，將業(yè)務(wù)數(shù)據(jù)以及該業(yè)務(wù)數(shù)據(jù)對應(yīng)的數(shù)據(jù)塊信息發(fā)送至瀏覽器，直至所有的業(yè)務(wù)數(shù) 據(jù)及對應(yīng)的數(shù)據(jù)塊信息均發(fā)送至瀏覽器后，斷開網(wǎng)絡(luò)連接。
[0018] 進一步，所述服務(wù)器用于將數(shù)據(jù)塊信息和其對應(yīng)的業(yè)務(wù)數(shù)據(jù)封裝為JS腳本后，發(fā) 送至瀏覽器。
[0019] 進一步，所述瀏覽器用于接收到JS腳本后，執(zhí)行所述JS腳本，獲得業(yè)務(wù)數(shù)據(jù)和該 業(yè)務(wù)數(shù)據(jù)對應(yīng)的數(shù)據(jù)塊信息，解析和渲染業(yè)務(wù)數(shù)據(jù)，并根據(jù)數(shù)據(jù)塊信息在頁面框架的對應(yīng) 數(shù)據(jù)塊形成頁面信息進行顯示。
[0020] 采用本發(fā)明提供的實時加載網(wǎng)頁中業(yè)務(wù)數(shù)據(jù)的方法和系統(tǒng)，實現(xiàn)了在只建立一個 網(wǎng)絡(luò)連接的情況下，通過服務(wù)端的并發(fā)執(zhí)行獲取業(yè)務(wù)數(shù)據(jù)，并將業(yè)務(wù)數(shù)據(jù)分段輸出，讓瀏覽 器實時接收相應(yīng)的業(yè)務(wù)數(shù)據(jù)進行渲染顯示，大大提高了網(wǎng)頁中包含多個業(yè)務(wù)模塊的數(shù)據(jù)時 的頁面加載速度，并節(jié)省了瀏覽器和服務(wù)端的網(wǎng)絡(luò)連接數(shù)