第10章 Ajax 教学设计

《JavaScript前端开发案例教程》教学设计课程名称：JavaScript前端开发案例教程授课年级：年级授课学期：学年第一学期
教师姓名：某某老师年月日课题名称第10章Ajax计划学时6学时内容分析Ajax是一个与服务器密切相关的技术，可以使网页与服
务器进行数据交互，提升用户体验。在前面的章节中，用户直接使用浏览器查看本机保存的网页，并没有涉及服务器的概念。但若需要网页能够被互
联网中的其他用户访问，就要将网页发布到服务器上，用户通过网址来访问这个网页。本章将结合Web服务器的相关基础知识，详细讲解Ajax
的使用。教学目标及基本要求熟悉Ajax和HTTP的基本概念掌握Ajax对象的创建、常用方法和属性的使用掌握XML和JSON数据格式
的使用掌握Cookie操作和Ajax跨域请求教学重点Ajax的概念、发送请求与处理响应、JSON数据格式教学难点HTTP协议、XM
L数据格式、JSONP跨域请求、Cookie技术教学方式教学采用教师课堂讲授为主概念性知识点：提出为什么，将抽象具体化，配合教学
PPT、图例辅助讲解。功能性知识点：提需求，并上机演示如何应用，重点内容总结运行原理。综合实战操作：分析整体的设计思路和步骤，对具
体操作进行上机演练。教学过程第一学时（Web服务器、HTTP协议、PHP开发环境、前后端交互）一、回顾上节课内容（1）演示Ajax
技术在互联网中的应用，引出本次要学习的课程。Ajax技术与服务器密切相关，在学习Ajax前需要先了解服务器相关的知识。（3）明确学
习方向。理解Web服务器的作用。了解Web服务器如何处理请求的URL地址。了解动态资源与静态资源的区别。掌握HTTP协议的基本概念
和作用。理解请求头和响应头的基本格式。掌握PHP开发环境的搭建。掌握开发前后台交互程序的基本流程。理解前后台交互的数据传输和基本原
理。二、知识讲解什么是Web服务器作用：提供网上信息浏览服务。常见的Web服务器：Apache、Nginx、IIS等。处理流程：接
收客户端浏览器发送的请求，返回响应。静态资源与动态资源静态资源：Web服务器读取文件后直接返回。动态资源：响应结果会动态发生变化，
每次请求都需要计算处理。动态网站开发技术：PHP、Java、ASP.NET等。HTTP协议作用：规范客户端和服务器之间的数据交互格
式。交互方式：客户端发生请求，服务器响应处理结果。查看HTTP消息通过浏览器的控制台查看HTTP消息。消息组成：基本信息、请求消息
、响应消息。请求消息请求消息格式：请求行、请求头、实体内容。请求行组成：请求方式、请求资源路径、HTTP版本。请求方式：常用的有G
ET和POST方式。请求头格式：由字段名和值组成。用冒号和空格分隔。请求头的作用：向服务器传递附加消息。如可接受数据类型、压缩方式
、语言、系统环境等。实体内容：POST方式提交表单时，对表单数据进行编码后放在实体内容中。响应消息响应状态行作用：告知客户端本次响
应的状态。响应状态行组成：HTTP版本、状态码、描述信息。响应头作用：告知客户端本次响应的基本信息。如服务器程序名、内容的编码格式
、缓存控制等。实体内容：如果请求的是一个网页，实体内容保存HTML。如果请求的是一张图片，实体内容保存的就是图片数据。实体内容的编
码格式由Content-Type字段来描述。补充MIME的概念，介绍常见的MIME类型。浏览器针对不同MIME采取不同的处理方式。
PHP开发环境在学习Ajax前，需要先搭建Web服务器。介绍什么是PHP，利用PHP搭建Web服务器环境。从PHP官方网站下载PH
P压缩包。解压文件，然后打开命令行工具，切换到解压目录。执行命令，启动PHP内置的Web服务器。访问测试，查看Web服务器是否正常
工作。在站点目录下准备一些测试文件，进行测试。前后端交互前端与后端开发的区别，前端即浏览器程序开发，后端即服务器端程序开发。后端为
前端提供服务。一些需要前后端交互的操作：用户注册登录、发表评论、查询积分余额。前后端交互的两类基本操作：提交数据和查询数据。提交数
据对应表单交互，查询数据对应URL参数交互。表单交互在站点目录创建form.html文件，编写一个简单的表单。设置表单的actio
n属性（提交地址）为一个php脚本文件。演示表单提交方式GET和POST的区别，默认为GET。在login.php中接收表单，转换
为JSON格式后输出。通过浏览器访问测试，提交表单后查看服务器返回的处理结果。画图演示表单交互的整个处理过程。URL参数交互作用：
向服务器提交一些请求信息。场景：商品展示页面goods.php，根据参数获取查询的商品信息。画图演示查询商品信息的处理过程。创建t
est.php文件，将URL参数转换成JSON后输出。直接在URL中编写参数，然后查看test.php接收到的结果。总结GET方式
和POST方式的区别，各自的适用场景。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发
课后作业。第二学时（什么是Ajax、创建Ajax对象、Ajax向服务器发送请求、处理服务器返回的信息）一、回顾上节课内容（1）对上
节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。掌握Ajax的基本概念。理
解Ajax工作流程与传统Web工作流程的区别。理解Ajax技术的优势。掌握Ajax对象的创建。掌握Ajax如何向服务器发送请求。掌
握Ajax如何处理服务器返回的信息。二、知识讲解什么是Ajax演示Ajax技术工作流程与传统Web工作流程的区别。总结Ajax技术
的优势。减轻服务器的负担、节省宽带、强化用户体验。创建Ajax对象标准浏览器通过XMLHttpRequest()函数创建对象。早期
IE浏览器使用ActiveX的方式创建对象。Ajax向服务器发送请求介绍常用的方法open()、send()、setRequest
Header()。open()方法用来创建新的HTTP请求。通过参数指定请求方式、请求地址等。send()方法用来发送请求到Web
服务器并接收响应。setRequestHeader()方法用来单独指定某个HTTP请求头。通过案例演示如何发送GET方式的Ajax
请求。通过案例演示如何发送POST方式的Ajax请求。注意POST方式提交数据，应使用setRequestHeader()设置编码
格式。同步请求与异步请求open()方法的第3个参数用来设置同步请求和异步请求。通过图例演示两种方式的区别。由于同步请求导致程序阻
塞，一般不用同步请求。处理服务器返回的信息列举Ajax对象的常用属性，readyState、onreadystatechange、
status属性等。讲解readyState属性的使用，通过该属性获取Ajax的当前状态。讲解onreadystatechange
属性的使用，通过该属性在状态改变时执行代码。讲解status属性的使用，获取服务器响应的HTTP状态码。在接收数据完成后，通过re
sponseText、responseXML来按照指定格式获取服务器的响应结果。演示responseText的使用。关于respo
nseXML会在下一节数据交换格式中进行具体讲解。URL参数编码转换注意URL编码转换问题，如何对URL参数中的特殊字符进行处理。
三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第三学时（XML数据格式、J
SON数据格式、案例：无刷新分页）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，
引出本节课主题。（3）明确学习方向。掌握XML数据交换格式的使用。掌握JSON数据交换格式的使用。掌握案例无刷新分页的开发。二、知
识讲解为什么需要数据交换格式在服务器与浏览器交互的时候，约定一种格式，确保通信双方都能正确识别对方发送的信息。通用的数据交换格式：
XML、JSON。XML数据格式演示一个典型的XML文档。列举XML的组成、基本语法形式。利用responseXML获取服务器返回
的XML文档。注意服务器应在响应头中将Content-Type设为application/xml。通过JavaScript对服务器
返回的XML进行解析。演示如何通过节点操作读取XML文档。JSON数据格式JSON和XML的区别：是一种轻量级的数据交换格式。JS
ON的语法就是JavaScript对象的字面量。编写代码演示如何在PHP服务器发送一段JSON数据。在JavaScript中对服务
器返回的JSON字符串进行解析。讲解如何利用JSON对象对JSON进行编码与解码。补充讲解eval()函数，通过eval()将字符
串转换成代码执行。注意eval()函数的缺点，在使用时应注意。三、【案例】无刷新分页开发背景以京东的商品评论为例，整个页面很大，评
论只是页面中的一个区域。当在评论区域内进行翻页时，应该如果只刷新局部，而整个页面不用重新加载，可以使用户体验更好，占用宽带更少。案
例展示演示无刷新分页案例完成后的效果。分析每一页显示的数据是如何获取到的。分析如何显示评论的加载进度。分析如何现URL地址跟随翻页
发生改变。代码实现准备服务器端JSON数据接口。利用PHP数组保存一些测试数据。在data.php脚本中实现根据URL参数page
来返回指定页码的数据。通过浏览器访问测试，查看当使用不同URL时，服务器返回的数据。在PHP中转换后的JSON编码格式会对中文进行
编码处理，从而兼容不同的文本编码方式。编写客户端HTML页面comment.html，显示和获取商品评论。编写PageList对象
，对无刷新分页的基础功能进行封装。为页面中的翻页按添加事件，控制页码值的变化。编写Comment对象，用于发送Ajax请求，获取评
论数据。在获取到服务器返回的记录后，拼接HTML，显示在页面中。在PageList对象中增加方法，更新页面切换状态。为了提示加载进
度，增加页面加载进度条。控制进度条的显示、隐藏，和长度变化。通过URL参数在翻页时更新页码值，在刷新后保留当前请求的页码。四、知识
巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第四学时（Ajax跨域请求、JSON
P实现跨域请求）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（
3）明确学习方向。理解浏览器阻止跨域请求的规则。掌握Ajax跨域请求功能的开发。掌握JSONP如何实现跨域请求。二、知识讲解跨域请
求规则什么是跨域请求，为什么浏览器阻止跨域请求。浏览器阻止跨域请求遵循同源策略。演示哪些是非同源URL地址。通过实际操作演示跨域请
求被阻止的情况。演示如何利用Access-Control-Allow-Origin允许跨域请求。JSONP实现跨域请求讲解JSON
P跨域请求的原理。演示如何通过编写代码实现JSONP跨域请求。注意使用JSONP时，如果随意引入JS脚本，会有风险，要引入信任网站
。补充：编写程序实现自动生成JSONP回调函数名。补充：利用HTML5新增的postMessage()也可以轻松实现跨域请求。三、
知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第五学时（Cookie、Form
Data、Promise、WebSocket）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾
上节课内容，引出本节课主题。前面学习了Ajax的基本实现，以及跨域请求。除了这些内容，还有一些与Ajax开发相关的扩展技术，通过学
习扩展技术，可以更好的开发各种交互程序。（3）明确学习方向。掌握Cookie技术的使用。掌握FormData对象的使用。掌握Pro
mise对象的使用。掌握WebSocket对象的使用。二、知识讲解Cookie讲解Cookie的作用。通过代码演示Cookie如何
实现识别用户信息的。讲解如何通过JavaScript来访问当前保存的Cookie。FormData讲解FormData的作用。演示
如何通过FormData实现自动收集表单数据进行提交。讲解如何手动向FormData对象中添加自定义数据。Promise演示回调地
狱的代码，并讲解产生的原因。分析在Ajax编程中，编写的代码是否也会容易遇到回调地狱。讲解如何利用Promise对象来解决回调地狱
的问题。演示如何在Promise的语法中进行异常处理。补充：利用FetchAPI更方便的进行Ajax开发。WebSocket讲解
WebSocket的作用。搭建WebSocket服务器，接收消息并返回给客户端。在浏览器中编写代码实现与WebSocket服务器交
互。演示如何实现浏览器主动接收服务器推送的消息。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学
谷系统下发课后作业。第六学时（动手实践：进度条文件上传）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。
（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。掌握进度文件上传案例的开发。二、知识讲解案例分析在上传文件时，提示上传进
度，从而增强用户体验。利用HTML5新增的功能实现感知上传功能。编写页面创建upload.html，准备文件上传表单。通过Form
Data收集表单数据，输出上传进度。修改PHP配置文件默认情况下PHP限制文件上传的大小。为了方便测试，修改配置，允许上传大文件。修改配置后，需要重启PHP服务器并添加参数来加载配置。保存上传文件编写upload.php，实现服务器接收上传文件并保存。上传文件测试，在控制台中查看文件上传进度。在网页中准备进度条利用HTML+CSS绘制一个进度条。通过控制元素的宽度，来表示进度条的进度。显示已上传的百分比数值。实现进度条增长效果在获取到上传进度后，通过计算来取得百分比。在上传过程中，动态改变进度条的进度。在上传文件完成后显示下载地址。通过浏览器上传文件测试。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第七学时（上机练习）教师发放本章相关资料和素材，学生进行上机练习，以此检查学生对相关知识点的掌握情况。上机练习完成后将报告通过平台提交给老师。教学后记第3章面向对象（上）2