How To Use Ajax (asynchronous Javascript)

Fundamentals of Ajax - Understand this last post - Then U Can Start using Ajax.

We are now going to a very small demo site loading with ajax:

The sample can be found on http://mwebng.net/demos/ajax_starter/

Download from www.mwebng.net/?net=dl

home.html

about.html

contact.html

Those are the content files we want to download with ajax. Now for the ajax loader.
index.html

So let us now break it down into bits and pieces


This code is meant to check the browser and return a copy of the ajax engine the browser supports - do not even bother yourself - even i cannot write that function offhand - yet i have used it to pull lots of stuffs with ajax - it is only important to know how to use it.



This other one shows how to use the engine to perform a transaction with the server and get the results.
Yes, and what they mean by asynchronous in ajax is that - since a request is sent to the server and back - this means you will not get your results immediately. This code i am tryin to explain is the fundamental of ajax - if u understand it then you are ready for ajax.
So i am going to try to move slowly and assume u don't know much about javascript.


function download(url) -   My custom download function accept a url [which must be on your website - can be php, anything]

var mygetrequest=new ajaxRequest() - creates a new copy of the ajax engine for use.

Because of the nature of the transaction, there is something programmers refer to as callback function
that is what the  onreadystatechange function does. it keep monitoring the transfer,
and as it does its value keeps changing from 0 to 4 - don't worry if u do not understand the last statement.

To track that readystate function we declare the next line
mygetrequest.onreadystatechange=function() {, }

At the point that readyState becomes 4 - the transaction is completed - that could mean success or failure.
if (mygetrequest.readyState==4){ - this is activated the moment download is either successful or failed.

//so we want to check for success - we need to check another property of that ajax engine called status
status will return 200 when download is successful. The next next line checks for success:
      if (mygetrequest.status==200) {document.getElementById('display').innerHTML=mygetrequest.responseText;}

If successful, the property of the ajax engine (copied into mygetrequest) called reponseText will now return
the content of the downloaded url.
It was at this point we now write the content downloaded into the DIV called display by using
document.getElementById('display').innerHTML=mygetrequest.responseText;

If status is not 200 and readystate is false, then download has failed: so the next line comes into play
else {alert("Download was not successful");}

So after declaring all of the above, we now allow the ajax engine to go and fetch the url
That is where the next lines come into play
mygetrequest.open("POST", url, true);
mygetrequest.send(null);      

That does it. At this point i think you should analyze the demo - use it, look at the source code - and read all the jargons i have posted here -
it  just might make some sense.

String that specifies one of the following values: uninitialized Object is not initialized with data.
0 - initializing.
1 - loading Object is loading its data.
2 - loaded Object has finished loading its data.
3 - interactive User can interact with the object even though it is not fully loaded.
4 - complete Object is completely initialized.

"readyState", "status", and "statusText" properties

During an Ajax request, a few properties on the returned object inform you of the status of the request. The "readyState" keeps track of the current stage of the request by returning an integer:

0: uninitialized
1: loading
2: loaded
3: interactive
4: complete
Typically you simply test for a value of 4 to know when the request is complete.

"status" returns the status code of the request, for example, "404" for a failed request, "200" for a successful one etc.  If you're running the Ajax request offline locally on your PC, a value of 0 is returned in some browsers regardless of the actual request status.

"statusText" returns a string describing the status of the request, such as "Not Found".