Ajax tutorial
AJAX tutorial
Ajax is a catchy name for a type of programming made popular in 2005 by Google and other big web developers.
Ajax loosely stands for AsynchronousJavascript And XML, but that just sounds like techno jargon to many people.
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
ajax - javascript on steroids
When javascript was released, people loved all the cool things you could do with the web browser to make a more user-friendly experience. You could do form validation, quirky popup messages, make cool web tools and more. However, Javascript had no way of sending information between the web browser and the web server.
If you wanted to get any information from a database on the server, or send user information to a server-side script like PHP, you had to make an HTML form to GET or POST data to the server. The user would then have to click "Submit", wait for the server to respond, then a new page would load with the results. I'm sure we have all gotten slightly annoyed when having to wait for especially slow websites!
Ajax attempts to remedy this problem by letting your Javascript communicate directly with the server, using a special Javascript object XMLHttpRequest. With this object, your Javascript can get information from the server without having to load a new page!
ajax - browser support
Internet Explorer, Opera, Firefox, and Safari.
xmlHttpRequest
XMLHttpRequest Object readyState property
Now we've been introduced to XMLHttpRequest object, their are two properties you should get to know this object and object supports. first is the readyState property of XMLHttpRequest object. the ready state property tells you what's going on XMLHttpRequest object as it isdownloading data .
we will be using this ready state property and the ajax enabled web application since you can see hear index.html example we have XMLHttpRequest object. readyState propery, which is the value 4.
So before continuing what is that, take a look at possible values of XMLHttpRequest object 's readySstate property.
the possible values of readyState property are:
0 - Uninitialized
zero means XMLHttpRequest object has not been initialized and not ready for been used. Not ready for work and so if the readystate property is zero and you are not going to work out XMLHttpRequest object and hence it is properly initialized.
1 - Loading
one means xmlHttpRequest object is loading the data that you have requested from the server.
2 - Loaded
two means your data has been loaded the requested data that if you acquired of the server that is been loaded and its not yet complete but it been loaded the processing almost has finished
3 - Interactive
Three means that the XMLHttpRequest object it is so called in interactive state which means that the data has been downloaded by the which still you can interact with it and ask it what s type of the readystate property is. So the interactive state means the data has not yet been downloaded it is in processing in downloading so you can interact with XMLHttpRequest object
4 - Complete
Four means the download is complete and we remembered that ajax is for the asynchronous javascript and xml. Asynchronized part means that we are going to use XMLHttpRequest object to ask server send data to us and we are going to wait untill that data is complete we are not pause the browser so this is the way you check data request is complete in XMLHttpRequest object readyState property and when the property value holds for 4 that means asynchronous download of your data is complete
so that introduces the readyState property XMLHttpRequest object and you just see the following javascript code :
function doThis()
we will be using this ready state property and the ajax enabled web application since you can see hear index.html example we have XMLHttpRequest object. readyState propery, which is the value 4.
So before continuing what is that, take a look at possible values of XMLHttpRequest object 's readySstate property.
the possible values of readyState property are:
0 - Uninitialized
zero means XMLHttpRequest object has not been initialized and not ready for been used. Not ready for work and so if the readystate property is zero and you are not going to work out XMLHttpRequest object and hence it is properly initialized.
1 - Loading
one means xmlHttpRequest object is loading the data that you have requested from the server.
2 - Loaded
two means your data has been loaded the requested data that if you acquired of the server that is been loaded and its not yet complete but it been loaded the processing almost has finished
3 - Interactive
Three means that the XMLHttpRequest object it is so called in interactive state which means that the data has been downloaded by the which still you can interact with it and ask it what s type of the readystate property is. So the interactive state means the data has not yet been downloaded it is in processing in downloading so you can interact with XMLHttpRequest object
4 - Complete
Four means the download is complete and we remembered that ajax is for the asynchronous javascript and xml. Asynchronized part means that we are going to use XMLHttpRequest object to ask server send data to us and we are going to wait untill that data is complete we are not pause the browser so this is the way you check data request is complete in XMLHttpRequest object readyState property and when the property value holds for 4 that means asynchronous download of your data is complete
so that introduces the readyState property XMLHttpRequest object and you just see the following javascript code :
function doThis()
{
if (request.readyState == 4)
if (request.readyState == 4)
{
// do something with the response
}
}
0: request not initialized // do something with the response
}
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
Comments
Post a Comment