第10章 Ajax 教学设计

第3章面向对象（上）《JavaScript前端开发案例教程》教学设计课程名称：JavaScript前端开发案例教程授课年级：年级授课学期：学年第一学期教师姓名：某某老师年月日课题名称第10章Ajax计划学时6学时内容分析Ajax是一个与服务器密切相关的技术，可以使网页与服务器进行数据交互，提升用户体验。在前面的章节中，用户直接使用浏览器查看本机保存的网页，并没有涉及服务器的概念。但若需要网页能够被互联网中的其他用户访问，就要将网页发布到服务器上，用户通过网址来访问这个网页。本章将结合Web服务器的相关基础知识，详细讲解Ajax的使用。教学目标及基本要求熟悉Ajax和HTTP的基本概念掌握Ajax对象的创建、常用方法和属性的使用掌握XML和JSON数据格式的使用掌握Cookie操作和Ajax跨域请求教学重点Ajax的概念、发送请求与处理响应、JSON数据格式教学难点HTTP协议、XML数据格式、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版本。请求方式：常用的有GET和POST方式。请求头格式：由字段名和值组成。用冒号和空格分隔。请求头的作用：向服务器传递附加消息。如可接受数据类型、压缩方式、语言、系统环境等。实体内容：POST方式提交表单时，对表单数据进行编码后放在实体内容中。响应消息响应状态行作用：告知客户端本次响应的状态。响应状态行组成：HTTP版本、状态码、描述信息。响应头作用：告知客户端本次响应的基本信息。如服务器程序名、内容的编码格式、缓存控制等。实体内容：如果请求的是一个网页，实体内容保存HTML。如果请求的是一张图片，实体内容保存的就是图片数据。实体内容的编码格式由Content-Type字段来描述。补充MIME的概念，介绍常见的MIME类型。浏览器针对不同MIME采取不同的处理方式。PHP开发环境在学习Ajax前，需要先搭建Web服务器。介绍什么是PHP，利用PHP搭建Web服务器环境。从PHP官方网站下载PHP压缩包。解压文件，然后打开命令行工具，切换到解压目录。执行命令，启动PHP内置的Web服务器。访问测试，查看Web服务器是否正常工作。在站点目录下准备一些测试文件，进行测试。前后端交互前端与后端开发的区别，前端即浏览器程序开发，后端即服务器端程序开发。后端为前端提供服务。一些需要前后端交互的操作：用户注册登录、发表评论、查询积分余额。前后端交互的两类基本操作：提交数据和查询数据。提交数据对应表单交互，查询数据对应URL参数交互。表单交互在站点目录创建form.html文件，编写一个简单的表单。设置表单的action属性（提交地址）为一个php脚本文件。演示表单提交方式GET和POST的区别，默认为GET。在login.php中接收表单，转换为JSON格式后输出。通过浏览器访问测试，提交表单后查看服务器返回的处理结果。画图演示表单交互的整个处理过程。URL参数交互作用：向服务器提交一些请求信息。场景：商品展示页面goods.php，根据参数获取查询的商品信息。画图演示查询商品信息的处理过程。创建test.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()、setRequestHeader()。open()方法用来创建新的HTTP请求。通过参数指定请求方式、请求地址等。send()方法用来发送请求到Web服务器并接收响应。setRequestHeader()方法用来单独指定某个HTTP请求头。通过案例演示如何发送GET方式的Ajax请求。通过案例演示如何发送POST方式的Ajax请求。注意POST方式提交数据，应使用setRequestHeader()设置编码格式。同步请求与异步请求open()方法的第3个参数用来设置同步请求和异步请求。通过图例演示两种方式的区别。由于同步请求导致程序阻塞，一般不用同步请求。处理服务器返回的信息列举Ajax对象的常用属性，readyState、onreadystatechange、status属性等。讲解readyState属性的使用，通过该属性获取Ajax的当前状态。讲解onreadystatechange属性的使用，通过该属性在状态改变时执行代码。讲解status属性的使用，获取服务器响应的HTTP状态码。在接收数据完成后，通过responseText、responseXML来按照指定格式获取服务器的响应结果。演示responseText的使用。关于responseXML会在下一节数据交换格式中进行具体讲解。URL参数编码转换注意URL编码转换问题，如何对URL参数中的特殊字符进行处理。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第三学时（XML数据格式、JSON数据格式、案例：无刷新分页）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。掌握XML数据交换格式的使用。掌握JSON数据交换格式的使用。掌握案例无刷新分页的开发。二、知识讲解为什么需要数据交换格式在服务器与浏览器交互的时候，约定一种格式，确保通信双方都能正确识别对方发送的信息。通用的数据交换格式：XML、JSON。XML数据格式演示一个典型的XML文档。列举XML的组成、基本语法形式。利用responseXML获取服务器返回的XML文档。注意服务器应在响应头中将Content-Type设为application/xml。通过JavaScript对服务器返回的XML进行解析。演示如何通过节点操作读取XML文档。JSON数据格式JSON和XML的区别：是一种轻量级的数据交换格式。JSON的语法就是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跨域请求、JSONP实现跨域请求）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。理解浏览器阻止跨域请求的规则。掌握Ajax跨域请求功能的开发。掌握JSONP如何实现跨域请求。二、知识讲解跨域请求规则什么是跨域请求，为什么浏览器阻止跨域请求。浏览器阻止跨域请求遵循同源策略。演示哪些是非同源URL地址。通过实际操作演示跨域请求被阻止的情况。演示如何利用Access-Control-Allow-Origin允许跨域请求。JSONP实现跨域请求讲解JSONP跨域请求的原理。演示如何通过编写代码实现JSONP跨域请求。注意使用JSONP时，如果随意引入JS脚本，会有风险，要引入信任网站。补充：编写程序实现自动生成JSONP回调函数名。补充：利用HTML5新增的postMessage()也可以轻松实现跨域请求。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第五学时（Cookie、FormData、Promise、WebSocket）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。前面学习了Ajax的基本实现，以及跨域请求。除了这些内容，还有一些与Ajax开发相关的扩展技术，通过学习扩展技术，可以更好的开发各种交互程序。（3）明确学习方向。掌握Cookie技术的使用。掌握FormData对象的使用。掌握Promise对象的使用。掌握WebSocket对象的使用。二、知识讲解Cookie讲解Cookie的作用。通过代码演示Cookie如何实现识别用户信息的。讲解如何通过JavaScript来访问当前保存的Cookie。FormData讲解FormData的作用。演示如何通过FormData实现自动收集表单数据进行提交。讲解如何手动向FormData对象中添加自定义数据。Promise演示回调地狱的代码，并讲解产生的原因。分析在Ajax编程中，编写的代码是否也会容易遇到回调地狱。讲解如何利用Promise对象来解决回调地狱的问题。演示如何在Promise的语法中进行异常处理。补充：利用FetchAPI更方便的进行Ajax开发。WebSocket讲解WebSocket的作用。搭建WebSocket服务器，接收消息并返回给客户端。在浏览器中编写代码实现与WebSocket服务器交互。演示如何实现浏览器主动接收服务器推送的消息。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用