Learn AJAX: Part 2
The universally supported base API for AJAX is called
XMLHttpRequest(). We often shorten that to
XHR. It is so very much harder for AJAX newcomers to grasp, mostly because the many parts of the HTTP request get separated out into separate pieces of the XHR. If you mess up any of those parts, you won’t have your data. People want their data. People should read this blog.
This is Part 2 of a tutorial on the basics of AJAX, for beginners. You might want to start at Part 1 if you haven’t already.
Disclaimer! This article is for beginners, but it does assume a basic knowledge of HTTP’s structure. If you know the meaning of GET and POST, read on! Otherwise, I highly recommend going straight to the Wikipedia source and boning up.
While I do expect you to know what HTTP requests are, I’m not expecting you to be familiar with our forefathers and their seminal work on making HTTP requests by hand with web servers. You are not (yet) that server gal 🧛♀️. You are not (yet) Richmond.
cURL is Really Capitalized Like That
In the beginning, there was a thing called cURL. It underpins a lot of HTTP requests from languages like PHP. It still exists, and it’s used in many places. Part of it is worth explaining here, but the rest can always be found here.
cURL is cool because it’s a playground for talking to the internet without a GUI. It can be used as a command line tool, and it lets you build custom HTTP requests from your terminal! cURL is a good place to learn about HTTP, which you already know, right? I hope so.
For each section of an HTTP request, cURL has an option. There are naturally many options. They are grouped by type, like
ports. There are many defaults, but it’s common to need to set more than one of these before executing the actual request. It’s similar in XHR.
But First, You Must Instantiate!
XMLHttpRequest() cookie cutter and stamp out a new Object.
Tell It What You Want
The next part of a POST request will often require specific headers. It’s possible and common to use these headers to set encoded OAuth keys and values into the request to open up gateways with APIs. It’s also common to use headers to define your data. You know, normal HTTP header things go here. Naturally, this must always be done after you
.open() your request and before you
Make It An Event
Your response is now today years old! But what happens when it grows up, travels the world, and returns home? You can set your event handler next, with any callbacks you need.
Wrap Things Up
All that to send some
formData. If you recall from Part 1, we were attempting to AJAX this wee little form:
Of course you’re welcome to send any sort of data string you please via HTTP. With the
URLSearchParams() API you can even transform JSON and JS Objects into useful parameters.
Whatever happens, you’re now ready to send that little form’s contents out into the big, big world. Give it the boot with
.send(). If this were a GET request,
.send() would accept the parameters on the url you’re looking to pull from. It can also accept
Examples of XHR with GET and POST
A Short Rant
This was the way I think you should learn about XHR. After jQuery, and before Fetch and Axios.
On the other hand, this is how Mozilla thinks you should learn XHR. There are no base examples, only a long list of properties and methods. Navigating to Using XHR is a real doozy. It contains no single example of a POST request, but instead jumps off on a multi-section tangent about recreating native form submissions. I usually highly recommend the Moz Docs, but in this case you should approach with caution.