Do I understand Ajax correctly?

Question

I'm been reading up on Ajax and would like to see from the Stack Overflow community if I'm understanding everything correctly.

So the normal client server interaction is a user pulls up a web browser types in a URL and a HTTP request is sent to the server requesting the page and resources (CSS, pics) from the web server. The web server responds to the client via HTTP the page/resources requested and the browser renders the HTML/JavaScript for the user to view the page.

1. So would it be safe to say that XMLHttpRequest (XHR) object is doing the same process as the browser except your not requesting HTML from the server, you're requesting text in some type of format?

2. Is it true that a XHR object is much like a regular object that can be manipulated by the program creating the object (like a normal object), but also sends and receives data with another program (web server) via HTTP?

3. So in my mind when a XHR is created it is loaded into memory and we setup some of the objects arguments when we do the request.open(“GET”, url, true). Once we do a request.send(null) the object basically attempts to “GET” the URL via HTTP and once we get the data back from the server it is put in the responseText argument. Am I understanding this correctly?

4. Also synchronous vs asynchronous. When I think of synchronous I think of steps having to be followed in order. For example, I push a button, data gets sent to server, and I have to wait for data to come back before I can do anything else. With asynchronous connections I would push button, data gets sent to server, I do whatever I want while data gets sent back. Is this a good analogy?

Answer 1

Here I leave you a good graphic to see clearly the behavior differences between the synchronous and asynchronous application models:

_{(source: adaptivepath.com)}

Answer 2

1) Nope. The XMLHttpRequest object does exactly what its name implies -- it initiates an HTTP request. This request can be in XML, or HTML, or PHP. At the end of the day, the browser doesn't care, because in an AJAX request, it doesn't parse the request -- you have to do it yourself. So it doesn't automatically render the HTML from an AJAX request.

2) I'm not sure about manipulation (the XHR object may be immutable) but possibly. Would you ever need to extend it or manipulate it? Yes, you can change properties of the object and so on. I apologize. I didn't understand you at first :)

3) Yep.

4) That's a great analogy. It's exactly what happens. Another analogy is a 4 lane highway is to asynchronous as a one-way street is to synchronous. If one car breaks down on the 4 lane highway, the rest can keep moving at their normal speed -- but if one breaks down on the one-way road, everything freezes. :)

Answer 3

Seems ok to me.

Your first point though is not entirely correct, you can request html from the server using ajax is doesn't have to text, json or xml like most examples show.

Answer 4

It would appear that you have a job grasp of how AJAX works. I can't see much to disagree with in your summary of the plumbing of an AJAX application.

I would say however that with the XMLHttpRequest object you aren't restricted to GET. You can also use POST and other HTTP verbs.

With async calls you register a callback function, the XMLHttpRequest object calls your method when the async request completes.