Vanilla JavaScript: Ajax and Fetch

Vanilla JavaScript: Ajax and Fetch

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


  • 英文名称:Vanilla JavaScript: Ajax and Fetch
  • 时长:2小时46分
  • 字幕:英语


  1. Creating and working with API requests
  2. Setting up your environment
  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
  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
  21. Understand the Fetch API
  22. Create a fetch request
  23. Handle basic fetch errors
  24. Customize a fetch request
  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
  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
  41. Next steps