xhr for dummies

gistfile1.md

So, you want to send a motherfucking XMLHttpRequest (XHR, or commonly and falsly known as AJAX.) Too bad, just ran out of motherfucking XMLHttpRequests; but I still have one regular. XHR is not magic. It does not autofuckinmagically send things the way you want them do be sent. It does not do the thinking for you. It just sends an Http Request.

You get a hold on such a prime beast like this:

var xhr = new XMLHttpRequest();

It's different in IE6-. But I don't give a fuck about IE6. If you do, then google it. Congrats, you're on your way to AwesomeVille. Step 1, getting the car, complete. Bitchin ride. I heard the flames make it go faster. Your car's smart, though, so just tell it how and where to go, otherwise known as Step 10:

xhr.open( method, url );

Your car knows how to GET, POST, DELETE, HEAD, OPTIONS and PUT. No, you don't need to know all of them (you fucking well should), but usually just GET or POST will do. Here, I wrote the coordinates down for you:

xhr.open( 'GET', 'awesome.ville' );

(See "Tonsil A: open" for more rants, if I can be fucked to write it. Why not Appendix? I wanted an original unnecessary organ.)

Here's the part where you set up the gear. Your ride needs pimpin. Luckily, it has event handlers. The most important one you'll care about is readystatechange. You can skip this step, also known as Step 11:

xhr.onreadystatechange = function () {
    //when xhr.readyState === 4, it was received by the server
	if ( xhr.readyState === 4 ) {
	    //do shit, preferabbly call a callback or some other crap
		//xhr.status has the status code. I bet you didn't see that coming.
		//xhr.responseText includes the raw response
		//xhr.responseXML is a DOM object if you requested an XML doc
	}
};

And a very crucial point: Gas. It's important to know if you run on diesel or not. Luckily, we have request headers, in the glorious step 100:

xhr.setRequestHeader( headerName, headerValue );
//or, hardcoded to nearly every fucking need your pathetic ass will ever
// encounter:
xhr.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );

Now, ride, motherfucker! Ride into the horizon, Step 101!

xhr.send();

Say what? You wanna sent data to the server? ...Fine. Ruin my analogy. If you've ever taken the time to get up from your smelly sofa and actually look at how HTTP reuqest bodies look, then you'll know they look like this:

key0=value0&key1=value1

And every key and every value are, of course, URI encoded. Here's a stupid example:

xhr.send( 'tifa\'sBoobs=huge&your%20mother=insulted' );

Which translated to, surprise, tifasBoobs=huge and your mother=insulted.

In conclusion:

//step 1
var xhr = new XMLHttpRequest();
//step 10
xhr.open( method, url );
//step 11
xhr.onreadystatechange = function () { ... };
//step 100
xhr.setRequestHeader( ..., ... );
//repeat step 100 until obtained all secret desires
//step 101
xhr.send( optionalEncodedData );

Here are some motherfucking references:

• http://www.w3.org/TR/XMLHttpRequest/
• https://developer.mozilla.org/en/AJAX/Getting_Started (note: XHR support was added in IE7, the first section lies)
• https://developer.mozilla.org/en/using_xmlhttprequest
• http://en.wikipedia.org/wiki/XMLHttpRequest#HTTP_request