jQuery網(wǎng)頁特效設計基礎教程電子教案 第7單元 AJAX 在jQuery 中的應用

PAGE1PAGE第7章Ajax在jQuery中的應用課程名稱jQuery網(wǎng)頁特效設計基礎教程項目名稱Ajax在jQuery中的應用任務名稱Ajax在jQuery中的應用課時4項目性質□演示性□驗證性□設計性√綜合性授課班級授課日期授課地點教學目標知識目標1.了解Ajax技術、優(yōu)點、缺點。2.了解安裝Web運行環(huán)境。3.了解通過JavaScript應用Ajax技術。4.掌握jQuery中的Ajax應用。5.掌握Ajax的全局事件的使用。能力目標1.能夠熟練使用jQuery中的Ajax應用能力。2.能夠熟練使用jQuery中的Ajax全局事件能力。素質目標1.培養(yǎng)學生解決問題的能力。2.培養(yǎng)學生快速學習的能力。教學內容1.任務描述2.任務展示與實現(xiàn)（1）對Ajax應用進行操作（2）在頁面中Ajax全局事件進行操作（2）學生動手操作3.教師講解本任務涉及的知識點4.任務小結教學重點1.Ajax應用的操作方法2.Ajax全局事件的操作方法3.編寫jQuery代碼教學難點1.使用jQuery操作Ajax應用教學準備1.裝有jQuery的電腦2.教學課件PPT3.教材：《jQuery網(wǎng)頁特效設計基礎教程》作業(yè)設計1．使用Ajax實現(xiàn)留言板即時更新教學過程教學內容與過程（教學內容、教學方法、組織形式、教學手段）做好課前“5分鐘”教學管理（多媒體、實訓室），做好上課前的各項準備工作（打開電腦、打開課件、打開軟件、打開U盤中的素材位置、打開授課計劃、教案等），吸引學生注意力?！菊n前說明】本章主要介紹了Ajax的概念、Ajax優(yōu)缺點、Ajax的安裝、Ajax的應用，Ajax的全局事件等知識點。其中重點介紹了Ajax的應用，包括load()方法、$.get()方法、$.post()方法、$.getScript()方法、$.getJSON()方法等。【目的】使學生從了解本單元的學習目標、學習重點、考評方式等方面明確學習本單元知識的要求和目標。一、Ajax概述Ajax是AsynchronousJavaScriptandXML的縮寫，意思是異步的JavaScript和XML。Ajax并不是一門新的語言或技術，它是JavaScript、XML、CSS、DOM等多種已有技術的組合，可以實現(xiàn)客戶端的異步請求操作，從而實現(xiàn)在不需要刷新頁面的情況下與服務器進行通信，減少了用戶的等待時間，減輕了服務器和帶寬的負擔，提供更好的服務響應。二、使用jQuery操作DOM中的元素及對象通過多個案例講解Ajax應用的操作方法。jQuery的Ajax工具包封裝有3個層次，分別如下：最底層是Ajax，封裝了基礎Ajax的一些操作，$.ajax()方法就是最底層的方法。第2層是load()、$.get()、$.post()方法。第3層是$.getScript()和$.getJSON()方法。案例：1.使用load()方法載入頁面。（1）首先創(chuàng)建要載入的文檔mofun.html，代碼如下：<div><p>莫凡魔方科技</p><p>莫凡圖書</p><p>jQuery基礎開發(fā)教程</p></div>（2）創(chuàng)建index.html頁面，在頁面上添加按鈕以及id為“l(fā)oadhtml”的<div>元素。代碼如下：<inputtype="button"id="btn"value="載入頁面"/><divid="loadhtml"></div>（3）引入jQuery庫并且在下方編寫jQuery代碼，使用load()方法載入之前創(chuàng)建的mr.html頁面。代碼如下：<scripttype="text/javascript"src="../js/jquery-3.6.4.min.js"></script><scripttype="text/javascript">$(document).ready(function(){$("#btn").click(function(){ $("#loadhtml").load("mofun.html");})})</script>綜合實例：使用Ajax實現(xiàn)留言板即時更新在實際應用中，我們經(jīng)常會使用到留言板功能，本實例實現(xiàn)留言板即時更新功能，具體要求如下。（1）創(chuàng)建留言頁面，使用戶留言可以異步提交。（2）將用戶提交的留言即時顯示出來。通過學習，學生能夠掌握Ajax技術的基本概念、安裝方式、jQuery中的Ajax應用、Ajax的全局事件方法。本節(jié)課主要運用案例教學法，通過對jQuery中的Ajax應用的深入理解，掌握jQuery中的Ajax應用的特點及優(yōu)勢，深入探討jQuery中的Ajax應用的編程方法，通過實例的方法加強對jQuery中的Ajax應用的掌握，達到