javascriptajax

Do I understand Ajax correctly?

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?

Solution

  • 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. :)