Intro to Ajax & XHR

• Intro to Ajax & XHR
  • Synchronous Code
  • Asynchronous Code
  • Most Async code you work with will be part of an API or Library
  • A few ways to work with Async code
  • Ajax "Asynchronous Javascript & XML"
  • XmlHttpRequest XHR Object
  • Libraries and Other Methods

Synchronous Code

posts = loadPostsSync()
// ... wait til posts are fetched
// ... do something with posts

doTheNextThing() // Has to wait until posts load

Asynchronous Code

loadPostsAsync(function () {
  // ... wait til posts are fetched
  // ... do something with posts
})

doTheNextThing() // Doesn't have to wait until posts load

Most Async code you work with will be part of an API or Library

• XMLHttpRequest & Fetch
• jQuery Ajax, Axios, other HTTP Libraries
• Node.js fs (filesystem) module

A few ways to work with Async code

• Callbacks
• Promises (ES6/ES2015)
• Async/Await

Ajax ("Asynchronous Javascript & XML")

• Set of web technologies
• Send & receive data asynchronously
• Does not interfere with current page
• JSON has replaced XML for the most part
  • Ajax engine sits between the server and the client as a middleman
  • Client sends JS calls to Ajax Engine
  • Ajax Engine returns HTML response to client
  • Ajax Engine sends XmlHttpRequest to Server
  • Server returns XML/JSON
• Makes async requests in the background
• No page reload/refresh needed
• Fetches data
• Very interactive

XmlHttpRequest (XHR) Object

• Core tech in Ajax
• API in the form of an object
• Provided by the browser's JS environment
• Methods transfer data between client & server
• Can be used with other protocols than HTTP
• Can work with data other than XML (JSON, plain text)
  • *Nowadays we mostly just work with JSON data

Libraries and Other Methods

• Fetch API (part of vanilla JS)
• Axios (external library)
• Superagent (external library)
• jQuery (not recommended if just using it for Ajax. jQuery is a complete DOM manipulation library, which is very bloated for just Ajax)
• Node HTTP (good if using Node.js)