Vanilla JavaScript: Ajax and Fetch

Vanilla JavaScript: Ajax and Fetch

English | MP4 | AVC 1280Ă—720 | AAC 48KHz 2ch | 2h 46m | 612 MB

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 and XMLHttpRequest (XHR) APIs, so you can see how Ajax is implemented in different codebases. He also shows how to optimize Ajax requests and responses within the browser, modify webpage content through the DOM, and handle any errors that result. Plus, learn how to move your API keys out of front end code and onto a proxy server to keep them secure.

Topics include:

  • Building an XHR request
  • Selecting elements with vanilla JavaScript
  • Requesting data with Ajax
  • Adding event listeners
  • Working with JSON data
  • Modifying webpage values and content
  • Creating Fetch requests
  • Handling Ajax errors
  • Deploying an Ajax proxy server
  • Hiding API keys with an Ajax proxy
Table of Contents

Introduction
1 Creating and working with API requests
2 Setting up your environment

Getting Started
3 What is Ajax
4 Understand asynchronous program flow
5 Get an API key
6 Research and create an Ajax request URL
7 Create an XHR request
8 Test an XHR request
9 Handle XHR success and failure
10 Challenge Build an XHR request
11 Solution Build an XHR request

Modifying the DOM
12 What is the DOM
13 Select elements with vanilla JavaScript
14 Request data in response to an event
15 Add an event listener
16 Work with JSON data
17 Modify form values with vanilla JavaScript
18 Modify element content with vanilla JavaScript
19 Challenge Modify the DOM
20 Solution Modify the DOM

Working with the Fetch API
21 Understand the Fetch API
22 Create a fetch request
23 Handle basic fetch errors
24 Customize a fetch request

Optimizing and Troubleshooting Ajax Requests
25 Structure Ajax requests for performance
26 View requests and responses in the browser
27 Work with authorization errors
28 Work with malformed requests
29 Work with errors in Fetch
30 Provide error fallbacks
31 Challenge Fix an Ajax request
32 Solution Fix an Ajax request

Building a Proxy Server to Hide API Keys
33 Why are proxy servers necessary
34 Tools Git, GitHub, and Heroku
35 Set up an app on Heroku
36 Configure proxy options
37 Deploy and test a proxy
38 Configure proxy security
39 Challenge Customize code for an Ajax proxy
40 Solution Customize code for an Ajax proxy

Conclusion
41 Next steps