Ajax Tutorial
Now first of all you need to understand what does it mean Ajax.
Ajax mean simply Asynchronous JavaScript Technology and XML.
which is a sophisticated method to save the network bandwidth and decrease the response time. it only updated the particular area that you really want instead updating the whole page. which will cause to reload the page and then again repeat the request from the server.
so in that context. it wastes the bandwidth of both server and the client.
to resolve that Ajax can be used.
just think you saw a website which contains videos,images,and lot of HTML contents. middle of that you need to type a message. example youtube.
meanwhile watching a youtube video you also need to make a comment.but if it's just JavaScript/Server side script ,you won't see your comment until you refresh the page. but with Ajax you don't need to refresh the page, it will just update the page's that part without reloading the entire page. that's really useful cause it wont even your video streaming.
Now take one by one
can you see this part
<textarea cols='50' rows='10' id='t_area' name='t_area'>
</textarea>
<br />
<input type='button' value='Click to Update' onclick="proceed(' http://www.w3schools.com/Ajax/test_xmlhttp.txt')" />
when you press on this button. it will trig out the event . so that event is proceed. meanwhile it passes an parameter.
that parameter is simply a string. which contains the path to the file
now move ahead and see the JavaScript Part
so this is the JavaScript Part
function proceed(url){
}
whatever you insert regarding this scenario should go within this proceed function. actually there are two things in programming world that you can categorize codes. first functions, procedures.
but in JavaScript you only see functions though it's irrelevant to return any value. in function it returns a value but in procedures it won't just void 0;
you can see that in JAva/C++/C# etc.. language but since Javascript is a lightweight it doesn't.
now step to step back to the codes
(1)
I used this part to make sure the event trig out the function
document.getElementById('t_area').value = "updated";
if it works surely you can see at least the "updated" string in the textbox
(2)
Now second part
if(window.XMLHttpRequest)
{
xml_object = new XMLHttpRequest();
}
else
{
xml_object = new ActiveXObject('Microsoft.XMLHTTP');
}
actually you need to remember IE uses different object for Ajax while Chrome/firefox/opera in same boat.
window.XMLHttpRequest is used to make sure this browser supports to
XMLHttpRequest or not. if it doesn't simply that command will be null.
null means it won't execute the if clause instead move onto the else part.
ActiveXObject method is used by the IE and it's Microsoft.XMLHTTP parameter handles the Ajax part.
it will create an object from that class and pass made object into the xml_object variable. so the data type of that variable is simply Object.
remember Object is the thing that you made from a class.
so you can access to all proprieties/methods of that class through that object. once you used applied null at end. so it will clean up the memory.
in Java it does automatically. in C++ doesn't.
Third
xml_object.open("GET",url,true);
xml_object.send(null);
xml_object.onreadystatechange = on_ready;
so as I said early. now you made an object from the XMLHttpRequest Class and ready to move with Ajax.
the first of all you need to open up the connection between the server and the client. for that you can use .open method.
.open method contains. three parameters.
1 => the pass method ether GET/POST
2 => The path to the file that we handle. if it's XML then simply the XML file's path with its extension.
3 => Asynchronous or not. I will explain what's that mean in next part. cause u won't understand unless.
.send()
send method can be used to send the request. so now client sends a request to the server.
xml_object.onreadystatechange = on_ready;
onreadystatechange this method simply does. activate the function got it. at each time whenever there is any changes of the request.
will explain in next part.
Fourth
now the onreadystatechange method trigs out the function named on_ready whenever there is any changed with the request state.
if (xml_object.readyState == 0) {
document.getElementById('state_change' ).innerHTML = 'not Initialized';
}
as usually we use the xml_object object and there is a method called readyState which can be used to determine the request state
0 -> means The Request is NOT Initialized
1 -> Means The Request has been set up and ready to send to the server
2 -> The Request passes over to the Server
3- > The request is being processed by the server
4- > everything is done and the response got back.
those are the states of the request. use the appropriate one depend on the context. but you need to remember u should use 4th one for final result
to update a progress bar or something. I guess the 2th is more suitable.
and the 3th one is suitable if you are waiting for the reply.
xml_object.responseText; can be used to get the response in Plain Text format. keep that in your mind use another thing if that's XML
Now I guess I have few more things to explain
xml_object.open("GET",url,true);
which is the third parameter of the .open() method
if you use TRUE which means Asynchronous then that means everything handle Asynchronously. codes don't wait until it gets the reply it will proceed from wherever it stopped. but if u use false. means synchronous then it will wait until it gets the reply. which means it will proceed after the request state change to 4. this is really useful if you want to stop the code and wait until it gets the reply unless keep it as true.
function on_ready()
{
if (xml_object.readyState == 0) {
document.getElementById('state_change' ).innerHTML = 'not Initialized';
}
else if (xml_object.readyState == 1) {
document.getElementById( 'state_change' ).innerHTML = 'has been set up';
}
else if (xml_object.readyState == 2) {
document.getElementById( 'state_change' ).innerHTML = 'has been sent to the server';
}
else if (xml_object.readyState == 3) {
document.getElementById('state_change' ).innerHTML = 'is in process';
}
else if (xml_object.readyState == 4) {
document.getElementById('state_change' ).innerHTML = 'done';
document.getElementById('t_area').value = xml_object.responseText;
}
}
Code:
<html>
<head>
<script type='text/javascript'>
<!--
function proceed(url)
{
document.getElementById('t_area').value = "updated";
if(window.XMLHttpRequest)
{
xml_object = new XMLHttpRequest();
}
else
{
xml_object = new ActiveXObject('Microsoft.XMLHTTP');
}
xml_object.open("GET",url,true);
xml_object.send(null);
xml_object.onreadystatechange = on_ready;
function on_ready()
{
if (xml_object.readyState == 0) {
document.getElementById('state_change' ).innerHTML = 'not Initialized';
}
else if (xml_object.readyState == 1) {
document.getElementById( 'state_change' ).innerHTML = 'has been set up';
}
else if (xml_object.readyState == 2) {
document.getElementById( 'state_change' ).innerHTML = 'has been sent to the server';
}
else if (xml_object.readyState == 3) {
document.getElementById('state_change' ).innerHTML = 'is in process';
}
else if (xml_object.readyState == 4) {
document.getElementById('state_change' ).innerHTML = 'done';
document.getElementById('t_area').value = xml_object.responseText;
}
}
}
//-->
</script>
<noscript>Your browser doesn't support to Javascript or you may need to enable that</noscript>
<head>
<body>
<textarea cols='50' rows='10' id='t_area' name='t_area'>
</textarea>
<br />
<input type='button' value='Click to Update' onclick="proceed(' http://www.w3schools.com/Ajax/test_xmlhttp.txt')" />
<br />
<p>Current State : </p><p id= 'state_change' name='state_change' ></p>
</body>
</html>
By CORE /2011/05/20DON'T STEAL MY ARTICLE/CODES WITHOUT MY PERMISSION.
THIS IS 100% PLAGIARISM FREE THAT MEANS MY OWN WORK.
I WROTE THIS ARTICLE AROUND MAY AND PUT IN HERE IN THIS MONTH (JULY)
