一種頁面加載方法、裝置、服務(wù)器和系統(tǒng)的制作方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及頁面加載領(lǐng)域，更為具體而言，涉及一種頁面加載方法、裝置、服務(wù)器和系統(tǒng)。
【背景技術(shù)】
[0002]在頁面加載過程中，通常需要通過異步請(qǐng)求(S卩，Ajax請(qǐng)求)實(shí)現(xiàn)頁面的局部加載。在現(xiàn)有技術(shù)中，對(duì)異步請(qǐng)求所請(qǐng)求內(nèi)容的解析和渲染需要等所請(qǐng)求的內(nèi)容全部下載完成后才能進(jìn)行。這就導(dǎo)致在整個(gè)下載過程中，頁面不會(huì)進(jìn)行任何處理，用戶只能等待，特別是當(dāng)異步請(qǐng)求的數(shù)據(jù)量較大時(shí)，下載時(shí)間較長(zhǎng)，頁面加載性能較差且嚴(yán)重影響用戶體驗(yàn)。

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

[0003]為了解決現(xiàn)有技術(shù)所存在的缺陷，本發(fā)明實(shí)施方式提供一種頁面加載方法、裝置、服務(wù)器及系統(tǒng)，能夠?qū)崿F(xiàn)邊下載、邊解析、邊展現(xiàn)的效果，提高頁面加載的性能和用戶體驗(yàn)。
[0004]第一方面，本發(fā)明實(shí)施方式提供了一種頁面加載方法，包括:
[0005]向服務(wù)器發(fā)送Ajax請(qǐng)求；
[0006]接收服務(wù)器返回的響應(yīng)內(nèi)容，并在接收所述響應(yīng)內(nèi)容的過程中，根據(jù)所述響應(yīng)內(nèi)容的段落劃分，對(duì)所述響應(yīng)內(nèi)容進(jìn)行分段落地提取和加載處理；
[0007]其中，所述服務(wù)器在接收到所述Ajax請(qǐng)求后，將需要返回的內(nèi)容進(jìn)行段落劃分，生成包含多個(gè)段落的所述響應(yīng)內(nèi)容。
[0008]可選地，在本發(fā)明實(shí)施例的一種實(shí)現(xiàn)方式中，在接收所述響應(yīng)內(nèi)容的過程中，根據(jù)所述響應(yīng)內(nèi)容的段落劃分，對(duì)所述響應(yīng)內(nèi)容進(jìn)行分段落地提取和加載處理，包括:在接收所述響應(yīng)內(nèi)容的過程中，周期性地檢查接收到的響應(yīng)內(nèi)容中是否包含分隔符，所述分隔符用于標(biāo)識(shí)段落結(jié)束；如果包含分隔符，則從所述接收到的響應(yīng)內(nèi)容中提取該分隔符所對(duì)應(yīng)段落的內(nèi)容，根據(jù)提取到的內(nèi)容進(jìn)行解析或頁面渲染。
[0009]進(jìn)一步地，在接收所述響應(yīng)內(nèi)容的過程中，周期性地檢查接收到的響應(yīng)內(nèi)容中是否包含分隔符，包括:監(jiān)聽Xml Http Request對(duì)象的返回狀態(tài)事件，所述Ajax請(qǐng)求由所述Xml Http Request對(duì)象發(fā)送至所述服務(wù)器；根據(jù)返回狀態(tài)事件判斷Xml Http Request對(duì)象的屬性ready State的值是否等于3，如果等于，貝Ij檢查接收到的響應(yīng)內(nèi)容中是否包含分隔符，其中，所述ready State用于標(biāo)識(shí)所述響應(yīng)內(nèi)容的傳輸狀態(tài)。
[0010]可選地，在本實(shí)施例的另一種實(shí)現(xiàn)方式中，根據(jù)提取到的內(nèi)容進(jìn)行解析或頁面渲染，包括:當(dāng)提取到的內(nèi)容為Json格式的圖片內(nèi)容時(shí)，根據(jù)每一項(xiàng)key與img標(biāo)簽的對(duì)應(yīng)關(guān)系，將每一項(xiàng)key所對(duì)應(yīng)的value值設(shè)置到相應(yīng)img標(biāo)簽的src屬性中，以便進(jìn)行圖片植染。
[0011]第二方面，本發(fā)明實(shí)施例提供一種頁面加載方法，其所述方法包括:
[0012]接收瀏覽器發(fā)送的Ajax請(qǐng)求；
[0013]對(duì)需要返回給所述客戶端的內(nèi)容進(jìn)行段落劃分，生成包含多個(gè)段落的響應(yīng)內(nèi)容；
[0014]將所述響應(yīng)內(nèi)容發(fā)送至所述瀏覽器。
[0015]可選地，所述對(duì)需要返回給所述客戶端的內(nèi)容進(jìn)行段落劃分，包括:將需要返回給所述客戶端的內(nèi)容劃分為多個(gè)以分隔符作為結(jié)束的段落，所述分隔符用于標(biāo)識(shí)段落結(jié)束。
[0016]第三方面，本發(fā)明實(shí)施例提供一種頁面加載裝置，包括:
[0017]發(fā)送模塊，用于向服務(wù)器發(fā)送Ajax請(qǐng)求；
[0018]接收模塊，用于接收服務(wù)器返回的響應(yīng)內(nèi)容；
[0019]分段處理模塊，用于在所述接收模塊接收所述響應(yīng)內(nèi)容的過程中，根據(jù)所述響應(yīng)內(nèi)容的段落劃分，對(duì)所述響應(yīng)內(nèi)容進(jìn)行分段落地提取和加載處理；
[0020]其中，所述服務(wù)器在接收到所述Ajax請(qǐng)求后，對(duì)需要返回的內(nèi)容進(jìn)行段落劃分，生成包含多個(gè)段落的所述響應(yīng)內(nèi)容。
[0021]可選地，在本實(shí)施例的一種實(shí)現(xiàn)方式中，所述分段處理模塊包括:
[0022]檢查子模塊，用于在所述接收模塊接收所述響應(yīng)內(nèi)容的過程中，周期性地檢查所述接收模塊接收到的響應(yīng)內(nèi)容中是否包含用于標(biāo)識(shí)段落結(jié)束的分隔符，如果包含，則觸發(fā)處理子模塊；處理子模塊，用于從所述接收到的響應(yīng)內(nèi)容中提取分隔符所對(duì)應(yīng)段落的內(nèi)容，并根據(jù)提取到的內(nèi)容進(jìn)行解析或頁面渲染。
[0023]進(jìn)一步地，所述檢查子模塊具體用于，監(jiān)聽Xml Http Request對(duì)象的返回狀態(tài)事件，所述Ajax請(qǐng)求由所述Xml Http Request對(duì)象發(fā)送至所述服務(wù)器；根據(jù)返回狀態(tài)事件判斷ready State是否等于3，如果等于，則檢查接收到的響應(yīng)內(nèi)容中是否包含分隔符，其中，所述ready State用于標(biāo)識(shí)所述響應(yīng)內(nèi)容的傳輸狀態(tài)。
[0024]可選地，在本實(shí)施例的另一種實(shí)現(xiàn)方式中，所述處理子模塊具體用于，
[0025]當(dāng)提取到的內(nèi)容為Json格式的圖片內(nèi)容時(shí)，根據(jù)每一項(xiàng)key與img標(biāo)簽的對(duì)應(yīng)關(guān)系，將每一項(xiàng)key所對(duì)應(yīng)的value值設(shè)置到相應(yīng)img標(biāo)簽的src屬性中，以便進(jìn)行圖片植染。
[0026]第四方面，本發(fā)明實(shí)施例提供一種服務(wù)器，包括:
[0027]接收模塊，用于接收客戶端發(fā)送的Ajax請(qǐng)求；
[0028]響應(yīng)處理模塊，用于對(duì)需要返回給所述客戶端的內(nèi)容進(jìn)行段落劃分，生成包含多個(gè)段落的響應(yīng)內(nèi)容；
[0029]發(fā)送模塊，用于將響應(yīng)內(nèi)容發(fā)送至所述客戶端。
[0030]可選地，在本實(shí)施例的一種實(shí)現(xiàn)方式中，所述響應(yīng)處理模塊具體用于，將需要返回給所述客戶端的內(nèi)容劃分為多個(gè)以分隔符作為結(jié)束的段落，所述分隔符用于標(biāo)識(shí)段落結(jié)束。
[0031]第五方面，本發(fā)明實(shí)施例提供一種頁面加載系統(tǒng)，，包括:
[0032]根據(jù)本發(fā)明第三方面或其實(shí)現(xiàn)方式的頁面加載裝置，和根據(jù)本發(fā)明第四方面或其實(shí)現(xiàn)方式的服務(wù)器。
[0033]采用本發(fā)明，具有以下有益效果:
[0034]在異步請(qǐng)求的處理過程中，通過對(duì)響應(yīng)內(nèi)容的分段提取和加載，實(shí)現(xiàn)邊下載、邊解析、邊展示的技術(shù)效果，有效提高了頁面加載的性能和用戶體驗(yàn)。
【附圖說明】
[0035]圖1是根據(jù)本發(fā)明實(shí)施例的一種頁面加載方法的流程示意圖；
[0036]圖2A是根據(jù)本發(fā)明實(shí)施例的一種頁面加載裝置的方塊示意圖；
[0037]圖2B是圖2A所示實(shí)施例中的分段處理模塊的一種方塊示意圖；
[0038]圖3是根據(jù)本發(fā)明實(shí)施例的一種服務(wù)器的方塊示意圖。
【具體實(shí)施方式】
[0039]以下結(jié)合附圖和【具體實(shí)施方式】對(duì)本發(fā)明的各個(gè)方面進(jìn)行詳細(xì)闡述。其中，眾所周知的模塊、單元及其相互之間的連接、鏈接、通信或操作沒有示出或未作詳細(xì)說明。并且，所描述的特征、架構(gòu)或功能可在一個(gè)或一個(gè)以上實(shí)施方式中以任何方式組合。本領(lǐng)域技術(shù)人員應(yīng)當(dāng)理解，下述的各種實(shí)施方式只用于舉例說明，而非用于限制本發(fā)明的保護(hù)范圍。還可以容易理解，本文所述和附圖所示的各實(shí)施方式中的模塊或單元或步驟可以按各種不同配置進(jìn)行組合和設(shè)計(jì)。
[0040]圖1是根據(jù)本發(fā)明實(shí)施例的一種頁面加載方法的流程示意圖，參照?qǐng)D1，所述方法包括:
[0041]100:客戶端向服務(wù)器發(fā)送Ajax請(qǐng)求。
[0042]更具體而言，客戶端(例如，瀏覽器)通過Javascript創(chuàng)建Xml Http Request對(duì)象(下面簡(jiǎn)寫為req)，并通過Xml Http Request對(duì)象發(fā)送Ajax請(qǐng)求。
[0043]102:服務(wù)器接收Ajax請(qǐng)求，并對(duì)需要返回給客戶端的內(nèi)容進(jìn)行段落劃分，生成包含多個(gè)段落的響應(yīng)內(nèi)容。
[0044]在本實(shí)施例中，服務(wù)器可以采用現(xiàn)有技術(shù)獲取需要返回給客戶端的內(nèi)容，本發(fā)明對(duì)此不做限制。例如，服務(wù)器可以根據(jù)Ajax請(qǐng)求完成獲取所請(qǐng)求的內(nèi)容、獲取所請(qǐng)求的圖片并轉(zhuǎn)碼為Base64文本格式、渲染頁面等處理過程。
[0045]可選地，在本實(shí)施例的一種實(shí)現(xiàn)方式中，優(yōu)選地，為了提高客戶端的解析和加載效果，服務(wù)器劃分的段落盡量有利于客戶端在接收到一個(gè)段落后進(jìn)行解析和加載工作而不用等待下一個(gè)段落，例如在需要傳輸包含多張圖片的base64數(shù)據(jù)包時(shí)，可以以I張圖片或者多張圖片作為一個(gè)段落，這樣客戶端在接收到這部分?jǐn)?shù)據(jù)時(shí)就可以開始處理這個(gè)分段中的圖片，而不用等待其它段落的圖片完成傳輸。也就是說，如果同一張圖片的內(nèi)容劃分在兩個(gè)不同的段落里，客戶端需要接收到這兩個(gè)段落才能完成對(duì)這一張圖片的加載處理。
[0046]可選地，在本實(shí)施例的一種實(shí)現(xiàn)方式中，服務(wù)器將需要返回給客戶端的內(nèi)容劃分為多個(gè)以分隔符作為結(jié)束的段落，所述分隔符用于標(biāo)識(shí)段落結(jié)束。換個(gè)角度而言，相鄰兩個(gè)段落通過分隔符拼接。
[0047]在本實(shí)現(xiàn)方式中，分隔符由服務(wù)器與客戶端共同約定，以便客戶端根據(jù)分隔符確認(rèn)段落結(jié)束。分隔符的一種示例為:〈/*3*/>。當(dāng)然，本領(lǐng)域技術(shù)人員可以靈