jQuery在AJAX技術(shù)框架中頁面加載的應(yīng)用分析

王艷梅

摘要：隨著互聯(lián)網(wǎng)技術(shù)向各行各業(yè)不斷延伸，互聯(lián)網(wǎng)應(yīng)用的數(shù)量也與日俱增。根據(jù)專業(yè)機構(gòu)的統(tǒng)計，頁面加載直接影響著用戶的體驗和服務(wù)質(zhì)量，因此如何提高頁面加載速度已經(jīng)成為當(dāng)下計算機領(lǐng)域發(fā)展的重要問題。本文主要論述jQuery在AJAX技術(shù)框架中頁面加載的應(yīng)用分析，綜合利用jQuery，明確頁面加載的各項指標(biāo)，持續(xù)進(jìn)行檢測分析和優(yōu)化，建立一個高效易擴展的AJAX技術(shù)框架，確保各個應(yīng)用模塊數(shù)據(jù)的準(zhǔn)確性和穩(wěn)定性。

關(guān)鍵詞：? jQuery;AJAX技術(shù)框架;頁面加載;應(yīng)用分析

中圖分類號：TP311? ? 文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2020）36-0210-03

引言

隨著互聯(lián)網(wǎng)行業(yè)快速發(fā)展，各行各業(yè)已經(jīng)步入了信息化時代，用戶對互聯(lián)網(wǎng)應(yīng)用的使用體驗要求不斷提高，傳統(tǒng)的Web應(yīng)用模型響應(yīng)能力不足，在長期作業(yè)過程中，需要處理大量的基礎(chǔ)信息，在每次進(jìn)行請求時都需要客戶端手動更新，浪費大量時間進(jìn)行數(shù)據(jù)調(diào)取，客戶體驗不佳。利用AJAX技術(shù)可以充分挖掘Web瀏覽器的潛能，為用戶提供交互式的體驗，有效提高瀏覽器和服務(wù)端的信息傳遞效率;結(jié)合jQuery提供的簡便的JavaScript設(shè)計模式、短小清晰的多功能接口、高效靈活的CSS選擇器、便捷的插件擴展機制、良好的瀏覽器版本兼容性，可以高效地開發(fā)出安全、用戶體驗良好的Web應(yīng)用。通過AJAX技術(shù)框架對傳統(tǒng)基于Web應(yīng)用模型的互聯(lián)網(wǎng)應(yīng)用進(jìn)行改造是提升網(wǎng)站響應(yīng)速度，提高用戶體驗的有效途徑。

1 jQuery與AJAX技術(shù)框架的概述

AJAX是Asynchronous JavaScript and XML的簡稱，是一種用于創(chuàng)建交互性更強的應(yīng)用程序的技術(shù)，同時它能夠獨立于Web服務(wù)器，給用戶帶來更加極致的瀏覽速度。廣義上看AJAX技術(shù)可以看作服務(wù)器和客戶端之間的一個過濾層（參見圖1中的AJAX Engine），通過對用戶操作進(jìn)行分析，對服務(wù)器進(jìn)行異步化處理，有效減少網(wǎng)頁對于服務(wù)器重復(fù)信息的請求，達(dá)到快速響應(yīng)的目的。AJAX技術(shù)通過異步方式完成客戶端和服務(wù)器之間的數(shù)據(jù)交換，實現(xiàn)Web服務(wù)的有效性和獨立性，在不重復(fù)加載整個頁面的情況下，增強頁面局部響應(yīng)功能，有效提高頁面加載速度，實現(xiàn)信息收集處理，為用戶提供最佳的在線體驗。

AJAX技術(shù)框架是開放式的，它基于如下幾種開放式的標(biāo)準(zhǔn)：

1）瀏覽器端的展現(xiàn)使用了HTML和CSS（Cascading Style Sheets）;

2）數(shù)據(jù)采用XML格式存儲并從服務(wù)端獲取;

3）瀏覽器端的數(shù)據(jù)請求通過XMLHttpRequest對象封裝。

jQuery本質(zhì)來講是一個JavaScript庫，它可以同時兼容各種市場上主流的瀏覽器，維持用戶的html處于獨立狀態(tài)。使用jQuery可以更加方便地處理documentaries和events，在操作過程中兼容性較強，表達(dá)較為詳細(xì)。此外，JavaScript庫內(nèi)含有大量的成熟插件，可以直接調(diào)用，設(shè)計人員在設(shè)計分析過程中，不需要在網(wǎng)頁中再次插入，只需通過定義id，就可以實現(xiàn)客戶端的快速響應(yīng)，有效提高數(shù)據(jù)流轉(zhuǎn)速度。jQuery強大的選擇器、可靠的事件處理機制、完善的AJAX交互接口、豐富的插件支持使其廣泛應(yīng)用于Web客戶端的開發(fā)。它不與單一的瀏覽器進(jìn)行固定綁定，因此其兼容性較強。將jQuery和AJAX兩種方法相結(jié)合能夠快速調(diào)取函數(shù)，使得原來復(fù)雜的函數(shù)處理工作簡單化，同時也可以明確選擇函數(shù)中的不同要素，創(chuàng)建注冊表，對于用戶輸入的數(shù)據(jù)進(jìn)行代碼分析，完成后續(xù)函數(shù)處理的一系列步驟。

2 使用Ajax技術(shù)開發(fā)的Web應(yīng)用存在的問題

2.1 加載速度較慢

頁面加載核心是響應(yīng)速度，它直接影響著用戶體驗，用戶的耐性會在緩慢地加載過程中消耗殆盡，從而導(dǎo)致用戶的流失。根據(jù)相關(guān)調(diào)查機構(gòu)的數(shù)據(jù)，大部分用戶在等待頁面響應(yīng)過程中會浪費三秒時間，在此過程中就會流失20%的用戶，如果延遲達(dá)到10秒，大約40%的用戶會放棄瀏覽。

2.2 網(wǎng)站框架冗雜

在中國，信息化的普及稍晚，AJAX技術(shù)框架模式不夠完善;同時網(wǎng)絡(luò)環(huán)境并不安全，內(nèi)部存在著許多漏洞，網(wǎng)絡(luò)系統(tǒng)運行狀態(tài)不穩(wěn)。根據(jù)對網(wǎng)站結(jié)構(gòu)的調(diào)查分析，發(fā)現(xiàn)一般的網(wǎng)站都是由多層頁面進(jìn)行組合式連接，大體差異只是數(shù)據(jù)顯示內(nèi)容和超鏈接生成格式不同，由于設(shè)計內(nèi)容較為復(fù)雜，客戶端的響應(yīng)速度存在一定的延遲，給后期的代碼維護(hù)帶來了一定的挑戰(zhàn)。

2.3 技術(shù)集成復(fù)雜

大部分的網(wǎng)站是基于B/S的模式，不同網(wǎng)站的信息承載量不同，瀏覽器種類繁多，在頁面加載過程中實現(xiàn)原理也不同，存在著較大的區(qū)別，技術(shù)人員難以構(gòu)建統(tǒng)一的AJAX技術(shù)框架。此外，構(gòu)建平臺要同時滿足多個用戶的不同需要，數(shù)據(jù)之間融合困難。

2.4 基于AJAX應(yīng)用的Debug、測試和維護(hù)成本增加

目前基于AJAX的Web 應(yīng)用缺乏行之有效的設(shè)計模式和最佳實踐設(shè)計指引，導(dǎo)致在多個互聯(lián)網(wǎng)應(yīng)用設(shè)計過程中無法有效地繼承之前沉淀的經(jīng)驗和代碼框架。同時，普遍存在模塊化程度低的問題。上述問題導(dǎo)致了基于AJAX應(yīng)用的Debug、測試和維護(hù)成本不斷增加。

3 jQuery在AJAX技術(shù)框架中頁面加載的應(yīng)用分析

3.1強化需求導(dǎo)向分析

頁面加載是指用戶通過瀏覽器發(fā)出頁面請求，后臺根據(jù)用戶請求進(jìn)行數(shù)據(jù)的查詢、分析、處理后組裝響應(yīng)報文，瀏覽器解析響應(yīng)報文、渲染并完整地展現(xiàn)新頁面的過程。設(shè)計人員在設(shè)計AJAX技術(shù)框架時，要明確域名查找、請求連接、文檔接收、文檔渲染等一系列步驟，并且引入高效的數(shù)據(jù)監(jiān)測工具，對頁面加載速度、頁面穩(wěn)定性等指標(biāo)進(jìn)行有效監(jiān)控，提高用戶操作的便利性。AJAX技術(shù)框架通過信息存儲和查看模塊設(shè)計，強化插件響應(yīng)，以組框的方式完成信息網(wǎng)格分割，提高信息傳遞效率，強化對網(wǎng)頁信息的調(diào)度管理。

要利用jQuery腳本語言，提高AJAX技術(shù)框架的故障導(dǎo)向性，根據(jù)系統(tǒng)顯示出來的特征進(jìn)行前期的分類治理，形成不同維度的故障標(biāo)簽，制定有效的自動化策略來應(yīng)對故障治理目標(biāo)。充分利用AJAX技術(shù)框架特點，增強故障預(yù)測能力，整合AJAX技術(shù)框架內(nèi)的信息，避免重復(fù)性的AJAX技術(shù)框架建設(shè)，減少AJAX技術(shù)框架的成本投入。

3.2 提高AJAX技術(shù)框架的數(shù)據(jù)耦合性

在開發(fā)腳本信息時，應(yīng)該有效減少網(wǎng)站中的冗雜子目錄，通過指定的動態(tài)指引對網(wǎng)站進(jìn)行節(jié)點控制，實現(xiàn)數(shù)據(jù)和內(nèi)容的有效分離。綜合壓縮手段和格式轉(zhuǎn)換，提高網(wǎng)站自身的承載能力，為后續(xù)的開發(fā)利用提供模板支持。以拓?fù)涫降倪B接模式，持續(xù)整合AJAX技術(shù)框架的優(yōu)勢，提高信息的耦合性，形成更加高效的信息處理體系。利用數(shù)據(jù)傳輸限制訪問權(quán)限，保證用戶數(shù)據(jù)的可靠性。利用信息特定傳達(dá)方式，保證AJAX技術(shù)框架數(shù)據(jù)虛擬化后依然能夠穩(wěn)定工作。

例如，設(shè)計人員具體設(shè)計主頁和詳細(xì)頁時，需要充分體現(xiàn)網(wǎng)站的多樣化，保證AJAX技術(shù)框架網(wǎng)站具有一定的穩(wěn)定性，減少后續(xù)維護(hù)開發(fā)的投入，降低開發(fā)成本，為后期開發(fā)網(wǎng)站提供相應(yīng)的模板，提高應(yīng)用框架的復(fù)用性和可移植性。在網(wǎng)頁設(shè)計過程中，采取創(chuàng)建動畫、處理事件等命令性語言，使得AJAX技術(shù)框架變得更加簡潔，在框架底層創(chuàng)建插件，實現(xiàn)交互調(diào)用的效果。在更新網(wǎng)站主頁節(jié)點時，要充分考慮到網(wǎng)絡(luò)流量，通過合理控制目錄加載的過程提升用戶體驗。在頁面加載時首先要顯示出主目錄，對其進(jìn)行快速調(diào)用;其次加載相應(yīng)的子目錄信息，并合理控制目錄大小，避免加載時間過長。在設(shè)計時需要考慮保證AJAX技術(shù)框架能夠同時兼容DOC、PPT和Excel等綜合類型的文件，也可以將mp4等視頻格式換算成FLV快速壓縮文件，降低對客戶端網(wǎng)絡(luò)寬帶的要求，增加網(wǎng)絡(luò)系統(tǒng)的承載量。

總而言之，在網(wǎng)絡(luò)應(yīng)用設(shè)計過程中，需要充分考慮用戶體驗，通過優(yōu)化網(wǎng)頁加載過程，利用數(shù)據(jù)壓縮技術(shù)和數(shù)據(jù)兼容技術(shù)，實現(xiàn)用戶體驗的最優(yōu)化。

3.3 提高頁面安全性

jQuery開發(fā)過程中具有一定的開放性，因此在AJAX技術(shù)框架設(shè)計過程中也應(yīng)該綜合利用多種加密手段，提高網(wǎng)站內(nèi)部的安全性。在登陸、密碼管理、個人信息管理、支付等關(guān)鍵環(huán)節(jié)，需要綜合利用多種身份認(rèn)證方法，實現(xiàn)對于來訪人員的信息掃描和安全驗證，確保用戶本人在可信環(huán)境安全操作。

例如，在提高頁面加載速度的同時，也應(yīng)該強化AES的加密流程，保證用戶的個人信息;可以綜合利用字節(jié)替代、行列混合等行之有效的技術(shù)，實現(xiàn)AES的加密解密流程。在解密過程中，綜合應(yīng)用逆字節(jié)替代，逆行位移等多種方法，實現(xiàn)AES的動態(tài)管理。在當(dāng)前的互聯(lián)網(wǎng)生態(tài)環(huán)境中，黑客猖獗，網(wǎng)絡(luò)攻擊、用戶數(shù)據(jù)泄露等惡性安全事件層出不窮，我們需要充分認(rèn)識到數(shù)據(jù)安全和身份認(rèn)證的重要性，利用AJAX技術(shù)框架提升頁面的安全性。

3.4 統(tǒng)籌AJAX技術(shù)框架多個層級

在AJAX技術(shù)框架構(gòu)建頁面過程中，應(yīng)該從四個方面進(jìn)行開展，下面將主要論述用戶管理層、數(shù)據(jù)采集層、網(wǎng)頁管理層、數(shù)據(jù)分析層。

1）用戶管理

用戶管理，顧名思義是對用戶在互聯(lián)網(wǎng)應(yīng)用中完整的生命周期的服務(wù)和管理，它面向的主體是用戶，包含了個人信息管理、密碼設(shè)置和找回、信息編輯、登錄注冊、注銷等功能。用戶管理層是實現(xiàn)Web頁面，加載監(jiān)控平臺的基本組件，它集角色、權(quán)限、管理為一體，能夠為用戶提供多面性的數(shù)據(jù)服務(wù)。

2）數(shù)據(jù)采集

數(shù)據(jù)采集作為整個構(gòu)架中的支撐層，它包含了采集腳本、數(shù)據(jù)傳輸、數(shù)據(jù)儲存、數(shù)據(jù)驗證等一系列功能，是頁面加載的數(shù)據(jù)來源。在數(shù)據(jù)采集過程中要首先對于數(shù)據(jù)進(jìn)行功能性獲取，快速排除無效信息，將采集的腳本信息傳回監(jiān)控平臺，并對于采集的信息進(jìn)行分類和持續(xù)性管理。

3）網(wǎng)頁管理

網(wǎng)頁管理是頁面加載過程中的中心環(huán)節(jié)，它主要利用jQuery語言對頁面內(nèi)容進(jìn)行添加、刪改、修改、列表、查詢等。網(wǎng)頁管理高于用戶管理，網(wǎng)頁管理可以通過改寫底層語言，滿足用戶的多重加載需要。設(shè)計人員在網(wǎng)頁管理過程中，可以對管理流程進(jìn)行定義，匹配相應(yīng)的管理方案，達(dá)到業(yè)務(wù)流程重組的目的。

4）數(shù)據(jù)分析

數(shù)據(jù)分析功能主要是對AJAX技術(shù)框架中的數(shù)據(jù)進(jìn)行多維度分析和參數(shù)計算，并通過迭代管理實現(xiàn)數(shù)據(jù)分析的機制。設(shè)計人員可以通過前期jQuery腳本運行，明確網(wǎng)頁內(nèi)部的統(tǒng)計區(qū)間、統(tǒng)計量和統(tǒng)計間隔，實現(xiàn)對AJAX技術(shù)框架數(shù)據(jù)的多維度分析，清晰反映頁面加載性能。通過數(shù)據(jù)分析層，強調(diào)對頁面歷史數(shù)據(jù)的獲取，快速查詢用戶的真實請求，使用戶更加直觀地了解到頁面加載的趨勢，準(zhǔn)確把握網(wǎng)頁結(jié)構(gòu)設(shè)計中存在的問題，保證數(shù)據(jù)分析結(jié)果更加科學(xué)，更具有實際價值。

3.5 通過jQuery和AJAX初始化加載頁面數(shù)據(jù)

jQuery發(fā)送AJAX請求的語法格式如下：

$.ajax（{

url："請求地址"，

type："請求方式"，

data："請求參數(shù)"，

dataType："服務(wù)器返回數(shù)據(jù)類型"，

success："服務(wù)器處理正常后對應(yīng)的回調(diào)函數(shù)"，

error：“服務(wù)器出錯對應(yīng)的回調(diào)函數(shù)”

}）;

以用戶注冊頁面為例，通過jQuery和AJAX初始化加載頁面數(shù)據(jù)過程如下：

//加載初始化數(shù)據(jù)

function initData（）{

//創(chuàng)建一個AJAX對象

$.ajax（{

type：'GET'，

dataType： "json"，

url："../user/center"，

/*data：{

email：$（"#email"）.val（），

password：$（"#password"）.val（）

}，*/

//AJAX事件成功處理函數(shù)

success：function（res）{

alert（"加載數(shù)據(jù)"）;

if（res.code=="0"）{

console.log（res）;

alert（res.msg）;

var info = res.data;

$（"#name"）.attr（"value"， info.name）;

$（"#email"）.attr（"value"， info.email）;

$（"#password"）.attr（"value"， info.password）;

$（"#phone"）.attr（"value"， info.phone）;

$（"#address"）.attr（"value"， info.address）;

$（"#birthday"）.attr（"value"， info.birthday）;

$（"#picture"）.attr（"src"， info.icon）;

}else{

alert（"用戶信息不合法，或郵箱已被占用"）;

}

}，

//AJAX事件出錯處理函數(shù)

error：function（）{

//$（"#test"）.html（"發(fā)生錯誤："+jqXHR.status）;

alert（"發(fā)生錯誤"）;

}

}）;

}

經(jīng)過注冊功能頁面加載速度數(shù)據(jù)比較，在同等網(wǎng)絡(luò)帶寬狀況下，Web基礎(chǔ)上jQuery和AJAX技術(shù)結(jié)合的頁面加載速度比傳統(tǒng)Web技術(shù)的頁面加載速度提升25%-30%。

4 總結(jié)

綜上所述，本文以jQuery在AJAX技術(shù)框架中頁面加載的分析為例，分析了jQuery和AJAX技術(shù)相結(jié)合的具體應(yīng)用。將jQuery和AJAX技術(shù)相結(jié)合，既能簡化AJAX技術(shù)的開發(fā)程序模式，提高網(wǎng)頁頁面的加載速度，保證程序的簡單性和可讀性;還能使用戶能更方便的處理HTML，方便為網(wǎng)站提供AJAX交互，改變了傳統(tǒng)Web應(yīng)用和開發(fā)模式，提供了全新的用戶上網(wǎng)體驗。

參考文獻(xiàn)：

[1] 梅元昭.基于Jquery課程網(wǎng)站的設(shè)計[J].無線互聯(lián)科技，2019（10）：39-41.

[2] 劉汀.基于jQuery的Web前端組件的應(yīng)用研究[J].無線互聯(lián)科技，2017（21）：106-107.

[3] 彭勝.基于JQuery框架的報表系統(tǒng)數(shù)據(jù)交互應(yīng)用[J].有色金屬加工，2018，47（3）：55-56，66.

[4] 孫仕云.WEB系統(tǒng)前端開發(fā)技術(shù)分析[J].通訊世界，2017（12）：267-268.

【通聯(lián)編輯：聞翔軍】