DEV Community

Cover image for Intro to Ajax & XHR
Connor Dillon
Connor Dillon

Posted on

4 1

Intro to Ajax & XHR

Synchronous Code

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

doTheNextThing() // Has to wait until posts load
Enter fullscreen mode Exit fullscreen mode

Asynchronous Code

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

doTheNextThing() // Doesn't have to wait until posts load
Enter fullscreen mode Exit fullscreen mode

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)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay