jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)教程電子教案 第7單元 AJAX 在jQuery 中的應(yīng)用

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