cu/curriculum 旧版 JavaScript 课程实战：基于 OMDB API 与 AJAX 构建电影无限滚动页面

cu/curriculum 旧版 JavaScript 课程实战基于 OMDB API 与 AJAX 构建电影无限滚动页面【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum导读本指南完整讲解 cu/curriculum 旧版 JavaScript 课程中的实战项目「AJAX 表单与无限滚动电影页」带你基于开放电影数据库 OMDBOpen Movie DatabaseAPI用 AJAX 技术构建一个不刷新页面、随滚动持续加载新电影的前端页面。读完本文你将掌握如何阅读第三方 API 文档并构造数据请求、如何用 AJAX 异步获取 JSON 数据并渲染进现有页面、如何实现无限滚动与加载中占位反馈以及如何定位破坏滚动的边界情况。项目背景为什么要给现成 API 写前端在旧版课程体系中这个项目的定位十分特殊——它出现在学员还没有把自己的前端项目连接到后端 Rails API 的阶段。原文档project_ajax_forms.md开篇就点明了动机因为你还没有把自己的前端项目连接到后端的 Rails API这个项目将让你有机会为一个存在于互联网上的 API 搭建前端界面。这个 API 就是OMDBOpen Movie Database一个模仿 IMDB 的开放电影数据库。学员需要在动手前通读 OMDB 的 API 文档弄清楚如何提交一条新的电影查询。这本身就是该项目的核心训练点之一在没有现成教程手把手的情况下独立读懂第三方 API 文档并完成请求构造。这与当前课程体系中 working_with_apis.md 反复强调的能力一脉相承——API 的访问细节因服务而异通常都会记录在服务商官网的文档里。需求拆解到底要做什么原文档给出的 Assignment 非常精炼目标只有一句话但拆分后有 6 个明确步骤步骤任务关键技术点1为项目创建 GitHub 仓库版本管理、项目初始化2建立空白 HTML 文档页面骨架3通过 AJAX 请求数据库首次展示 10 部电影AJAX 调用、JSON 解析、DOM 渲染4实现无限滚动每次滚动到底部时再加载 10 部并追加到页面底部scroll 事件监听、分页参数、DOM 追加5反复试验这个滚动找出什么东西会弄坏它边界情况与缺陷分析6把解决方案推送到 GitHub 并提交交付与社区分享值得注意的是第 5 步——Play around with this new scroll. What breaks it?。这不是一句客套话而是整个项目最有价值的工程训练实现功能之后主动去破坏它观察什么场景下请求会重复触发、事件会堆积、API 会限流从而真正理解异步加载背后的机制。原文档末尾的 Student Solutions 部分收集了历代学员的公开仓库提交链接这是旧版课程通过 Pull Request 提交作业的协作方式Additional Resources 则邀请学员自行补充延伸阅读材料。前置知识AJAX 与 JSON在动手前旧版课程配套的理论课 ajax.md 定义了本项目依赖的四个核心概念1. AJAX 是什么。AJAXAsynchronous JavaScript and XML在不阻塞浏览器其他活动的前提下向服务器发送数据或请求数据。你传给 AJAX 函数一个回调当服务器响应返回时回调被激活并接收返回值程序继续往下走。2. 为什么 AJAX 不需要刷新页面。点击超链接或普通表单提交会触发整页刷新而 AJAX 从服务器拿回的只是一个 JSON 数据包而不是完整的 HTML 文档因此可以在现有页面内部处理它。这带来两个能力构建单页应用根据导航和返回数据动态改内容以及把缓慢的网络操作隐藏起来、按片段加载页面。3. JSON 响应的样子。JSONJavaScript Object Notation是基于 JavaScript 对象语法的标准化数据格式是 Web 上传输数据的通用格式详见 json.md。AJAX 拿回的是 JSON 字符串需要解析成 JavaScript 对象后才能访问其中的字段。4. jQuery 的 AJAX 方法族。旧版课程同时要求学员掌握原生 JS 方法与 jQuery 方法$.ajax、$.get、$.post等便捷方法、serialize表单序列化、错误处理以及用全局 AJAX 事件如ajaxStart/ajaxStop实现加载中通知。课程背景说明该文编写于 jQuery 主导前端开发的年代配套的 project_js_jquery.md 明确给出了引入 jQuery 的方式——在head中、其他 JS 文件之前加入 jQuery CDN 脚本标签。如果你使用的是现代浏览器也可以用当前课程体系主推的原生fetch Promise 方案见下文现代替代方案小节完成同样的功能。第 1 步准备仓库与空白 HTML按照原文档的步骤 1 和步骤 2为项目创建一个 GitHub 仓库完成git init、首次提交、关联远程仓库等基础设置。建立空白 HTML 文档。一个最小可运行的骨架大致如下含 jQuery CDN 引用!DOCTYPE html html langen head meta charsetUTF-8 titleOMDB Infinite Scroll/title script srchttps://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js/script /head body div idmovies/div div idloading styledisplay:none;Loading.../div script // 你的 AJAX 与无限滚动逻辑写在这里 /script /body /html原文档特别强调API 可能返回非常大量的电影因此策略是每次只显示一小批10 部而不是一次性全部渲染——这正是 AJAX 按片段加载能力的典型应用。第 2 步发起第一次 AJAX 请求阅读 OMDB 文档理解请求参数原文档要求你在开始前通读 OMDB 的 API 文档搞清楚如何提交一次电影查询。从课程配套的 API 理论课 working_with_apis.md 可以归纳出通用模式API 通过 URL 访问查询参数决定返回内容多数 API 需要注册账号并申请API key随每次请求附带OMDB 即采用此模式key 通常作为查询参数apikey传入返回的是 JSON 数据包字段结构取决于具体服务。用 jQuery 发请求并渲染借助 jQuery 的便捷方法$.getJSON或等价的$.ajax请求、解析、渲染可以写得很紧凑var page 1; function loadMovies() { $.getJSON(https://www.omdbapi.com/, { s: movie, // 搜索关键词 type: movie, // 限定为电影类型 page: page, // 分页参数控制下一批 10 部 apikey: YOUR_API_KEY // OMDB 申请的 API key }).done(function(data) { if (data.Response True) { data.Search.forEach(function(movie) { $(#movies).append( div classmovieh3 movie.Title /h3 p movie.Year /p img src movie.Poster /div ); }); page; // 加载成功后推进页码 } }).fail(function() { // 网络层面的失败处理 }); } loadMovies();这段代码体现了原文档三个核心要求每次只取 10 部通过 OMDB 的page分页参数实现该 API 默认每页 10 条结果AJAX 异步取数.done()回调在服务器响应到达后才执行渲染页面无需刷新JSON 字段访问电影数据挂在data.Search数组下每部电影含Title、Year、Poster等字段——这正对应 json.md 中从嵌套对象中定位所需数据的训练。第 3 步实现无限滚动无限滚动的本质是把滚动到底部翻译成再加载一批。实现思路监听窗口的scroll事件事件机制可参考配套课 events_effects.md计算当前滚动位置 视口高度 是否已经达到或超过文档总高度满足条件时触发loadMovies()把新一批电影追加到容器底部在请求进行中显示Loading...占位元素请求完成后再隐藏。$(window).on(scroll, function() { var scrollTop $(window).scrollTop(); var windowHeight $(window).height(); var docHeight $(document).height(); // 滚动到接近页面底部时加载下一批 if (scrollTop windowHeight docHeight - 100) { $(#loading).show(); loadMovies().always(function() { $(#loading).hide(); }); } });原文档特别点名了loading... 图标的用途在等待下一批电影返回的空档期给用户明确反馈。对应到配套课 ajax.md 的学习目标这正是用事件监听 AJAX 操作创建加载中通知、加载完成后消失的能力。jQuery 还提供了更优雅的全局 AJAX 事件钩子ajaxStart/ajaxStop可以统一控制加载指示器的显隐而不用在每个请求里手工开关。第 4 步主动破坏它——什么会弄坏无限滚动原文档第 5 步要求Play around with this new scroll. What breaks it?。结合无限滚动的典型实现可以验证并归纳出以下常见缺陷1. 请求风暴重复触发。只要滚动到底部scroll事件就会连续触发多次若不做防抖/节流同一页会被请求好几遍导致电影大量重复。对策用一个isLoading标志位在请求期间阻止新请求。2. 页码失控。如果page被放在渲染之前、或放在请求失败路径上页码与已加载数据会对不上出现跳页或漏页。3. 请求与滚动赛跑。快速滚动到底部又向上滚回时scrollTop windowHeight docHeight的判断可能反复成立/失效若不配合正在加载标志会出现多批数据同时追加。4. API 限流与接口错误。OMDB 等免费 API 对未付费 key 有调用频率限制当搜索无结果时 API 返回{Response:False,Error:...}此时直接访问data.Search会得到undefined——这正好呼应 working_with_apis.md 中非 2XX 响应也是有效响应必须手动检查响应内容的提醒。5. 滚动判断依赖 DOM 高度。无限滚动依赖于document高度随内容增长而增长若容器使用了overflow滚动而不是窗口滚动判断逻辑就要相应改为基于容器元素的尺寸。这些都是面试与真实项目中最常见的异步加载坑值得逐一在浏览器开发者工具中实测验证。现代替代方案用 fetch 与 async/await 重写该旧版课程项目成文于 jQuery 时代但当前仓库的新版 API 课程 working_with_apis.md 与 async_and_await.md 提供了完全等价的现代实现路径可用来重构同一需求let page 1; let isLoading false; async function loadMovies() { if (isLoading) return; isLoading true; document.getElementById(loading).style.display block; try { const response await fetch( https://www.omdbapi.com/?smovietypemoviepage page apikeyYOUR_API_KEY ); const data await response.json(); if (data.Response True) { data.Search.forEach(movie { document.getElementById(movies).insertAdjacentHTML( beforeend, div classmovieh3 movie.Title /h3 p movie.Year /p img src movie.Poster /div ); }); page; } } catch (err) { console.error(请求失败, err); } finally { isLoading false; document.getElementById(loading).style.display none; } } window.addEventListener(scroll, () { if (window.innerHeight window.scrollY document.body.offsetHeight - 100) { loadMovies(); } }); loadMovies();要点对比fetch返回 Promise.then()/.catch()与旧版回调异曲同工async/await则让异步代码读起来像同步代码.catch()捕获不到 HTTP 错误状态404、500 等仍算有效响应必须像旧版检查data.Response一样手动检查响应内容或response.ok——这是新旧两代写法共通的陷阱finally块确保isLoading标志与 loading 指示器无论如何都会被复位天然解决了上文请求风暴问题。交付与验收清单按原文档完成项目后用下面的清单自检可对照仓库中 project_ajax_forms.md 的原始 Assignment页面首次加载即通过 AJAX 展示 10 部电影全程无整页刷新滚动到底部自动追加下一批 10 部且数据不重复、不漏页等待加载期间有Loading...反馈已验证并记录什么会弄坏滚动重复请求、快速滚动、搜索无结果、限流等代码已推送到 GitHub 仓库。旧版课程的完成方式是将你的仓库链接以 Pull Request 形式提交到 Student Solutions 列表下方并在描述中附上搭档的 GitHub 用户名如果有结对编程。此外原文档鼓励在 Additional Resources 中自行补充有价值的延伸阅读作为对社区的反哺——这也是该课程训练主动研究、持续学习的一部分。延伸阅读仓库内相关资源配套理论课ajax.mdAJAX、JSON、jQuery 方法族与全局 AJAX 事件事件与效果events_effects.mdscroll 事件绑定、防抖思想jQuery 引入方式project_js_jquery.md现代 API 调用working_with_apis.md、async_and_await.md数据格式基础json.md【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考