JavaScript: Ajax and Fetch
2h 22mIntermediate2024-09-25
Authors
Sasha Vodnik
Principal Technical Course Developer at DocuSign
Course details
Ajax is a building block of the modern web. Ajax helps you communicate between your app and the server, and incorporate new content without reloading webpages—resulting in more interactive and high-performance apps. This course introduces both modern and legacy approaches for requesting and handling data and modifying webpage content with Ajax and vanilla JavaScript. JS expert Sasha Vodnik shows how to work with the Fetch APIs, so you can see how Ajax is implemented across a codebase. Along the way, learn how to optimize Ajax requests and responses within the browser, modify webpage content through the DOM, work with Axios library, and troubleshoot Ajax requests as they arise.
Skills covered
E-Commerce DevelopmentEcma InternationalJavaScriptWeb Development ToolsWeb DevelopmentProgramming LanguagesSoftware DevelopmentDeep Dive (X:Y)
Concepts
0. Introduction
- 01 - Your essential guide
- 02 - What you should know
- 03 - Setting up your environment
1. Getting Started with AJAX
- 04 - What is AJAX
- 05 - Understand asynchronous program flow
- 06 - Get an API key
- 07 - Research and create an AJAX request URL
- 08 - Challenge - Research an API and create a request URL
- 09 - Solution - Research an API and create a request URL
2. Working with the Fetch API
- 10 - Understand the Fetch API
- 11 - Create and test a Fetch request
- 12 - Handle basic Fetch errors
- 13 - Challenge - Build a Fetch request
- 14 - Solution - Build a Fetch request
3. Modifying the DOM
- 15 - What is the DOM
- 16 - Select elements with vanilla JavaScript
- 17 - Request data in response to an event
- 18 - Add an event listener
- 19 - Work with JSON data
- 20 - Modify form values with vanilla JavaScript
- 21 - Modify element content with vanilla JavaScript
- 22 - Challenge - Modify the DOM
- 23 - Solution - Modify the DOM
4. Working with the Axios Library
- 24 - Understand Axios
- 25 - Create an Axios request
- 26 - Handle errors with Axios
- 27 - Refactor parameters with Axios
- 28 - Implement interceptors with Axios
- 29 - Challenge - Build an Axios request
- 30 - Solution - Build an Axios request
5. Optimizing and Troubleshooting AJAX Requests
- 31 - Structure AJAX requests for performance
- 32 - View requests and responses in the browser
- 33 - Work with authorization errors
- 34 - Work with malformed requests
- 35 - Work with errors in Fetch
- 36 - Provide error fallbacks
- 37 - Challenge - Fix an AJAX request
- 38 - Solution - Fix an AJAX request
Conclusion
- 39 - Keep learning