Php: Main
Welcome to my AJAX tutorial. If you don't know already, this tutorial will be teaching you the basics of the AJAX library of javascript, and how to use it to work with PHP scripts. I know AJAX isn't PHP, but it does relate to it because it can be used to run PHP scripts. Also, I would like to say that I am also pretty new to AJAX myself so I will be only teaching the basic through intermediate stuff. There is more advanced things you can do, but I will leave that for another tutorial. So, on with the lesson!
------------
What is AJAX?
AJAX stands for Asynchronous Javascript And XML. The beauty of AJAX is that it can be used to communicate with the server, but not have to reload the whole entire page. The only bad thing I can think of about it is that it doesn't work well in safari (that's just what I have read) and doesn't work in most old browsers. So if you are interested in AJAX, read ahead.
------------
Starting with AJAX
Before you can start working with AJAX, you must start a connection by one simple function. Unfortunately, this function isn't the same for all browsers, so you will need to use try and/or if statements to declare the right one for each browser. Throughout this tutorial, I will be using the firefox function (which is also used for most other browsers), but I will list the other function as well (the IE one). The two functions are below:
Firefox: new XMLHttpRequest()
IE: new ActiveXObject("Microsoft.XMLHTTP")
Now that you know how to start a connection, we can begin working with it.
------------
Make a new html file, and copy the following into it:
<script type="text/javascript">
var ajax=new XMLHttpRequest();
</script>
That script opens up a new connection. Since we now have the connection open, we must declare a page to use. To do that, we use the open() method. This function accepts three arguments. In the first argument, you state how the data is to be transmitted. That means you enter either GET or POST (I assume you know what those are). In the second argument, you state the url to the page you will be working with. So in this tutorial, we will be using the url ajax.php. In the third argument, you state whether or not the request is asynchronous. Just set it to true and you will be fine. You also need to send some data along with the request. To do this, you use the send() method which accepts one argument, the string of data to be sent. If you are using GET, you would just set this argument to null. So now that you know all of that, lets do an example script that opens up the page ajax.php.
<script type="text/javascript">
var ajax=new XMLHttpRequest();
ajax.open("GET","ajax.php",true);
ajax.send(null);
</script>
As of right now, that script is useless because we can't do anything so far. Oh, and if you want to pass GET data through the url, you would do like if it was the address in a page. So, you would do:
ajax.open("GET","ajax.php?var=value",true);
instead of what I said before. Anyway, now I will teach you how to actually get the text returned from the server.
------------
Storing the Returned Text
To start working with the returned text from the server, we need to declare the property that processes the response from the server. This property is onreadystatechange and is used like so:
ajax.onreadystatechange=function(){
//some js code
}
Now that we have that done, we just need to use one little property that stores all the returned text from the server. That property is responseText. But before we use it, we need to first declare when the server text should be returned. To do that, we use the readyState property. This property will have a value from 0 to 4. Depending on which one you use, determines when the text will be returned. Below tell you when to use each one copied directly from w3schools:
readyState=0 after you have created the XMLHttpRequest object, but before you have called the open() method.
readyState=1 after you have called the open() method, but before you have called send().
readyState=2 after you have called send().
readyState=3 after the browser has established a communication with the server, but before the server has completed the response.
readyState=4 after the request has been completed, and the response data have been completely received from the server.
Four is the one you will be using the most. Since you have learned all that, below is the example script that outputs the text from ajax.php:
<script type="text/javascript">
var ajax=new XMLHttpRequest();
ajax.onreadystatechange=function(){
if(ajax.readyState==4){
document.write(ajax.responseText);
}
}
ajax.open("GET","ajax.php",true);
ajax.send(null);
</script>
If we put the following code in ajax.php:
<?php
echo "Hello World";
?>
and you go to the html file with this script, you should see the text Hello World outputted on the page. This tutorial continues onto the next post.
