The Odin Project 课程中的 AJAX 实战指南基于 jQuery 的异步数据交互与无限滚动应用【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculumAJAXAsynchronous JavaScript and XML是前端与后端在不刷新页面的前提下交换数据的核心机制。本指南以curriculum仓库旧版 JavaScript 课程中的 ajax.md 为主体结合同课程的 project_ajax_forms.mdOMDB 电影无限滚动项目与相关章节系统讲解 AJAX 的原理、jQuery 的 AJAX 方法族、数据序列化、错误处理、全局事件监听并给出可直接运行的完整示例。学完本指南你将能够用 jQuery 发起异步请求、解析 JSON 响应、处理请求失败并用 AJAX 事件实现加载中提示与无限滚动页面。什么是 AJAX回调驱动的异步数据交换你已经很熟悉回调callback——它们广泛用于浏览器事件处理但在 AJAX 场景下回调是不可或缺的。AJAX 将数据或对数据的请求发送到服务器后端在等待响应期间不会阻塞浏览器执行其他活动。你只需把一个回调函数传给 AJAX 方法当服务器响应最终到达时回调会被触发并把返回的数据作为参数传入程序随之继续执行。AJAX 最大的优势在于它不需要像点击超链接或普通表单提交那样整页刷新。服务器返回的不是完整的 HTML 文档而是一个 JSON 数据包你可以直接在现有页面内处理它。这带来两类关键能力构建单页应用页面内容根据导航位置和返回的数据动态变化全程无需重新加载隐藏慢速网络操作页面可以分块加载用户不会因等待整页渲染而卡住。对应地仓库中 js_to_browser.md 专门讨论了阻塞浏览器blocking the browser的含义以及异步加载脚本对减少用户等待时间的意义——AJAX 正是不阻塞思想在网络请求层面的落地。JSONAJAX 的数据交换格式JSONJavaScript Object Notation是 AJAX 响应最常用的数据格式。它本质上就是 JavaScript 对象/数组的字面量写法因此在前端几乎零成本解析。一次典型的 JSON 响应长这样{ Response: True, Search: [ { Title: The Godfather, Year: 1972, imdbID: tt0068646 }, { Title: The Godfather: Part II, Year: 1974, imdbID: tt0071562 } ], totalResults: 2 }上面的结构正是旧版课程实战项目 project_ajax_forms.md 所使用的 Open Movie DatabaseOMDBAPI 的真实响应形态外层是对象Search是电影数组每条记录包含标题、年份和 IMDb ID。jQuery 收到响应后会自动按Content-Type解析 JSON直接交给回调的是已解析好的对象无需手动JSON.parse当然如果你用原生XMLHttpRequest或fetch解析这一步需要自行处理。关于外部 API 的整体使用流程注册应用、获取 API Key、发起请求可参考 javascript_apis.md其中的 project_apis.mdGoogle Maps 标记项目也是很好的补充练习。jQuery 的 AJAX 方法体系jQuery 围绕 AJAX 提供了一整套方法核心是$.ajax其他都是它的便捷封装。学习路线是先掌握$.ajax的参数模型再理解各快捷方法的适用场景。底层方法$.ajax$.ajax(url, options)是最完整的形态所有细节都通过选项对象控制。常用的核心参数如下参数作用常见取值url请求地址字符串如https://www.omdbapi.com/method/typeHTTP 方法GET、POST等data发送给服务器的数据对象、字符串或已序列化的查询串dataType期望的响应类型json、xml、html、script等success请求成功回调function(data, textStatus, jqXHR)error请求失败回调function(jqXHR, textStatus, errorThrown)complete无论成败都会执行function(jqXHR, textStatus)一次典型的$.ajax调用$.ajax({ url: https://www.omdbapi.com/, method: GET, data: { s: godfather, page: 1, apikey: YOUR_API_KEY }, dataType: json, success: function(data) { if (data.Response True) { renderMovies(data.Search); } else { console.log(未找到结果:, data.Error); } }, error: function(jqXHR, textStatus, errorThrown) { console.error(请求失败:, textStatus, errorThrown); }, complete: function() { hideLoading(); } });注意原始文档中data也可以直接写对象jQuery 会自动将其编码为查询字符串附加到 GET 请求的 URL 后面或放入 POST 请求体。便捷方法convenience methods$.get、$.post、$.getJSON原文档专门要求理解便捷方法有什么用。答案是它们为最常见的场景省去了样板代码是$.ajax的语法糖// GET 请求等价于 $.ajax({ url: url, data: data, method: GET, success: callback }) $.get(url, data, callback); // POST 请求 $.post(url, data, callback); // 明确声明期望 JSON 的 GET 请求 $.getJSON(url, data, callback);例如向 OMDB 查询电影并渲染$.getJSON(https://www.omdbapi.com/, { s: batman, page: 2, apikey: YOUR_API_KEY }, function(data) { data.Search.forEach(function(movie) { $(#movie-list).append(li movie.Title ( movie.Year )/li); }); });选择建议日常读取数据用$.getJSON提交表单用$.post只有需要精细控制如设置超时、自定义请求头、同时处理多种回调时才回到$.ajax。格式化要发送给服务器的数据serialize与 FormData原文档问如何格式化要发送给服务器的数据答案就在 jQuery 的#serialize方法中。当你要用 AJAX 提交整个表单时$(form).serialize()会把所有带name属性的表单字段编码成查询字符串key1value1key2value2可直接作为data传给 AJAX$(form#movie-search).on(submit, function(e) { e.preventDefault(); // 阻止浏览器原生整页提交 var query $(this).serialize(); // 例如 sgodfatherpage1 $.getJSON(https://www.omdbapi.com/, query, function(data) { renderMovies(data.Search); }); });这正是旧版课程 jquery_forms.md 的延续该课先讲解用 jQuery 操作表单选择输入框、实时校验、禁用元素、错误高亮并指出前端校验不足以防御恶意用户本课则进一步把表单数据通过serialize异步提交完成表单 → 后端的闭环。对于包含文件上传的现代场景还可以使用 HTML5 的FormData对象与$.ajax配合时设置processData: false和contentType: false即可。处理服务器返回的数据服务器返回的 JSON 需要在前端落地为页面内容。核心模式是遍历数据结构 → 生成 HTML → 插入 DOM。沿用 jQuery 的链式与隐式遍历能力参考 jq_basics.mdfunction renderMovies(movies) { var $list $(#movie-list).empty(); movies.forEach(function(movie) { $list.append( div classmovie h3 movie.Title /h3 p movie.Year /p img src movie.Poster alt movie.Title 海报 /div ); }); }由于 AJAX 返回的数据是事后才进入页面的事件绑定要注意在 events_effects.md 中强调过的**事件委托delegate**在这里尤为关键——对动态追加的节点应把监听器绑定到其不变的父容器上否则新节点不会响应事件。错误处理不要忽略失败路径网络请求一定会失败健壮代码必须覆盖错误分支。jQuery 的error回调接收jqXHR对象、文本状态如timeout、parsererror和底层异常信息complete回调则无论成败都会触发适合做收尾清理。常见处理策略区分HTTP 层面失败404、500与业务层面失败OMDB 返回Response: False并附带Error字段对业务失败也走用户可见的提示而不只依赖error回调用timeout选项防止请求无限挂起。$.ajax({ url: https://www.omdbapi.com/, method: GET, data: { s: keyword, apikey: YOUR_API_KEY }, dataType: json, timeout: 10000, success: function(data) { if (data.Response False) { showError(data.Error || 未找到匹配的电影); } else { renderMovies(data.Search); } }, error: function(jqXHR, textStatus) { showError(请求失败: textStatus); } });全局 AJAX 事件用ajaxStart/ajaxStop实现加载中提示原文档的最后一个学习目标是用事件监听 AJAX 操作例如创建一条加载完成后自动消失的 loading 提示。jQuery 为此提供了全局 AJAX 事件处理器Global AJAX Event Handlers其中最常用的两个$(document).ajaxStart(fn)任意 AJAX 请求开始时触发$(document).ajaxStop(fn)所有 AJAX 请求全部结束时触发。由于它们在 document 级别监听无论页面上有多少个不同的请求源都能统一控制一条进度提示$(document) .ajaxStart(function() { $(#loading).show(); // 显示加载中...图标 }) .ajaxStop(function() { $(#loading).hide(); // 所有请求完成后隐藏 });这一模式在无限滚动场景下尤其实用每次滚动到底部触发新请求时loading 图标自动出现数据渲染完毕、请求结束图标自动消失无需在每个回调里手动开关。实战OMDB 无限滚动电影页原文档配套的实战项目 project_ajax_forms.md 要求为 Open Movie Database 构建一个无限滚动的电影列表页。该 API 可能返回海量结果因此每次只取 10 部滚动到底部时再加载 10 部追加到页面末尾。下面是整合前述所有知识点的可运行骨架!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleOMDB 无限滚动/title script srchttps://code.jquery.com/jquery-3.6.0.min.js/script style #loading { display: none; text-align: center; padding: 20px; } .movie { border-bottom: 1px solid #ddd; padding: 10px; } /style /head body h1电影无限滚动/h1 div idmovie-list/div div idloading加载中.../div script var page 1; var isLoading false; var API_URL https://www.omdbapi.com/; var KEYWORD star wars; var API_KEY YOUR_API_KEY; // 请替换为你在 OMDB 注册的密钥 function fetchMovies() { if (isLoading) return; // 防止滚动抖动导致重复请求 isLoading true; $.getJSON(API_URL, { s: KEYWORD, page: page, apikey: API_KEY }) .done(function(data) { if (data.Response True) { data.Search.forEach(function(movie) { $(#movie-list).append( div classmovie h3 movie.Title ( movie.Year )/h3 img src movie.Poster alt movie.Title 海报 /div ); }); page 1; // 下一页 } else { $(window).off(scroll); // 没有更多结果停止监听 } }) .fail(function() { console.error(加载电影失败); }) .always(function() { isLoading false; }); } // 全局事件任意 AJAX 开始/结束时统一控制 loading 图标 $(document) .ajaxStart(function() { $(#loading).show(); }) .ajaxStop(function() { $(#loading).hide(); }); // 无限滚动滚动接近底部时加载下一批 $(window).on(scroll, function() { if ($(window).scrollTop() $(window).height() $(document).height() - 100) { fetchMovies(); } }); // 首次加载 fetchMovies(); /script /body /html原项目作业还要求你动手检验玩一玩这个新滚动看看什么会弄坏它常见的坑包括滚动事件在低端设备上触发过密导致重复请求本示例用isLoading标志位防抖图片加载缓慢造成页面高度反复变化API 返回的Poster为N/A时出现破图。思考并修复这些问题正是本练习的核心价值。最后把解决方案推送到 GitHub 仓库提交作业即可。学习自检清单对照原文档的 Learning Outcomes 逐一自查什么是 AJAX——基于回调的异步数据交换不阻塞浏览器什么是 JSON——AJAX 响应的标准数据格式本质是 JS 对象字面量JSON 响应长什么样——如{ Search: [...], totalResults: ... }如何使用基础 JS AJAX 方法——原生XMLHttpRequest或现代fetch如何使用 jQuery 的 AJAX 方法——$.ajax、$.get、$.post、$.getJSON便捷方法如$.post有什么好处——省去样板代码覆盖最常见场景如何格式化发送给服务器的数据——$(form).serialize()或FormData如何处理服务器返回的数据——遍历 JSON 生成 HTML 并插入 DOM如何处理过程中的错误——error/fail回调 业务层Response判断 complete兜底如何用事件监听 AJAX 操作——$(document).ajaxStart()/.ajaxStop()控制 loading 提示。若想继续深入仓库还提供了相邻主题的课程文件project_ajax_forms.md本课实战、jquery_forms.mdAJAX 提交前的表单操作、events_effects.md事件委托与效果、js_to_browser.md脚本异步加载、javascript_apis.md 与 project_apis.md外部 API 的综合运用。掌握 AJAX你就掌握了把后端数据无缝接入前端页面的钥匙也为后续接触fetch、React 数据获取等现代方案打下了概念基础。【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
The Odin Project 课程中的 AJAX 实战指南：基于 jQuery 的异步数据交互与无限滚动应用
The Odin Project 课程中的 AJAX 实战指南基于 jQuery 的异步数据交互与无限滚动应用【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculumAJAXAsynchronous JavaScript and XML是前端与后端在不刷新页面的前提下交换数据的核心机制。本指南以curriculum仓库旧版 JavaScript 课程中的 ajax.md 为主体结合同课程的 project_ajax_forms.mdOMDB 电影无限滚动项目与相关章节系统讲解 AJAX 的原理、jQuery 的 AJAX 方法族、数据序列化、错误处理、全局事件监听并给出可直接运行的完整示例。学完本指南你将能够用 jQuery 发起异步请求、解析 JSON 响应、处理请求失败并用 AJAX 事件实现加载中提示与无限滚动页面。什么是 AJAX回调驱动的异步数据交换你已经很熟悉回调callback——它们广泛用于浏览器事件处理但在 AJAX 场景下回调是不可或缺的。AJAX 将数据或对数据的请求发送到服务器后端在等待响应期间不会阻塞浏览器执行其他活动。你只需把一个回调函数传给 AJAX 方法当服务器响应最终到达时回调会被触发并把返回的数据作为参数传入程序随之继续执行。AJAX 最大的优势在于它不需要像点击超链接或普通表单提交那样整页刷新。服务器返回的不是完整的 HTML 文档而是一个 JSON 数据包你可以直接在现有页面内处理它。这带来两类关键能力构建单页应用页面内容根据导航位置和返回的数据动态变化全程无需重新加载隐藏慢速网络操作页面可以分块加载用户不会因等待整页渲染而卡住。对应地仓库中 js_to_browser.md 专门讨论了阻塞浏览器blocking the browser的含义以及异步加载脚本对减少用户等待时间的意义——AJAX 正是不阻塞思想在网络请求层面的落地。JSONAJAX 的数据交换格式JSONJavaScript Object Notation是 AJAX 响应最常用的数据格式。它本质上就是 JavaScript 对象/数组的字面量写法因此在前端几乎零成本解析。一次典型的 JSON 响应长这样{ Response: True, Search: [ { Title: The Godfather, Year: 1972, imdbID: tt0068646 }, { Title: The Godfather: Part II, Year: 1974, imdbID: tt0071562 } ], totalResults: 2 }上面的结构正是旧版课程实战项目 project_ajax_forms.md 所使用的 Open Movie DatabaseOMDBAPI 的真实响应形态外层是对象Search是电影数组每条记录包含标题、年份和 IMDb ID。jQuery 收到响应后会自动按Content-Type解析 JSON直接交给回调的是已解析好的对象无需手动JSON.parse当然如果你用原生XMLHttpRequest或fetch解析这一步需要自行处理。关于外部 API 的整体使用流程注册应用、获取 API Key、发起请求可参考 javascript_apis.md其中的 project_apis.mdGoogle Maps 标记项目也是很好的补充练习。jQuery 的 AJAX 方法体系jQuery 围绕 AJAX 提供了一整套方法核心是$.ajax其他都是它的便捷封装。学习路线是先掌握$.ajax的参数模型再理解各快捷方法的适用场景。底层方法$.ajax$.ajax(url, options)是最完整的形态所有细节都通过选项对象控制。常用的核心参数如下参数作用常见取值url请求地址字符串如https://www.omdbapi.com/method/typeHTTP 方法GET、POST等data发送给服务器的数据对象、字符串或已序列化的查询串dataType期望的响应类型json、xml、html、script等success请求成功回调function(data, textStatus, jqXHR)error请求失败回调function(jqXHR, textStatus, errorThrown)complete无论成败都会执行function(jqXHR, textStatus)一次典型的$.ajax调用$.ajax({ url: https://www.omdbapi.com/, method: GET, data: { s: godfather, page: 1, apikey: YOUR_API_KEY }, dataType: json, success: function(data) { if (data.Response True) { renderMovies(data.Search); } else { console.log(未找到结果:, data.Error); } }, error: function(jqXHR, textStatus, errorThrown) { console.error(请求失败:, textStatus, errorThrown); }, complete: function() { hideLoading(); } });注意原始文档中data也可以直接写对象jQuery 会自动将其编码为查询字符串附加到 GET 请求的 URL 后面或放入 POST 请求体。便捷方法convenience methods$.get、$.post、$.getJSON原文档专门要求理解便捷方法有什么用。答案是它们为最常见的场景省去了样板代码是$.ajax的语法糖// GET 请求等价于 $.ajax({ url: url, data: data, method: GET, success: callback }) $.get(url, data, callback); // POST 请求 $.post(url, data, callback); // 明确声明期望 JSON 的 GET 请求 $.getJSON(url, data, callback);例如向 OMDB 查询电影并渲染$.getJSON(https://www.omdbapi.com/, { s: batman, page: 2, apikey: YOUR_API_KEY }, function(data) { data.Search.forEach(function(movie) { $(#movie-list).append(li movie.Title ( movie.Year )/li); }); });选择建议日常读取数据用$.getJSON提交表单用$.post只有需要精细控制如设置超时、自定义请求头、同时处理多种回调时才回到$.ajax。格式化要发送给服务器的数据serialize与 FormData原文档问如何格式化要发送给服务器的数据答案就在 jQuery 的#serialize方法中。当你要用 AJAX 提交整个表单时$(form).serialize()会把所有带name属性的表单字段编码成查询字符串key1value1key2value2可直接作为data传给 AJAX$(form#movie-search).on(submit, function(e) { e.preventDefault(); // 阻止浏览器原生整页提交 var query $(this).serialize(); // 例如 sgodfatherpage1 $.getJSON(https://www.omdbapi.com/, query, function(data) { renderMovies(data.Search); }); });这正是旧版课程 jquery_forms.md 的延续该课先讲解用 jQuery 操作表单选择输入框、实时校验、禁用元素、错误高亮并指出前端校验不足以防御恶意用户本课则进一步把表单数据通过serialize异步提交完成表单 → 后端的闭环。对于包含文件上传的现代场景还可以使用 HTML5 的FormData对象与$.ajax配合时设置processData: false和contentType: false即可。处理服务器返回的数据服务器返回的 JSON 需要在前端落地为页面内容。核心模式是遍历数据结构 → 生成 HTML → 插入 DOM。沿用 jQuery 的链式与隐式遍历能力参考 jq_basics.mdfunction renderMovies(movies) { var $list $(#movie-list).empty(); movies.forEach(function(movie) { $list.append( div classmovie h3 movie.Title /h3 p movie.Year /p img src movie.Poster alt movie.Title 海报 /div ); }); }由于 AJAX 返回的数据是事后才进入页面的事件绑定要注意在 events_effects.md 中强调过的**事件委托delegate**在这里尤为关键——对动态追加的节点应把监听器绑定到其不变的父容器上否则新节点不会响应事件。错误处理不要忽略失败路径网络请求一定会失败健壮代码必须覆盖错误分支。jQuery 的error回调接收jqXHR对象、文本状态如timeout、parsererror和底层异常信息complete回调则无论成败都会触发适合做收尾清理。常见处理策略区分HTTP 层面失败404、500与业务层面失败OMDB 返回Response: False并附带Error字段对业务失败也走用户可见的提示而不只依赖error回调用timeout选项防止请求无限挂起。$.ajax({ url: https://www.omdbapi.com/, method: GET, data: { s: keyword, apikey: YOUR_API_KEY }, dataType: json, timeout: 10000, success: function(data) { if (data.Response False) { showError(data.Error || 未找到匹配的电影); } else { renderMovies(data.Search); } }, error: function(jqXHR, textStatus) { showError(请求失败: textStatus); } });全局 AJAX 事件用ajaxStart/ajaxStop实现加载中提示原文档的最后一个学习目标是用事件监听 AJAX 操作例如创建一条加载完成后自动消失的 loading 提示。jQuery 为此提供了全局 AJAX 事件处理器Global AJAX Event Handlers其中最常用的两个$(document).ajaxStart(fn)任意 AJAX 请求开始时触发$(document).ajaxStop(fn)所有 AJAX 请求全部结束时触发。由于它们在 document 级别监听无论页面上有多少个不同的请求源都能统一控制一条进度提示$(document) .ajaxStart(function() { $(#loading).show(); // 显示加载中...图标 }) .ajaxStop(function() { $(#loading).hide(); // 所有请求完成后隐藏 });这一模式在无限滚动场景下尤其实用每次滚动到底部触发新请求时loading 图标自动出现数据渲染完毕、请求结束图标自动消失无需在每个回调里手动开关。实战OMDB 无限滚动电影页原文档配套的实战项目 project_ajax_forms.md 要求为 Open Movie Database 构建一个无限滚动的电影列表页。该 API 可能返回海量结果因此每次只取 10 部滚动到底部时再加载 10 部追加到页面末尾。下面是整合前述所有知识点的可运行骨架!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleOMDB 无限滚动/title script srchttps://code.jquery.com/jquery-3.6.0.min.js/script style #loading { display: none; text-align: center; padding: 20px; } .movie { border-bottom: 1px solid #ddd; padding: 10px; } /style /head body h1电影无限滚动/h1 div idmovie-list/div div idloading加载中.../div script var page 1; var isLoading false; var API_URL https://www.omdbapi.com/; var KEYWORD star wars; var API_KEY YOUR_API_KEY; // 请替换为你在 OMDB 注册的密钥 function fetchMovies() { if (isLoading) return; // 防止滚动抖动导致重复请求 isLoading true; $.getJSON(API_URL, { s: KEYWORD, page: page, apikey: API_KEY }) .done(function(data) { if (data.Response True) { data.Search.forEach(function(movie) { $(#movie-list).append( div classmovie h3 movie.Title ( movie.Year )/h3 img src movie.Poster alt movie.Title 海报 /div ); }); page 1; // 下一页 } else { $(window).off(scroll); // 没有更多结果停止监听 } }) .fail(function() { console.error(加载电影失败); }) .always(function() { isLoading false; }); } // 全局事件任意 AJAX 开始/结束时统一控制 loading 图标 $(document) .ajaxStart(function() { $(#loading).show(); }) .ajaxStop(function() { $(#loading).hide(); }); // 无限滚动滚动接近底部时加载下一批 $(window).on(scroll, function() { if ($(window).scrollTop() $(window).height() $(document).height() - 100) { fetchMovies(); } }); // 首次加载 fetchMovies(); /script /body /html原项目作业还要求你动手检验玩一玩这个新滚动看看什么会弄坏它常见的坑包括滚动事件在低端设备上触发过密导致重复请求本示例用isLoading标志位防抖图片加载缓慢造成页面高度反复变化API 返回的Poster为N/A时出现破图。思考并修复这些问题正是本练习的核心价值。最后把解决方案推送到 GitHub 仓库提交作业即可。学习自检清单对照原文档的 Learning Outcomes 逐一自查什么是 AJAX——基于回调的异步数据交换不阻塞浏览器什么是 JSON——AJAX 响应的标准数据格式本质是 JS 对象字面量JSON 响应长什么样——如{ Search: [...], totalResults: ... }如何使用基础 JS AJAX 方法——原生XMLHttpRequest或现代fetch如何使用 jQuery 的 AJAX 方法——$.ajax、$.get、$.post、$.getJSON便捷方法如$.post有什么好处——省去样板代码覆盖最常见场景如何格式化发送给服务器的数据——$(form).serialize()或FormData如何处理服务器返回的数据——遍历 JSON 生成 HTML 并插入 DOM如何处理过程中的错误——error/fail回调 业务层Response判断 complete兜底如何用事件监听 AJAX 操作——$(document).ajaxStart()/.ajaxStop()控制 loading 提示。若想继续深入仓库还提供了相邻主题的课程文件project_ajax_forms.md本课实战、jquery_forms.mdAJAX 提交前的表单操作、events_effects.md事件委托与效果、js_to_browser.md脚本异步加载、javascript_apis.md 与 project_apis.md外部 API 的综合运用。掌握 AJAX你就掌握了把后端数据无缝接入前端页面的钥匙也为后续接触fetch、React 数据获取等现代方案打下了概念基础。【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
