JavaScript AJAX Basics (retiring) AJAX Concepts A Simple AJAX Example

Need some clarification on the whole ajax process.

so im gonna break this down into steps and someone tell me if i got something wrong.

so for step 1: We call the XML request method. The request method is used for starting ajax for a request and how many times you want to use ajax you will start from here.

 var xhr = new XMLHttpRequest();

Step 2 :

then we do a callback function as for what to do with the information we got back from sending the request. now as for the onreadystatechange property i dont quite get it but what i understood is that. if there's any sort of activity on the page with the ajax elements. this defines what should happen at what state. i checked google and there are 0 1 2 3 4 and some others so 4 is for when everythings done and ajax has a response. so this wont fire right away because "4" hasn't been done yet.

now as for the xhr.responseText; what is the response? and it returns backs only html elements/text?

xhr.onreadystatechange = function (){
    if (xhr.readyState === 4){
     document.getElementById('ajax').innerHTML = xhr.responseText; 
    }
    };

now the 3rd Step: you open the request.

i take opening as in that you prepare a request ready to be opened by the server or ajax vice visra. and we are saying that

    xhr.open('GET', 'sidebar.html');

this means that Get or requesting everything sidebar.html has in it? now it could be images correct? and this value that we "GET" from "sidebar.html" we access it via xhr.responseText and store it in step 2. But the step 2 runs in the last. when everything is done.

Step 4 :

xhr.send();

is simple for executing the whole process.

i want to be sure of my concepts that why im making sure i don't keep moving ahead with a false concept. First time ever seeing ajax so kinda have to make sure. i appreciate all the answers. thank you

Steven Parker take a look at this please.

Steven Parker
Steven Parker
176,603 Points

:mailbox_with_mail: I got your request, but it looks like Cooper beat me to it.

Once you learn how to do AJAX with jQuery, you'll probably never think about using XMLHttpRequest again.

no worries steven better luck next time lol

3 Answers

Cooper Runstein
Cooper Runstein
11,788 Points

For where you are in the course, you have a solid enough understanding to move on and as you see and try more things, you'll gain a better understanding. To clarify though, an AJAX call will most likely not just return plain text that you can set to html. You'll normally be working with JSON or XML which are much more common. This means that your onreadystatechange, which is just how you set what happens when the readyState attribute changes, will do things like transforming data and turning it into something that the viewer can see. Really though you should keep going, this method is just one way to do AJAX, once you learn how to use it with JQuery, and Fetch, you'll end up having a much clearer understanding.

This example is also annoyingly confusing, partially because often times you'll be working with AJAX to contact an external API, which to someone that's new to this makes a lot more sense as to how this works in the "real world" than just fetching an html file.

Thanks a lot for the response. i'll keep moving forward into the course. yeah you are right if you experiment you learn more. tho thanks for clearing stuff for me i can move on now without any worries. Cheers!

But, I have a doubt:

As Saud describes the first step - "We call the XML request method..."

However, if I understand the basic AJAX correctly, isn't the first step about creating an XMLHttpRequest object? And surely creating an object is different than calling a method. Right?

I'm still new to JavaScript and not too experienced a programmer either, so I'm not assuming anything, but the way I've got the concepts put together in my head is:

  1. There is a class - a generic skeleton that contains properties and constructor method to spawn objects - animal is a class
  2. There is an object - a specific instance of a class that inherits the properties from class, but can have values unique to that instance/itself - a dog is an animal
  3. Objects have properties and attributes - Properties is as mentioned above. Then you can set specific value to a given property. You can use methods to call a property and assign it a value. 3.1 The property and its unique value within that object is also called the key-value pair.

Conclusion - Syntactically speaking, XMLHttpRequest is not calling of a method, but creating an object.

Somebody correct me please if I've got this all wrong.

Thanks, Nimish. P.S: Interesting question by the way, Saud. We need more questions like this one, that clear up our fundamental understanding, rather than asking someone to simply correct the code blindly.

By the way, I just noted that when creating an object, we typically use curly braces - {}, but during XMLHttpRequest creation, and assigning it to a var, we are using normal brackets - ().

Can someone please clarify?

var request = new XMLHttpRequest();

Steven Parker
Steven Parker
176,603 Points

This is because a function or method call (which is what this is) must have parentheses after the name. "XMLHttpRequest" is what is known as a constructor, which is a function that returns an object.

Thanks a lot Steven! Appreciate it!

As Gandalf says towards the end of "Fellowship of the Ring" - Long ways to Go!

Cheers, Nimish.