What is Ajax?
Ajax stands for Asynchronous Javascript and XML, Almost every website uses this technique. This is not a programming language or something but merely a Javascript technique to fetch data from server (like requesting a webpage) without leaving the current page. You get the data from the server in a variable, it can be HTML which you can include directly into some part of the page using Javascript DOM or it can be XML or JSON, atleast these are what the server usually sends back while you have the choice to chose which ever format you like, not confined to formates mentioned here.
Why Ajax?
Ajax gives a real time feel to your web page. And you can make rich web applications using Ajax. Alot of load is transfered from the server as it can only be used to fetch data and other processing load is on the client. Well that also wouldn't be a wise move to stuff up your client's RAM or do alot of processing there. We will look more into it afterwards. In a nutshell Ajax request and a simple request via click redirect is Ajax give you capability to request more than one pages while simple request takes you to that page.
Ajax stuff!
In javascript Ajax is done using XMLHTTP request object. Which has a different name in IE.
gecko browsers call it = XMLHTTPRequest
IE call it = ActiveXObject("Microsoft.XMLHTTP");
So now lets move on and see how can we use this object.
Lets initialize our variable 'xmlhttp' with these objects. Notice how we acheive this so we can do ajax on both gecko browsers and IE.
//using try catch statements to get the Ajax object
var xmlhttp= null; //intializing our variable with null intially.
try {
//try this block
xmlhttp= new XMLHTTPRequest; //This code will run fine in Gecko browsers but will generate an error in IE so we will catch that error in "catch" block below
} catch(e) {
try {
//so the above block generated error in IE we caught the error now error handling starts
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP"); //This will run in IE without generating errors.
}catch(e) {
//This block will only execute if client's browser doesn't support Ajax at all.
alert("Browser doesn't support AJAX");
}
}
So till here we will have a valid Ajax object or the browser doesn't support Ajax at all. So in the next part of this tutorial we will see how we can use this object to request pages and send content with it use GET / POST request. It your choice to use which HTTP request method, you cannot use both on one object, below we will see how can we use each.
GET request!
GET request is a usuall HTTP request method like when you click on a link that would probably be a GET request and Forms usually use POST request. So far we have seen how can we get a valid XMLHTTP request object. Now we will use that object and use GET HTTP request method.
xmlhttp.open("GET", "file1.php?name=value", true); //{1}
xmlhttp.onreadystatechange = function () { //{2}
if(this.readyState== 4) { //{3}
if(this.status== 200) { //{4}
// you got a response from the server without any errors on the server
alert(this.responseText); // {5}
}
}
}
xmlhttp.send(null); // {6}
Comments.
- xmlhttp.open([HttpRequest Method], [webpage], [Async Response]), This method intializes the request. [HttpRequest Method] is what method you want the request to have, [webpage] is the page on server where you want the content from, it can be URL or relative path, [Async Response] if this 'true' then it means that javascript won't wait untill the response is fully loaded, Code will be executed if there is any code in line to be run. while if it false, Javascript will pause until it gets the response from the server.
- [Post not done yet]...
