JavaScript and AJAX: Integration Techniques

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.

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