Now getting back to business. At the beginning of your JavaScript you need to make a new XMLHttpRequest object which can be made by simply typing in
var xmlHttp = new XMLHttpRequest(); please note that JavaScript IS case sensitive so if you make a mistake in the declaration it will not work. Now abit about what this code does. The line of code is placed outside any JavaScript function so that it is available globally to all the functions that will be written later on and any changes that have been made to it in one function will affect the next time it is being used. This way of coding is somewhat lazy but works as good as any other method. A sort of better way of achieving the same outcome would be to declare the request object in the first function that you want to make the request from and send it as a param to any other function that will be using it.At this point let me add that the code written for the declaration will only work in Internet Explorer 7 and later and any non-Microsoft browser that exists. If you want to check for what browser your client is using to still run AJAX on it, it is recommended by almost everyone I know to check for the existance of the XMLHttpRequest object which will be a simple if-statement
if(XMLHttpRequest) than create a new instance of the object by executing the declaration above. Otherwise declare the request object as follows xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");. At this point I would also like to say that the variable in which I declare the request object I call it xmlHttp but please feel free to use any name that makes sence to you because you will be the one writing the code but please make sure that if anyone else was to read your code it should be readable and understandable by everyone.So after you make the declaration and it is successfully executed you will have to tell the object which file you want to open on the server, how you want to access it and whether or not this process should go on in the background while the user continues to browse. To open a file called "openThis.txt" and get information from it the code will be as follows
xmlHttp.open("get", "openThis.txt", true). What this is doing is pretty much self explaintory it uses the "get" method to get information from the file "openThis.txt" in a true asychronise manner. At this point I would just like to remind you that for HTML forms there are usually two methods of dealing with them, the POST method and the GET method. Where the POST method sends data somewhere and the GET method gets data from somewhere.At this point I would also like to add that the file being fetched can be an XML file a PHP script or a normal text file. I am not entirely sure what types of files the request object can open but for our purposes lets just say that these are the only types of files that can be opened.
After opening the file the next thing you would like to do with it would probably do something with it, like display the contents or something of that sort. However, we need an event to trigger the action and that event will be
xmlHttp.onreadstatechange;. Now since you will be communicating with the server there are some steps and states you have to go through before you can actually get stuff off the server and onto the client machine. The state in which the connection is in. The way you find out about this is using the readyState property of the request object. The readyState property may have 1 of 5 values that are listed below:| Value | Meaning |
|---|---|
| 0 | Unintialised or connection established but nothing is being done |
| 1 | Initialised or connection established and something has started to be done |
| 2 | Request has been sent |
| 3 | Interactive or the request is in the process of execution |
| 4 | Ready or request has been executed and the server is ready for the next one |
Now the thing that I didn't include in the xmlHttp.onreadystatechange event was sending this action somewhere which would usually be a function that you would define later on in the script but for the sake of completing the code I will be sending to a function that does absolutely nothing :P.
xmlHttp.onreadystatechange = function (){};.Now typically in this function you which would first check if the readyState property is 4 which means that everything has been executed with no problem and than tell it to do something.
Ammm seeing that this has turned out to be a longer post than intended I will be continuing on how to display the file to the user in the next which should be the last step in AJAX. Remember if you have problems with your program let me know I just may be able to sort out the error that you get if not will try and give you some advice. Untill next time take care.
