【文章內(nèi)容簡(jiǎn)介】 、郵件交流等等，極大地豐富了教師與學(xué)生之間的交流方式，極大的縮短了教師與學(xué)生之間的距離。 本課題研究的難點(diǎn)在于如何實(shí)現(xiàn)頁(yè)面無(wú)刷新的相應(yīng)，并且盡可能提高性能。 在實(shí)現(xiàn)頁(yè)面無(wú)刷新方面，我們準(zhǔn)備采用現(xiàn)在極為流行的 AJAX 技術(shù)。而在性能方面，我們采用 VS2020 與 SQL Server 2020 的內(nèi)置優(yōu)化功能，另外注意架構(gòu)以及代碼優(yōu)化方面的細(xì)節(jié)，力求使性能提高。 我們知道， 應(yīng)用程序事實(shí)是在服務(wù)器上運(yùn)行的，用戶的請(qǐng)求要不斷地送往遠(yuǎn)程的服務(wù)器，服務(wù)器執(zhí)行完本地的程序后把重新裝載頁(yè)面再發(fā)送客戶端。所以就出現(xiàn)了不斷刷新的問(wèn)題，頁(yè)面不斷閃爍。用戶不厭其煩，運(yùn)行效率也大大降低，服務(wù)器的負(fù)荷加重。事實(shí)，客戶端的請(qǐng)求在某一時(shí)刻只是通過(guò)向 Web 服務(wù)器提交新的請(qǐng)求來(lái)檢索對(duì)用戶輸入所做的響應(yīng)。這種情況下，開(kāi)發(fā)人員可以使用 JavaScript 在客戶端上加載所有響應(yīng)，從而提供更好的用戶體驗(yàn)。遺憾的是，在很多情況下，不必將所有響應(yīng)都返回或加載到 JavaScript 要更好，只返回所要的結(jié)果， 執(zhí)行過(guò)程仍然在服務(wù)器上運(yùn)行。 AJAX 提供了一種新的中間選擇，能夠在維持及時(shí)響應(yīng)和靈活性的同時(shí)利用基于服務(wù)器的應(yīng)用程序。 AJAX 依靠服務(wù)器作為中介來(lái)分發(fā)和處理請(qǐng)求。為了完成這項(xiàng)工作， . 封裝類依賴于客戶端的請(qǐng)求對(duì)象，而 XmlHttpRequest 對(duì)象被大部分的瀏覽器支持，因此使用這個(gè)對(duì)象是一個(gè)不錯(cuò)的解決方案。 因此，為了實(shí)現(xiàn)不刷新的頁(yè)面，我們的客戶端頁(yè)面做成靜態(tài)頁(yè)面。靜態(tài)頁(yè)面通過(guò) 調(diào)用 . 類的方法。這是一種最簡(jiǎn)潔又高效的解決方案。 湖南大學(xué)畢業(yè)設(shè)計(jì)（論 文） 第 4頁(yè) AJAX 技術(shù)可以給客戶端提供豐富的客戶體驗(yàn)，而 為您容易的實(shí)現(xiàn)這樣強(qiáng)大的功能提供了可能。靜態(tài)頁(yè)面是不出現(xiàn)刷新問(wèn)題的。我們的靜態(tài)頁(yè)面通過(guò) AJAX 完全可與 結(jié)合起來(lái)。通過(guò) . 進(jìn)行后臺(tái)的管理。前臺(tái)通過(guò) JavaScript 調(diào)用。這樣完美的結(jié)合是解決問(wèn)題的最佳方法。 . 本文 主要工作 本系統(tǒng)基于 Microsoft Visual Studio 2020 進(jìn)行構(gòu)件，為 自由定制角色權(quán)限管理、用戶管理、 教學(xué)資源的管理、 新聞發(fā)布、學(xué)生收發(fā)作業(yè)提供了一個(gè)良好的教學(xué)資源平臺(tái)。本課題要求采用 Ajax 和 JavaScript 技術(shù)完成系統(tǒng)的后臺(tái)即系統(tǒng)管理員和教務(wù)管 理員模塊，另外為了方便用戶的自由定制權(quán)限，打破以往的固定角色權(quán)限限制，開(kāi)發(fā)了一套自由的可以重用的角色權(quán)限管理功能模塊。 具體內(nèi)容如下： Ajax 和 JavaScript 的概述和無(wú)刷新原理的介紹 分別從 Ajax 的組成、 四個(gè)基本原則 、 原理分析、 .NET 采用 Ajax 實(shí)現(xiàn)的方式等各方面介紹 Ajax技術(shù) ；從 JavaScript的優(yōu) 點(diǎn)和 JavaScript可使用的對(duì)象 兩個(gè)方面 介紹了 JavaScript技術(shù) 。 創(chuàng)新的功能 分別介紹了可以自由定制的角色權(quán)限管理模塊和課程細(xì)節(jié)的模塊。 性能的提升 分別從一些典型的使用了 Ajax 或 JavaScript 技術(shù)的代碼來(lái)詳細(xì)的分析。 . 論文 組織 結(jié)構(gòu) 本論文 首先介紹了 該課題的 背景 、研究 現(xiàn)狀 、 發(fā)展趨勢(shì)，研究的重點(diǎn) 和 難點(diǎn)。 第二章節(jié) 先 對(duì) 系統(tǒng) 采用的技術(shù) Ajax 和 JavaScript 做了簡(jiǎn)要的概述， 然后 詳細(xì)地對(duì) Ajax和 JavaScript 實(shí)現(xiàn)無(wú)刷新 的原理進(jìn)行了分析 以及配合 .NET 如何實(shí)現(xiàn) 。 第 三 章介紹了 系統(tǒng)功能設(shè)計(jì)，從設(shè)計(jì)原則、架構(gòu)設(shè)計(jì)、功能設(shè)計(jì)和角色設(shè)計(jì)四個(gè)方面來(lái)進(jìn)行詳細(xì)的描述 。 湖南大學(xué)畢業(yè)設(shè)計(jì)（論 文） 第 5頁(yè) 第 四 章從 開(kāi)發(fā)環(huán)境、框架實(shí)現(xiàn)進(jìn)行了闡述， 并結(jié)合部分 特色模塊和 關(guān)鍵代碼進(jìn)行了分析。 第五章簡(jiǎn)述了系統(tǒng)測(cè)試的情況。 從測(cè)試環(huán) 境、單元測(cè)試、系統(tǒng)和集成測(cè)試、負(fù)載測(cè)試幾個(gè)方面進(jìn)行了說(shuō)明，測(cè)試結(jié)果則分析了最終該系統(tǒng)的功能和性能。 最后對(duì) 整 篇論文進(jìn)行 了 小結(jié)。 湖南大學(xué)畢業(yè)設(shè)計(jì)（論 文） 第 6頁(yè) 2. 技術(shù)原理 . Ajax 和 JavaScript 概述 . Ajax 概述 Ajax（ Asynchronous JavaScript + XML） 用來(lái)描述一組技術(shù)，它使瀏覽器可以為用戶提供更為自然的瀏覽體驗(yàn)。在 Ajax 之前， Web 站點(diǎn)強(qiáng)制用戶進(jìn)入提交 /等待 /重新顯示范例，用戶的動(dòng)作總是與服務(wù)器的“思考時(shí)間”同步。 Ajax 提供與服務(wù)器異步通信的能力，從而使用戶從請(qǐng)求 /響應(yīng)的循環(huán)中解脫出來(lái)。借助 于 Ajax，可以在用戶單擊按鈕時(shí)，使用JavaScript 和 DHTML 立即更新 UI，并向服務(wù)器發(fā)出異步請(qǐng)求，以執(zhí)行更新或查詢數(shù)據(jù)庫(kù)。當(dāng)請(qǐng)求返回時(shí)，就可以使用 JavaScript 和 CSS 來(lái)相應(yīng)地更新 UI，而不是刷新整個(gè)頁(yè)面。最重要的是，用戶甚至不知道瀏覽器正在與服務(wù)器通信： Web 站點(diǎn)看起來(lái)是即時(shí)響應(yīng)的。 Ajax 是使用客戶端腳本與 web 服務(wù)器交換數(shù)據(jù)的 web 應(yīng)用開(kāi)發(fā)方法。這樣， web 頁(yè)面不用打斷交互流程進(jìn)行重新加裁，就可以動(dòng)態(tài)地更新。使用 Ajax，用戶可以創(chuàng)建接近本地桌面應(yīng)用的直接、高可用、更豐富、更動(dòng)態(tài)的 web 用戶界面。 [1] . JavaScript 概述 JavaScript 是一門由瀏覽器解釋的腳本語(yǔ)言。它通過(guò)在客戶端而不是服務(wù)器端處理某些交互，比如表單驗(yàn)證，創(chuàng)建新菜單來(lái)給網(wǎng)站增添可用性。傳統(tǒng)的網(wǎng)頁(yè)交互是，客戶端的一舉一動(dòng)都必須經(jīng)過(guò)服務(wù)器端的出來(lái)才能反饋回來(lái)，漫長(zhǎng)的等待會(huì)讓用戶崩潰。而JavaScript 可以在客戶端代替服務(wù)器端做某些事情（最明顯的，表單驗(yàn)證），從而提高用戶體驗(yàn)。 [4] JavaScript 使網(wǎng)頁(yè)增加互動(dòng)性。 JavaScript 使有規(guī)律地重復(fù)的 HTML 文段簡(jiǎn)化，減少下載時(shí)間。 JavaScript 能及時(shí)響應(yīng)用戶的操作，對(duì)提交表單做即時(shí)的檢查，無(wú)需浪費(fèi)時(shí)間交由 CGI 驗(yàn)證。 [5] JavaScript 是一種基于對(duì)象和事件驅(qū)動(dòng)并具有安全性能的腳本語(yǔ)言，有了JavaScript，可使網(wǎng)頁(yè)變得生動(dòng)。使用它的目的是與 HTML 超文本標(biāo)識(shí)語(yǔ)言、 Java 腳本語(yǔ)湖南大學(xué)畢業(yè)設(shè)計(jì)（論 文） 第 7頁(yè) 言一起實(shí)現(xiàn)在一個(gè)網(wǎng)頁(yè)中鏈接多個(gè)對(duì)象，與網(wǎng)絡(luò)客戶交互作用，從而可以開(kāi)發(fā)客戶端的應(yīng)用程序。它是通過(guò)嵌入或調(diào)入在標(biāo)準(zhǔn)的 HTML 語(yǔ)言中實(shí)現(xiàn)的。 [7] . Ajax 原理 . Ajax 的組成 Ajax 的關(guān)鍵元素 ： JavaScript： JavaScript 是通用的 腳本語(yǔ)言，用來(lái)嵌入在某種應(yīng)用之中。 Web 瀏覽器中嵌入的 JavaScript 解釋器允許通過(guò)程序與瀏覽器的很多內(nèi)建功能進(jìn)行交互。 Ajax 應(yīng)用程序是使用 JavaScript 編寫(xiě)的。 CSS（層疊樣式表） ： CSS 為 Web 頁(yè)面元素提供了一種可重用的可視化樣式的定義方法。它提供了簡(jiǎn)單而又強(qiáng)大的方法，以一致的方式定義和使用可視化樣式。在 Ajax 應(yīng)用中，用戶界面的樣式可以通過(guò) CSS 獨(dú)立修改。 DOM（文檔對(duì)象模型） ： DOM 以一組可以使用 JavaScript 操作的可編程對(duì)象展現(xiàn)出 Web 頁(yè)面的結(jié)構(gòu)。通過(guò)使用腳本修改 DOM， Ajax 應(yīng)用程序可以在運(yùn)行時(shí)改變用戶界面，或者高效地重繪頁(yè)面中的某個(gè)部分。 XMLHttpRequest 對(duì)象 : XMLHttpRequest 對(duì)象允許 Web 程序員從 Web 服務(wù)器以后臺(tái)活動(dòng)的方式獲取數(shù)據(jù)。數(shù)據(jù)格式通常是 XML，但是也可以很好地支持任何基于文本的數(shù)據(jù)格式。盡管 XMLHttpRequest 對(duì)于完成這件工作來(lái)說(shuō)是最為靈活和通用的工具，但還有其他方法也可以從服務(wù)器獲取數(shù)據(jù)。 [1] . Ajax 四個(gè)基本原則 我們用到的很多框架中都已經(jīng)固化了基于頁(yè)面的傳統(tǒng)應(yīng)用模式，同時(shí)這些應(yīng)用模式也已深深進(jìn)入了我們的 思想中。我們花幾分鐘來(lái)揭示出哪些核心概念是我們需要重新思考的，以及如何從 Ajax 的角度來(lái)重新思考。 瀏覽器中的是應(yīng)用而不是內(nèi)容 Ajax 應(yīng)用的生命周期。用戶登錄后，服務(wù)器交付一個(gè)客戶端應(yīng)用給瀏覽器。這個(gè)應(yīng)用可以獨(dú)立處理很多的用戶交互，對(duì)于自己無(wú)法獨(dú)立處理的交互，應(yīng)用會(huì)以后臺(tái)方式發(fā)送請(qǐng)求給服務(wù)器，而不會(huì)打斷用戶的操作流程。 湖南大學(xué)畢業(yè)設(shè)計(jì)（論 文） 第 8頁(yè) 服務(wù)器交付的是數(shù)據(jù)而不是內(nèi)容 在 Ajax 應(yīng)用中，網(wǎng)絡(luò)的通信流量主要是集中在加載的前期，無(wú)論如何，用戶登錄后是需要一次性地將一個(gè)大而復(fù)雜的客戶端交付給瀏覽器。但是在此以后，與服務(wù)器的通信 則會(huì)有效率得多。對(duì)于瞬時(shí)應(yīng)用來(lái)說(shuō)，積累起來(lái)的通信流量要比以前的基于頁(yè)面的 Web 應(yīng)用少很多。與此同時(shí)，平均的交互次數(shù)則有所增加。整體而言， Ajax 應(yīng)用的帶寬消耗要比傳統(tǒng)的 Web 應(yīng)用低一些。 用戶交互變得流暢而連續(xù) Ajax 的一個(gè)好處是，我們可以對(duì)豐富的用戶操作事件進(jìn)行捕獲。類似于拖拽這樣的復(fù)雜 UI 概念也不再是遙不可及的。這使得 Web 應(yīng)用的 UI 體驗(yàn)可以全面提升到近乎于桌面應(yīng)用的 UI 組件相媲美的高度。從可用性的角度來(lái)看，這很重要，不僅僅是因?yàn)樗尫帕宋覀兊南胂罅?，而且也是因?yàn)樗梢詫⒂脩艚换ズ头?wù)器端的請(qǐng)求更 加充分地混合起來(lái) 。 有紀(jì)律的嚴(yán)肅編程 為 Ajax 應(yīng)用編程的情況則完全不同。提交給用戶運(yùn)行的應(yīng)用將會(huì)一直運(yùn)行到用戶關(guān)閉程序?yàn)橹?。不崩潰，不變慢，也沒(méi)有內(nèi)存泄露之類的毛病。如果我們的產(chǎn)品定位于獨(dú)占式應(yīng)用的市場(chǎng)，這還意味著很多小時(shí)的密集使用。要達(dá)到這個(gè)目標(biāo)，當(dāng)然需要高性能的、可維護(hù)的代碼，這與服務(wù)器端應(yīng)用的要求是一致的。 [1] . Ajax 原理分析 Ajax 的核心是 JavaScript 對(duì)象 XmlHttpRequest。該對(duì)象在 Inter Explorer 5 中首次引入，它是一種支持異步請(qǐng)求的技術(shù)。簡(jiǎn)而言之， XmlHttpRequest 使您可以使用 JavaScript向服務(wù)器提出請(qǐng)求并處理響應(yīng)，而不阻塞用戶。 Ajax 的工作原理相當(dāng)于在用戶和服務(wù)器之間加了 — 個(gè)中間層，使用戶操作與服務(wù)器響應(yīng)異步化。這樣把以前的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利于客戶端閑置的處理能力來(lái)處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，從而達(dá)到節(jié)約 ISP 的空間及帶寬租用成本的目的。[3] . .NET 采用 AJAX 實(shí)現(xiàn) 無(wú)刷新 我們知道， 應(yīng)用程序事實(shí)是在服務(wù)器上運(yùn)行的，用戶的請(qǐng)求要不斷地送往遠(yuǎn)湖南大學(xué)畢業(yè)設(shè)計(jì)（論 文） 第 9頁(yè) 程的服務(wù)器，服務(wù)器執(zhí)行完本地的程序后把重新裝載頁(yè)面再 發(fā)送客戶端。所以就出現(xiàn)了不斷刷新的問(wèn)題，頁(yè)面不斷閃爍。用戶不厭其煩，運(yùn)行效率也大大 4 降低，服務(wù)器的負(fù)荷加重。事實(shí)，客戶端的請(qǐng)求在某一時(shí)刻只是通過(guò)向 Web 服務(wù)器提交新的請(qǐng)求來(lái)檢索對(duì)用戶輸入所做的響應(yīng)。這種情況下，開(kāi)發(fā)人員可以使用 JavaScript 在客戶端上加載所有響應(yīng)，從而提供更好的用戶體驗(yàn)。遺憾的是，在很多情況下，不必將所有響應(yīng)都返回或加載到 JavaScript 要更好，只返回所要的結(jié)果，執(zhí)行過(guò)程仍然在服務(wù)器上運(yùn)行。 AJAX 提供了一種新的中間選擇，能夠在維持及時(shí)響應(yīng)和靈活性的同時(shí)利用基于服務(wù)器 的應(yīng)用程序。 AJAX 依靠服務(wù)器作為中介來(lái)分發(fā)和處理請(qǐng)求。為了完成這項(xiàng)工作， . 封裝類依賴于客戶端的請(qǐng)求對(duì)象，而 XMLHttpRequest 對(duì)象被大部分的瀏覽器支持，因此使用這個(gè)對(duì)象是一個(gè)不錯(cuò)的解決方案。 因此，為了實(shí)現(xiàn)不刷新的頁(yè)面，我們的客戶端頁(yè)面做成靜態(tài)頁(yè)面。靜態(tài)頁(yè)面通過(guò) 調(diào)用 . 類的方法。這是一種最簡(jiǎn)潔又高效的解決方案。 . JAVASCRIPT 原理 . JavaScript 優(yōu)點(diǎn) JavaScript 是一種腳本編寫(xiě)