jQuery网页特效设计基础教程（慕课版）（第2版）-教案 第7章 Ajax在jQuery中的应用.docx
PAGE1
PAGE
第7章Ajax在jQuery中的应用
课程名称
jQuery网页特效设计基础教程
项目名称
Ajax在jQuery中的应用
任务名称
Ajax在jQuery中的应用
课时
4
项目性质
□演示性□验证性□设计性√综合性
授课班级
授课日期
授课地点
教学目标
知识目标
1.了解Ajax技术、优点、缺点。
2.了解安装Web运行环境。
3.了解通过JavaScript应用Ajax技术。
4.掌握jQuery中的Ajax应用。
5.掌握Ajax的全局事件的使用。
能力目标
1.能够熟练使用jQuery中的Ajax应用能力。
2.能够熟练使用jQuery中的Ajax全局事件能力。
素质目标
1.培养学生解决问题的能力。
2.培养学生快速学习的能力。
教学内容
1.任务描述
2.任务展示与实现
（1）对Ajax应用进行操作
（2）在页面中Ajax全局事件进行操作
（2）学生动手操作
3.教师讲解本任务涉及的知识点
4.任务小结
教学重点
1.Ajax应用的操作方法
2.Ajax全局事件的操作方法
3.编写jQuery代码
教学难点
1.使用jQuery操作Ajax应用
教学准备
1.装有jQuery的电脑
2.教学课件PPT
3.教材：《jQuery网页特效设计基础教程（慕课版）》刘刚人民邮电出版社
作业设计
1．使用Ajax实现留言板即时更新
教学过程
教学
环节
教学内容与过程
（教学内容、教学方法、组织形式、教学手段）
课前组织
做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。
课程
说明
【课前说明】
本章主要介绍了Ajax的概念、Ajax优缺点、Ajax的安装、Ajax的应用，Ajax的全局事件等知识点。其中重点介绍了Ajax的应用，包括load()方法、$.get()方法、$.post()方法、$.getScript()方法、$.getJSON()方法等。
【目的】
使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目标。
课程
内容
描述
一、Ajax概述
Ajax是AsynchronousJavaScriptandXML的缩写，意思是异步的JavaScript和XML。Ajax并不是一门新的语言或技术，它是JavaScript、XML、CSS、DOM等多种已有技术的组合，可以实现客户端的异步请求操作，从而实现在不需要刷新页面的情况下与服务器进行通信，减少了用户的等待时间，减轻了服务器和带宽的负担，提供更好的服务响应。
二、使用jQuery操作DOM中的元素及对象
通过多个案例讲解Ajax应用的操作方法。jQuery的Ajax工具包封装有3个层次，分别如下：
?最底层是Ajax，封装了基础Ajax的一些操作，$.ajax()方法就是最底层的方法。
?第2层是load()、$.get()、$.post()方法。
?第3层是$.getScript()和$.getJSON()方法。
案例：
1.使用load()方法载入页面。
（1）首先创建要载入的文档mofun.html，代码如下：
div
p莫凡魔方科技/p
p莫凡图书/p
pjQuery基础开发教程/p
/div
（2）创建index.html页面，在页面上添加按钮以及id为“loadhtml”的div元素。代码如下：
inputtype=buttonid=btnvalue=载入页面/
divid=loadhtml/div
（3）引入jQuery库并且在下方编写jQuery代码，使用load()方法载入之前创建的mr.html页面。代码如下：
scripttype=text/javascriptsrc=../js/jquery-3.6.4.min.js/script
scripttype=text/javascript
$(document).ready(function(){
$(#btn).click(function(){
$(#loadhtml).load(mofun.html);
})
})
/script
课堂
实训
综合实例：使用Ajax实现留言板即时更新
在实际应用中，我们经常会使用到留言板功能，本实例实现留言板即时更新功能，具体要求如下。
（1）创建留言页面，使用户留言可以异步提交。
（2）将用户提交的留言即时显示出来。
总结
评价
通过学习，学生能够掌握Ajax技术的基本概念、安装方式、jQuery中的Ajax应用、Ajax的全局事件方法。
本节课主要运用