Need some clarification on the whole ajax process.

Question

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

Answer 1 · 2018-07-14T06:44:39Z

July 14, 2018 6:44am

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.

Answer 2 · 2019-03-20T10:25:10Z

March 20, 2019 10:25am

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:

There is a class - a generic skeleton that contains properties and constructor method to spawn objects - animal is a class
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
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.

Answer 3 · 2019-03-20T10:44:56Z

March 20, 2019 10:44am

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();

Welcome to the Treehouse Community

Looking to learn something new?

Saud Tauqeer

Saud Tauqeer

Need some clarification on the whole ajax process.

Saud Tauqeer

Saud Tauqeer

Steven Parker

Steven Parker

Saud Tauqeer

Saud Tauqeer

3 Answers

Cooper Runstein

Cooper Runstein

Saud Tauqeer

Saud Tauqeer

nimishhathalia2

nimishhathalia2

nimishhathalia2

nimishhathalia2

Steven Parker

Steven Parker

nimishhathalia2

nimishhathalia2