Quick (simplified) explanation of how Ajax works

Ajax seems all jacked up. It goes against the one thing we know for sure as beginning web developers: mainly, that a page needs to load/re-load in a browser for new content to show up.

Updated your page html? Refresh.

Changed some CSS? Refresh.

Submitting form data to a database? It’s gotta go through the server, so that page either needs to submit to itself or another processing page.

In all cases, a page being displayed by a browser needs to reach out to the server to retrieve the pages of code that you, the developer, have put there.

Ajax creates a secret tunnel from the browser to the server

Something like that, anyway. Think of your website as the US and the server as Mexico. You want to get some delicious, blow-your-mind tacos al pastor but it’s really annoying having to go through the hassle of customs and dealing with border patrol. It’s really disruptive to your taco enjoyment, just like a page reload can be disruptive to your enjoyment of a website. You want your tacos without hassle so you build a tunnel under the border. I request tacos through the tunnel, the tacos come back to me through the tunnel. Now tacos come and go without without having to wait at customs (browser refresh), nobody at the border is any the wiser and everyone gets what they want without delay. (I really want to eat some tacos right now.)

Anyway, that’s a convoluted analogy to say: Using Ajax, your browser still needs to retrieve page content from the server, it just does it secretly (it exchanges information from the browser to the server without a page reload). It does this using javascript.

Here’s the key

You know how javascript and jQuery can change elements on a page? Think of a FAQ accordion menus where you click the question, and the page magically expands to reveal text. That’s an example of how well Javascript can manipulate objects in the DOM. With that in mind, think that now, instead of expanding or changing elements on a page, those same ‘real-time’ capabilities take content from a page and send it to the server behind the scenes (or through the tunnel, so to speak), as easily as they would reveal text or display a pop-up menu.

Now, javascript/jQuery is sending/receiving info from the server and able to display it on the webpage using the same capabilities you’re already familiar with.

I’m no expert in this by any means. It’s just that Ajax has seemed like some kind of voodoo magic to me for years until I just found a tutorial and tried it out. Now, it kind of makes sense to me how it works. There’s still plenty more to learn, but it’s exciting when the curtain is pulled back and I can comprehend what I find behind it.

Leave a Reply

Your email address will not be published. Required fields are marked *