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 Asynchronous Javascript
And XML, but that just sounds like techno jargon to many people.
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 - Is That It?
Pretty much. By using the programming practice termed "Ajax" you will be able to trade data, with a web server, without having to load a new page. Instead of Ajax being seen as "The New Way to Develop Websites", it should instead be seen as another weapon to add to your programming arsenal.This tutorial will introduce you to the basics of Ajax and show you how to send and receive data from a server without using a "Submit" button approach.
Ajax - Recommended Knowledge
Ajax can be quite confusing to someone with little web programming experience. It is highly recommended that you are familiar with HTML and Javascript before attempting this tutorial.Ajax - Creating an HTML Form
Before we can start getting to the exciting new stuff, we must first make a standard HTML form (no submit button though!). This form will be spiced up in later with a hint of Ajax, but for now let's just make a solid, basic HTML form with a couple inputs.Ajax - Do You Have the Time?
To keep this Ajax easy to understand, we are going to be creating an HTML form that has two text fields: name and time. The name field will be filled in by the user, while the time field will be filled in using Ajax.Below is the HTML code for your "order.html" webpage. If you would like to refresh your knowledge of forms, then check out our HTML forms lesson.
order.html HTML Code:
<html>
<body>
<form name='myForm'>
Name: <input type='text' name='username' /> <br />
Time: <input type='text' name='time' />
</form>
</body>
</html>
Save this file as "order.html"Ajax - Where's the Submit Button?
That's the great thing about Ajax, you do not need a form submit button to send the user's data to the server. We are going to be using our "Javascript on Steroids" to get and submit data with the server.Now that we have our HTML form, we can dive deeper into the Ajax jungle and try to discover what we're facing.
Ajax - Browser Support
This lesson includes one of the largest hurdles for aspiring Ajax programmers: browser support. It would be nice if all the web browsers required the same Javascript code to use Ajax, but life isn't fair and you've got your work cut out for you!This lesson will show you how to create the keystone of Ajax; the XMLHttpRequest object. Not only will you know how to make this important Ajax object, but you will also know how to make it compatible with all the popular browsers: Internet Explorer, Opera, Firefox, and Safari.
Ajax - Try/Catch Blocks of Code
To create this important Ajax object, you are going to have to use a special programming technique known as "try and catch". Basically it attempts to "try" a piece of code and if that piece causes an error it "catches" the error and keeps going. Normally when an error occurs the code will stop running, however, the "catch" eats up the error and lets the code continue.In the following code we are going to "try" three different ways to make a new XMLHttpRequest object. Every time we fail and get an error, we will catch the error and try the next a different command.
Note: If our "try" is successful then the "catch" code will not be run because it is only used when there is an error.
order.html Javacsript Code:
<html>
<body>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
}
//-->
</script>
<form name='myForm'>
Name: <input type='text' name='username' /> <br />
Time: <input type='text' name='time' />
</form>
</body>
</html>
In the above Javascript code, we try three times to make
our XMLHttpRequest object. Our first attempt:- ajaxRequest = new XMLHttpRequest();
- ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
- ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");>
Most likely though, our variable ajaxRequest will now be set to whatever XMLHttpRequest standard the browser uses and we can start sending data to the server.
Ajax - That Browser Specific Code is Confusing
The code in this lesson was quite complex, but the good thing is that you can just copy and paste this code and don't really have to understand it. I bet you wish I would have told you that at the beginning of the lesson!The next lesson will teach you how to use your XMLHttpRequest object (which is currently stored in ajaxRequest variable) to communicate with the server.
Ajax - XMLHttpRequest Object
In the Previous Lesson you learned how to create an XMLHttpRequest object based on the type of web browser being used. This lesson will show you how to use your object to communicate directly with the server!Ajax - onreadystatechange Property
Before we even think about sending data to the server, we must first write a function that will be able to receive information. This function will be used to catch the data that is returned by the server.The XMLHttpRequest object has a special property called onreadystatechange. onreadystatechange stores the function that will process the response from the server. The following code defines an empty function and sets the onreadystatechange property at the same time!
We will be filling this function in throughout the lesson, as you learn more about the XMLHttpRequest object.
Javascript Code:
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
// We still need to write some code here
}
This property, onreadystatechange, stores a
function. As the name sort of implies, every time the "ready state"
changes this function will be executed. What is this "ready state"
and is it any use to us?Ajax - readyState Property
The XMLHttpRequest object has another property called readyState. This is where the status of our server's response is stored. The response can be processing, downloading or completed. Each time the readyState changes then our onreadystatechange function executes.The only readyState that we are going to care about in this lesson is when our response is complete and we can get our hands on that information. So let's add an If Statement to our function to check if the response is complete.
Note: When the property readyState is 4 that means the response is complete and we can get our data.
Javascript Code:
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
// Get the data from the server's response
}
}
Now that we know how to check if the response is complete,
we can access the property that stores the server's response, responseText.Ajax - responseText Property
For simple Ajax applications, like this tutorial describes, you can retrieve the server's response by using the responseText property. Using a little bit of Javascript and HTML forms we can change our text box to equal responseText.In case you forgot, this tutorial is using Ajax to set an HTML text box to the server's time. The HTML input we want to change is the "time" text box. Here's a little refresher on how to access form inputs with Javascript:
- document.FormName.InputName.value
Javascript Code:
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.myForm.time.value = ajaxRequest.responseText;
}
}
Phew! That was a lot of new things we had to use to get our
server's response, but now we can rest easy knowing we are ready to send off a
request to the server. Using Ajax, we can now ask our server for some data!Ajax - Sending a Request for Information
Now that our onreadystatechange property has a proper response-handling function, we can send our request. Sending a request is comprised of two steps:- Specify the URL of server-side script that will be used in our Ajax application.
- Use the send function to send off the request.
Assuming that the HTML and PHP files are in the same directory, the code would be:
Javascript Code:
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.myForm.time.value = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "serverTime.php", true);
With all of our Javascript setup work complete, we can then
use the send method to send our request to the server.Javascript Code:
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.myForm.time.value = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "serverTime.php", true);
ajaxRequest.send(null);
Ajax - Finishing up "order.html"
Before we plug in our freshly written Javascript code into the "order.html" file, we need some way for the visitor to run our Ajax function. It might be kinda cool if our Ajax did its magic while the user was doing something on our webpage, so let's have our function run after the user enters their name.Using the onChange attribute, we can make it so our function is called whenever the user makes a change to the "username" text box.
Javascript Code:
<input type='text' onChange="ajaxFunction();" name='username' /> <br />
OK, now we are ready to completely update our
"order.html" file to be 100% Ajax ready.order.html Updated Code:
<html>
<body>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.myForm.time.value = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "serverTime.php", true);
ajaxRequest.send(null);
}
//-->
</script>
<form name='myForm'>
Name: <input type='text' onChange="ajaxFunction();" name='username' /> <br />
Time: <input type='text' name='time' />
</form>
</body>
</html>
Ajax - Final Step
There were a lot of key steps covered in this lesson, so don't worry if you have to go back and read a few sections more than once. When you're ready you can move on to the final step of making our Ajax complete: writing the "serverTime.php" script.Ajax - Server-Side PHP Script
We completed the "order.html" file in the Previous Lesson, but we had our Ajax linking to a PHP script that did not yet exist. This lesson will walk you through the process of creating a simple PHP script that displays the current server time.Ajax - serverTime.php File
The XMLHttpRequest property, responseText, will store the data that this PHP script displays to the browser, so all we want this script to do is Echo the current time. If you would like a refresher on how to use PHP's date function, you can check out our PHP Date Tutorial. The php code below should be saved in the same directory as "order.html".serverTime.php PHP Code:
<?php
echo date("H:i:s");
?>
No comments:
Post a Comment