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.
Overview
Syllabus
Introduction
- Creating and working with API requests
- Setting up your environment
- 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
- 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
- Understand the Fetch API
- Create a fetch request
- Handle basic fetch errors
- Customize a fetch request
- 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
- 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
- Next steps
Taught by
Sasha Vodnik