《JavaScript程序设计案例教程》教案 第9章 Ajax.docx

PAGE2

PAGE2

PAGE13

PAGE13

课题

Ajax

课时

6课时（270min）

教学目标

知识目标：

（1） 了解什么是Ajax

（2）了解如何搭建Web服务器

（3）掌握使用XMLHttpRequest进行网络请求的方法

（4）掌握常见网络请求方式的应用

（5）理解XML和JSON的区别

（6）掌握常见跨域请求方式

能力目标：

（1）具备搭建Web服务器的能力

（2）具备运用Ajax进行网络请求的能力

（3）具备处理数据交换格式的能力

（4）具备解决跨域问题的能力

素质目标：

（1） 关注国家发展，心系国家建设，增强民族意识

（2）增强版权意识，培养创新精神

教学重难点

教学重点：掌握Node.js搭建Web服务器的方法；熟悉Ajax请求流程及GET、POST请求方式；理解XMLHttpRequest对象属性并能自定义Ajax方法；掌握XML和JSON数据交换格式及应用；学会处理跨域问题的JSONP和CORS方法

教学难点：深入理解Ajax请求中XMLHttpRequest对象众多属性的运用及状态变化；准确把握JSONP和CORS两种跨域处理方式的原理与实现细节；熟练运用Ajax和JSON实现无刷新列表分页功能中的复杂代码逻辑与数据交互

教学方法

问答法、讨论法、讲授法

教学用具

电脑、投影仪、多媒体课件、教材

教学过程

主要教学内容及步骤

课前任务

【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务

请同学们尝试访问Node.js官网，了解其主要功能和特点，思考为什么它适合用来搭建Web服务器，然后在APP上进行讨论。

【学生】完成课前任务

考勤

【教师】使用APP进行签到

【学生】班干部报请假人员及原因

问题导入

【教师】提出以下问题：

同学们在平时上网时，一些网页在加载新数据的时候不需要整个页面刷新，比如在购物网站查看商品列表，翻页的时候页面并没有像传统网页那样重新加载，请同学们思考，这是通过什么技术实现的吗？

【学生】聆听、思考、举手回答

传授新知

【教师】通过学生的回答，引入新知，讲解Ajax基础知识，以及Web服务器搭建，XMLHttpRequest网络请求、数据交换格式和跨域处理的相关知识

9.1初识Ajax

Ajax是asynchronousJavaScriptandXML（异步JavaScript和XML技术）的简称。Ajax于2005年第一次提出，它并不是一门语言，而是一套技术的集合，其核心是XMLHttpRequest对象。

?【教师】利用多媒体展示“两种Web应用工作流程的区别”图片（详见教材），并进行讲解

Ajax可以说是Web应用开发的一项革命性技术，它改变了传统Web应用开发的工作流程。下面来对比一下传统的Web应用和使用Ajax的Web应用工作流程的区别，如图所示。

由该图可以看出，传统的Web应用工作流程中，浏览器端和服务器端的交互比较简单，仅从服务器端获取HTML和CSS数据，如果需要更新数据则需要重新加载网页或跳转到下一个页面。而使用Ajax的Web应用，交互步骤则不同，除了传统Web应用的工作流程之外，如果需要更新网页数据仅须使用Ajax请求的方式向服务器端请求相应数据，然后使用DOM操作更新页面数据即可，无须重新加载页面或跳转页面。

……（详见教材）

9.2Web服务器搭建

Ajax请求是方便浏览器与服务器交互的功能。为了更直观地学习Ajax，需要在本地电脑搭建Web服务器并启动一个Web服务。对于前端工程师来说，Node.js是比较容易上手的Web服务器搭建工具。它是一个开源与跨平台的JavaScript运行环境，可用于几乎任何项目，并且Node.js让使用JavaScript的前端开发者无须学习其他语言，就可以编写服务器端代码。本书使用Node.js搭建Web服务器，下面就来学习具体搭建方法。

9.2.1安装Node.js

（1）访问Node.js官网下载安装包。

使用浏览器访问Node.js官网（/zh-cn/download），选择相应的安装包（此处为Windows64位版本），如图9-2所示（详见教材）。

（2）安装Node.js。

?【教师】利用多媒体展示“选择复选框并单击“Next”按钮”图片和“单击“Install”按钮”图片（详见教材），并进行讲解

.msi文件下载完成后，双击文件进入安装过程。根据安装提示进入安装步骤，连续单击“Next”按钮，到“End-UserLicenseAgreement”界面后首先选择“IacceptthetermsintheLicens