Vanilla JavaScript: Ajax and Fetch

Ajax is the backbone of high-performance web apps. Learn how to use vanilla JavaScript, Ajax, and APIs like Fetch and XHR to request and handle data and modify webpage content.

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.

Introduction

• Creating and working with API requests
• Setting up your environment

1. Getting Started

• What is Ajax?
• Understand asynchronous program flow
• Get an API key
• Research and create an Ajax request URL
• Create an XHR request
• Test an XHR request
• Handle XHR success and failure
• Challenge: Build an XHR request
• Solution: Build an XHR request

2. Modifying the DOM

• What is the DOM?
• Select elements with vanilla JavaScript
• Request data in response to an event
• Add an event listener
• Work with JSON data
• Modify form values with vanilla JavaScript
• Modify element content with vanilla JavaScript
• Challenge: Modify the DOM
• Solution: Modify the DOM

3. Working with the Fetch API

• Understand the Fetch API
• Create a fetch request
• Handle basic fetch errors
• Customize a fetch request

4. Optimizing and Troubleshooting Ajax Requests

• Structure Ajax requests for performance
• View requests and responses in the browser
• Work with authorization errors
• Work with malformed requests
• Work with errors in Fetch
• Provide error fallbacks
• Challenge: Fix an Ajax request
• Solution: Fix an Ajax request

5. Building a Proxy Server to Hide API Keys

• Why are proxy servers necessary?
• Tools: Git, GitHub, and Heroku
• Set up an app on Heroku
• Configure proxy options
• Deploy and test a proxy
• Configure proxy security
• Challenge: Customize code for an Ajax proxy
• Solution: Customize code for an Ajax proxy

Conclusion

• Next steps