第9单元 Ajax基础与数据请求（教案5：2 学时）

教学设计一、基本信息课程名称Web前端开发技术（AIGC版）课题名称Ajax基础与数据请求授课班级授课时间授课类型理实一体化、新授课授课地点机房（有网络），依托超星教学平台、本地服务器环境（XAMPP）授课学时40分钟*2学时教材分析本节选自教材第九单元进阶内容，Ajax是前端实现异步数据交互的核心技术，打破了传统页面刷新的局限，是现代前端开发的必备技能。内容涵盖Ajax概念与原理、XMLHttpRequest对象、GET/POST请求方法、请求状态码、响应数据处理及实际案例（如异步加载商品列表、用户数据），教材案例贴合实际开发场景，可结合AIGC辅助生成请求代码、排查请求错误、解释异步原理，降低抽象技术的学习难度，契合职校理实一体化教学理念，是连接前端界面与后端数据的关键纽带。学情分析1.前置基础：已掌握HTML/CSS布局、JS核心语法、DOM操作、事件处理及JSON数据处理技能，能实现JSON数据解析、转换与DOM绑定展示，熟悉VSCode与浏览器调试工具，具备AIGC工具基础使用能力，为Ajax数据请求与前端渲染铺垫了核心基础。2.学情特点：动手能力强、对“动态数据加载”类实操项目兴趣浓厚，能快速跟进分步实操；抽象逻辑较弱，对Ajax异步请求原理、HTTP协议基础、请求状态码含义及跨域问题理解困难，易出现请求失败、数据渲染延迟等问题，对“请求-响应”完整流程衔接不顺畅。3.衔接需求：通过本课程掌握Ajax核心技能，实现“前端请求-后端响应-数据解析-页面渲染”的完整流程，衔接前序JSON数据处理知识，为后续框架数据请求、前后端分离开发等内容铺垫，构建前端异步数据交互知识体系。教学目标【知识目标】：1.理解Ajax的概念、核心作用及异步请求原理，掌握HTTP协议基础与常见请求状态码含义。2.掌握XMLHttpRequest对象的使用，能独立实现GET/POST请求，理解请求与响应的完整流程。【能力目标】：1.能借助本地服务器，实现Ajax请求JSON数据并动态渲染到页面，排查常见请求错误（如路径错误、状态码异常）。2.能借助AIGC工具生成Ajax请求代码、解释请求原理、排查请求故障，优化异步数据加载逻辑。【素质目标】：1.培养异步编程思维与问题排查能力，提升代码规范性与场景适配能力。2.强化“前后端协同”理念，提升高效解决前端异步数据交互问题的能力。教学重点1.Ajax异步请求原理与XMLHttpRequest对象的核心方法、属性使用。2.GET请求的实现流程，及请求到的JSON数据解析与页面动态渲染。教学难点1.理解Ajax异步特性，及请求状态码对应的请求状态判断与错误处理。2.GET与POST请求的区别与适用场景，及请求参数的正确拼接与传递。教学准备1.硬件：机房计算机、投影仪、网络环境、本地服务器（XAMPP）。2.软件：VSCode、Chrome浏览器、超星教学平台、AIGC工具（通义灵码）、Postman（接口测试工具）。3.素材：教材Ajax案例代码、请求状态码对照表、实操任务单、AIGC提示词模板、本地JSON数据文件、微课视频（服务器搭建与Ajax基础）。教学方法1.主导方法：BOPPPS教学法。2.辅助方法：理实一体化教学法、案例演示法、讲练结合法、小组协作法、情境模拟法。板书设计Ajax基础与数据请求1.核心：异步无刷新数据交互（请求-响应）2.核心对象：XMLHttpRequest（创建-配置-发送-响应处理）3.GET请求流程：创建对象→配置请求→发送请求→监听状态→处理响应4.关键状态码：200（成功）、404（路径错）、500（服务器错）二、教学设计教学环节教学内容师生活动设计意图/时间一、导入（Bridge-in）1.情景对比：展示2个页面效果——①传统页面：切换商品分类时整页刷新；②Ajax页面：切换分类时无刷新加载新数据，提问学生：“两种页面体验有何区别？无刷新加载数据是如何实现的？”2.引出主题：告知学生这种无刷新数据加载效果通过Ajax技术实现，说明Ajax的核心价值——提升用户体验、减少数据传输量，关联美丽乡村网场景（无刷新加载景点列表、特色产品分类数据），激发学习兴趣。3.亮点预告：介绍本节课可借助AIGC工具生成Ajax请求代码、排查请求错误，帮助理解异步请求原理，快速解决请求失败问题。教师：1.演示两种页面效果，引导学生观察差异，提出问题引发思考，强化对“异步无刷新”的直观认知。2.简要说明Ajax在实际开发中的应用场景（如电商列表、新闻加载），让学生感知知识的实用性，强调其在前后端交互中的核心地位。3.展示AIGC生成简单AjaxGET请求代码的过程，降低学生对新知识的畏惧感。学生：1.观察演示效果，对比两种页面体验差异，主动回应教师提问，初步感知Ajax技术的作用。2.明确本节课学习目标，对AIGC辅助生成请求代码、排查错误产生兴趣，做好学习准备。设计意图：以对比情景导入，贴合职校生具象思维特点，直观呈现Ajax核心优势；提前渗透AIGC辅助亮点，为后续突破请求错误排查、异步原理理解等难点铺垫。时间：5分钟（第一学时）二、目标（Objective）1.知识目标：掌握Ajax概念与异步原理、XMLHttpRequest对象核心用法，理解GET请求流程与常见状态码含义。2.能力目标：能独立搭建本地服务器，实现AjaxGET请求本地JSON数据，完成数据解析与页面渲染，借助AIGC排查请求错误。3.重难点告知：明确重点为GET请求实现与数据渲染，难点为异步原理与状态码判断，说明将通过模拟演示与分步实操突破。教师：1.逐条明确教学目标，结合实操任务说明目标的可达成性，强调请求流程规范性与状态码判断的重要性。2.用通俗语言解读重难点，类比“快递收发”讲解异步原理，展示状态码对照表，让学生做到心中有数。学生：1.记录教学目标与重难点，明确学习重点方向，聚焦GET请求与异步原理内容。2.结合自身基础，预判学习难点（如状态码判断、异步逻辑），做好针对性听讲准备。设计意图：明确目标与重难点，帮助学生聚焦学习核心，提升课堂效率；用类比方式解读难点，增强学生学习信心。时间：3分钟（第一学时）三、前测（Pre-assessment）1.基础提问（口头）：JSON数据如何解析为JS对象？如何将解析后的数据动态绑定到DOM元素展示？2.简单实操（5分钟）：①学生在VSCode中创建本地JSON文件（商品数据，包含名称、价格、图片路径）；②启动本地服务器（XAMPP），将JSON文件放置在服务器根目录，验证文件访问路径是否正确。3.结果反馈：快速巡视学生实操情况，检查JSON文件编写规范性与服务器搭建进度，纠正路径配置错误、JSON格式错误等共性问题。教师：1.口头提问快速检验前置JSON与DOM绑定知识，对回答不完整的地方补充讲解，强化数据渲染基础。2.巡视服务器搭建与JSON文件准备过程，对服务器启动失败、路径配置错误的学生单独指导，确保所有学生具备请求基础环境。学生：1.积极回应口头提问，巩固前置JSON数据处理与DOM绑定知识。2.按要求完成JSON文件编写与服务器搭建，验证文件访问路径，对疑难问题举手求助。设计意图：检验前置知识掌握情况，搭建Ajax请求基础环境（服务器与JSON数据），为后续GET请求实操铺垫；通过简单实操建立知识关联性，降低新课实操难度。时间：7分钟（第一学时）四、参与式学习（ParticipatoryLearning）-新知讲授与实操11.Ajax核心概念与异步原理（情景模拟）：（1）讲解概念：Ajax（AsynchronousJavaScriptandXML）即异步JavaScript与XML，核心是实现无刷新异步数据交互，现多使用JSON作为数据交换格式，类比“快递收发”——前端发请求（寄快递）、后端处理（快递中转）、前端收响应（收快递），过程中可做其他操作（异步）。（2）异步与同步对比：通过代码演示同步代码（阻塞执行）与异步代码（非阻塞执行）的差异，让学生直观理解异步特性，强调Ajax异步请求的核心优势。（3）HTTP协议基础：简要讲解请求与响应的核心要素，介绍常见请求方法（GET/POST），说明GET请求以URL参数传递数据的特点。2.XMLHttpRequest对象核心用法（分步演示）：（1）对象创建：讲解不同浏览器下的创建方式（兼容处理），重点演示标准创建方法（newXMLHttpRequest()）。（2）核心属性与方法：梳理open()、send()、onreadystatechange事件、readyState属性、status属性的作用，结合状态码对照表讲解关键状态（readyState=4、status=200表示请求成功）。3.AIGC辅助：给出提示词“解释Ajax异步请求原理，对比同步与异步差异，生成XMLHttpRequest对象核心用法说明”，生成内容并补充讲解。教师：1.用“快递收发”类比拆解Ajax概念与异步原理，结合代码演示对比同步与异步差异，让学生直观理解抽象逻辑，突破原理难点。2.分步演示XMLHttpRequest对象的创建、配置与事件监听，结合浏览器控制台展示readyState与status值的变化，强化属性与方法记忆。3.指导学生使用AIGC生成原理说明文档，对照梳理核心知识点，补充讲解学生理解不清晰的内容。学生：1.结合类比与演示理解Ajax概念与异步原理，记录同步与异步的核心差异，明确HTTP请求基础要素。2.记录XMLHttpRequest对象核心属性与方法，结合控制台输出理解状态变化过程，建立请求状态判断逻辑。3.借助AIGC生成的文档，梳理知识点框架，补充自身笔记，深化对原理与对象用法的理解。设计意图：通过类比与代码演示，将抽象异步原理具象化，让学生理解Ajax核心逻辑；分步讲解XMLHttpRequest对象用法，结合控制台输出强化记忆，为后续请求实操铺垫；融入AIGC辅助，提升知识点梳理效率。时间：15分钟（第一学时）五、参与式学习（ParticipatoryLearning）-新知讲授与实操21.AjaxGET请求完整流程（教材范例9-9拆解）：（1）流程拆解：①创建XMLHttpRequest对象；②配置请求（open("GET",数据路径,true)）；③监听请求状态变化（onreadystatechange事件）；④发送请求（send()）；⑤处理响应（解析JSON数据，绑定到DOM）。（2）演示实现：以加载商品列表为例，演示GET请求本地JSON数据的完整过程，结合浏览器控制台排查路径错误、状态码异常等问题，讲解响应数据解析与DOM渲染的衔接逻辑。2.GET请求实操任务：（1）任务要求：学生独立实现AjaxGET请求，加载本地服务器中的商品JSON数据，动态渲染为页面列表，包含步骤：①编写HTML结构（商品列表容器）；②编写AjaxGET请求代码；③监听请求状态，解析响应JSON数据；④将数据绑定到DOM元素，添加基础样式。（2）错误排查：引导学生借助浏览器控制台查看请求状态、响应数据，学习根据状态码排查错误（如404路径错误、500服务器错误）。3.AIGC辅助：给出提示词“生成AjaxGET请求本地JSON数据的完整代码，包含数据解析与DOM渲染，添加详细注释”，生成代码并对比讲解。教师：1.分步拆解GET请求流程，每一步结合代码演示与控制台输出，强调请求路径规范性、状态判断逻辑及数据解析与渲染的衔接，讲解常见错误排查方法。2.明确实操任务要求与步骤，巡视学生实操过程，重点指导状态监听、数据解析逻辑，对请求失败的学生针对性排查问题（路径、JSON格式、代码语法）。3.指导学生使用AIGC生成代码，对比自身代码优化逻辑，讲解注释规范与代码复用思路。学生：1.记录GET请求完整流程，结合演示理解每一步的核心作用，明确状态判断与数据渲染的衔接逻辑。2.按步骤完成实操任务，编写请求代码，监听请求状态，解析数据并渲染页面，借助控制台排查请求错误，自主总结常见错误类型。3.对比AIGC生成的标准代码，优化自身代码结构，添加注释，规范编码格式。设计意图：通过流程拆解与分步演示，让学生掌握GET请求核心技能，理解“请求-响应-渲染”完整逻辑；实操强化代码编写与错误排查能力，借助AIGC辅助优化代码，提升编码规范性。时间：10分钟（第一学时）六、后测（Post-assessment）-第一学时小结1.小组任务（5分钟）：2人一组，完成“GET请求+数据渲染”综合小任务，①优化上一步GET请求代码，添加请求加载提示（如“加载中...”）；②处理请求失败场景（如路径错误，显示错误提示）；③验证列表渲染效果，确保数据展示正常。2.成果抽检：选取2组学生作品，在投影仪展示，点评亮点与不足，纠正状态判断逻辑错误、加载提示未移除、错误处理缺失等问题。3.小结回顾：梳理本节课核心知识点（Ajax原理、XMLHttpRequest对象、GET请求流程、状态码），强调请求路径规范与错误处理的重要性，衔接下一时学内容（POST请求、请求参数传递）。教师：1.布置小组任务，明确时间与要求，巡视指导小组协作与实操，重点关注加载提示与错误处理的实现逻辑。2.点评抽检作品，集中讲解共性错误，强化状态码判断与异常处理逻辑，强调用户体验优化（如加载提示、错误反馈）。3.简洁小结，明确下一时学重点，引导学生提前思考“如何传递请求参数”“GET与POST的区别”。学生：1.小组协作完成任务，相互检查请求代码、加载提示与错误处理逻辑，排查问题。2.对照优秀作品，修正自身不足，记录小结要点，思考请求参数传递与POST请求的实现思路。设计意图：通过小组任务检验学习效果，强化GET请求、异常处理与用户体验优化的综合应用能力；点评与小结结合，帮助学生梳理知识体系，为下一时学POST请求铺垫。时间：5分钟（第一学时）一、导入（Bridge-in）1.回顾衔接：提问上一时学内容（Ajax原理、GET请求流程、常见状态码），快速抽查2名学生回答；展示学生上节课优秀作品，回顾GET请求与数据渲染逻辑，重点点评加载提示与错误处理亮点。2.情景延伸：展示用户登录表单、商品提交页面，提问“这类需要提交用户输入数据的场景，用GET请求合适吗？如何安全传递表单数据？”，引出本节课内容（POST请求、请求参数传递、GET与POST区别）。3.任务预告：本节课将完成教材范例9-10实操，掌握POST请求与参数传递技能，实现“表单提交-数据请求-响应反馈”的完整流程，能区分GET与POST适用场景。教师：1.快速回顾旧知，强化GET请求流程与状态码记忆，为POST请求衔接铺垫，重点强调异常处理的重要性。2.展示表单提交场景，提出问题引发思考，激发学生探索POST请求与参数传递的兴趣，聚焦本节课难点内容。学生：1.积极回应回顾提问，巩固旧知，明确GET请求的适用场景与局限性。2.观察案例场景，思考参数传递与POST请求的实现思路，明确本节课学习方向。设计意图：温故知新，实现新旧知识自然衔接；以表单提交场景提问导入，贴合职校生实操导向，激发学习兴趣，聚焦POST请求与参数传递难点。时间：4分钟（第二学时）二、目标（Objective）1.知识目标：掌握POST请求流程与参数传递方法，理解GET与POST请求的核心区别与适用场景，掌握请求头设置方法。2.能力目标：能独立实现AjaxPOST请求，完成表单数据提交与响应处理，借助AIGC优化请求代码与参数传递逻辑，区分并合理选用请求方法。3.重难点告知：重点为POST请求实现与参数传递，难点为GET与POST区别及请求头设置，说明将通过案例对比与分步实操突破。教师：1.明确本节课教学目标，结合表单提交实操任务说明目标的可达成性，强调请求头设置与参数格式规范的重要性。2.解读重难点，展示GET与POST区别对照表，讲解请求头设置的核心作用，引导学生针对性学习。学生：1.记录目标与重难点，明确学习重点方向，聚焦POST请求、参数传递与请求方法对比内容。2.结合旧知预判学习难度，做好针对性听讲与实操准备。设计意图：明确学习核心，让学生聚焦POST请求与参数传递难点；提前告知突破方法，帮助学生建立学习思路，提升课堂针对性。时间：3分钟（第二学时）三、前测（Pre-assessment）1.实操回顾：让学生打开上一时学的GET请求文件，快速优化代码，确保加载提示、错误处理功能正常，验证请求与渲染逻辑熟练度。2.问题提问：GET请求如何传递参数？参数会显示在哪个位置？这种传递方式有什么局限性？（为POST请求参数传递铺垫）3.反馈纠正：针对学生回顾实操中的错误，快速讲解修正；对参数传递问题进行补充，明确GET参数传递的局限性，引出POST请求的优势。教师：1.巡视学生回顾实操情况，对加载提示未移除、错误处理逻辑不完整的学生单独指导，强化基础技能。2.提问GET参数传递知识，补充讲解参数拼接方法与局限性（长度限制、安全性低），为POST请求参数传递与场景对比铺垫。学生：1.快速回顾旧知实操，排查代码错误，巩固GET请求与异常处理用法。2.回应提问，明确GET参数传递的特点与局限性，为理解POST请求优势做好准备。设计意图：巩固旧知，确保学生具备请求与渲染的基础能力；铺垫参数传递知识，明确GET请求局限性，自然引出POST请求，降低新知学习难度。时间：3分钟（第二学时）四、参与式学习（ParticipatoryLearning）-新知讲授与实操31.POST请求核心知识（案例对比）：（1）POST请求流程：对比GET请求流程，讲解核心差异（参数传递方式、请求头设置），拆解POST请求步骤——①创建对象；②配置请求；③设置请求头（Content-Type）；④传递参数；⑤发送请求；⑥处理响应。（2）请求头设置：讲解Content-Type常见取值（application/x-www-form-urlencoded、application/json），说明不同取值对应的参数格式要求，演示参数拼接与JSON格式参数传递方法。（3）GET与POST区别：结合对照表，从参数传递方式、安全性、长度限制、缓存机制、适用场景五个维度对比，明确GET适用于数据查询、POST适用于数据提交。2.POST请求实操（教材范例9-10拆解）：（1）演示实现：以用户登录表单为例，演示POST请求提交表单数据（用户名、密码）的完整过程，设置正确请求头，处理响应数据（如登录成功/失败提示）。（2）学生实操：实现表单提交POST请求，包含步骤：①编写登录表单HTML结构；②绑定表单提交事件（阻止默认提交行为）；③编写POST请求代码，设置请求头与参数；④处理响应，显示登录反馈信息。3.AIGC辅助：给出提示词“生成AjaxPOST请求提交表单数据的完整代码，设置正确请求头，包含表单验证与响应处理”，生成代码并优化讲解。教师：1.对比GET请求讲解POST请求流程，重点演示请求头设置与参数传递方法，结合对照表清晰区分两种请求差异，突破核心难点；强调阻止表单默认提交行为的重要性。2.分步演示表单提交POST请求实现过程，巡视学生实操，重点指导请求头设置、参数格式与响应处理逻辑，为遇到问题的学生提供思路。3.指导学生使用AIGC生成代码，讲解表单验证、请求头设置的优化思路，帮助学生理解不同场景下的参数传递方式。学生：1.结合对比与演示理解POST请求流程、请求头设置方法，记录GET与POST核心区别，明确适用场景。2.按步骤完成实操，编写表单与POST请求代码，设置请求头与参数，处理响应反馈，自主排查请求头错误、参数格式错误等问题。3.借助AIGC生成的代码，优化自身表单验证与请求逻辑，规范编码格式。设计意图：通过对比演示与分步实操，让学生掌握POST请求与参数传递技能，明确两种请求方法的区别与适用场景，突破核心难点；实操强化表单提交与响应处理能力，融入AIGC辅助，优化代码逻辑。时间：18分钟（第二学时）五、参与式学习（ParticipatoryLearning）-综合实操（请求方法综合应用）1.综合场景任务设计：（1）场景说明：搭建“商品管理小页面”，整合GET与POST请求，实现“商品列表加载（GET）+商品添加（POST）”完整功能，模拟前后端数据交互流程。（2）功能要求：①页面加载时，通过GET请求加载本地商品JSON数据，动态渲染商品列表；②编写商品添加表单（名称、价格、分类），通过POST请求提交表单数据，添加加载提示与异常处理；③商品添加成功后，重新发起GET请求刷新商品列表；④为页面添加基础样式，优化用户体验。（3）实操步骤：①编写HTML结构（列表容器、添加表单）；②封装GET/POST请求函数（复用代码）；③实现页面加载时GET请求渲染列表；④绑定表单提交事件，实现POST请求提交数据；⑤处理响应，刷新列表，添加提示反馈。2.问题排查：鼓励学生借助AIGC工具排查请求头错误、参数传递异常、列表刷新逻辑问题，借助Postman测试请求是否正常。教师：1.讲解综合场景任务逻辑，强调函数封装（复用GET/POST请求函数）的重要性，衔接前序GET/POST请求知识，突破请求方法综合应用难点，提醒学生注意阻止表单默认行为。2.明确综合任务要求与步骤，巡视指导实操过程，重点关注请求函数封装、列表刷新逻辑与异常处理，为遇到问题的小组提供思路，收集共性问题。3.集中演示共性问题修正方法（如POST请求头设置错误、列表刷新时旧数据未清除），强化综合应用能力，强调代码复用与规范性。学生：1.结合场景理解综合任务逻辑，记录请求函数封装与列表刷新的核心技巧，明确GET与POST请求的分工与协同逻辑。2.独立或小组协作完成综合任务，按步骤编写代码，封装请求函数，测试全功能效果，借助AIGC与Postman排查疑难错误。3.完成后优化样式与交互体验，添加详细注释，小组间相互测试功能，交流请求方法选用经验。设计意图：通过综合场景任务，整合GET与POST请求知识，让学生掌握请求方法综合应用技能，形成“加载-提交-刷新”完整数据交互逻辑；强化函数封装与异常处理意识，提升学生综合编码与问题排查能力；融入AIGC与Postman辅助，落实核心亮点。时间：8分钟（第二学时）六、后测（Post-ass