jQuery在AJAX技術框架中頁面加載的應用分析

王艷梅

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

關鍵詞：? jQuery;AJAX技術框架;頁面加載;應用分析

中圖分類號：TP311? ? 文獻標識碼：A

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

引言

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

1 jQuery與AJAX技術框架的概述

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

AJAX技術框架是開放式的，它基于如下幾種開放式的標準：

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

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

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

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

2 使用Ajax技術開發(fā)的Web應用存在的問題

2.1 加載速度較慢

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

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

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

2.3 技術集成復雜

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

2.4 基于AJAX應用的Debug、測試和維護成本增加

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

3 jQuery在AJAX技術框架中頁面加載的應用分析

3.1強化需求導向分析

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

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

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

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

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

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

3.3 提高頁面安全性

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

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

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

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

1）用戶管理

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

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

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

3）網(wǎng)頁管理

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

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

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

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

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

$.ajax（{

url："請求地址"，

type："請求方式"，

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

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

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

error：“服務器出錯對應的回調(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)絡帶寬狀況下，Web基礎上jQuery和AJAX技術結合的頁面加載速度比傳統(tǒng)Web技術的頁面加載速度提升25%-30%。

4 總結

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

參考文獻：

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

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

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

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

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