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)
Top comments (0)