Ajax

Ajax
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.
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 - 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.
<html>
<body>
<form name='myForm'>
Name: <input type='text' name='username' /> <br />
Time: <input type='text' name='time' />
</form>
</body>
</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!

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.

Catch & try
<script language="javascript" type="text/javascript">
<!-- //Browser Support Code
function ajaxFunction()
{
var ajaxRequest; // The variable that makes Ajax possible!
try{ajaxRequest = new XMLHttpRequest(); // Opera 8.0+, Firefox, Safari
}
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>

Catch & try
• In the above Javascript code, we try three times to make our
XMLHttpRequest object. Our first attempt:
• ajaxRequest = new XMLHttpRequest();
• is for the Opera 8.0+, Firefox and Safari browsers. If that fails we try
two more times to make the correct object for an Internet Explorer
browser with:
• ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
• ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");>
• If that doesn't work, then they are using a very outdated browser
that doesn't support XMLHttpRequest, which also means it doesn't
support Ajax.
• 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 - 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 }

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.
// 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
• Our form's name is "myForm" and the text box is "time". Below is the code
that will set our "time" text box to the server's time.
{
{
document.myForm.time.value = ajaxRequest.responseText;
}
}

•
•
•
•

•
•
•

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.
Our simple PHP script, that we have yet to write, will be called "serverTime.php",
so we can already do step 1. The URL is set using the open method, which takes
three arguments. The second argument is the important one, as it is the URL of our
PHP script.
Assuming that the HTML and PHP files are in the same directory, the code would
be:
Javascript Code:
{

{
document.myForm.time.value = ajaxRequest.responseText;
}

}
ajaxRequest.open("GET", “page.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.
<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.

• <html> <body>
<script language="javascript" type="text/javascript">
 </script>
<form name='myForm'> Name: <input type='text'
onChange="ajaxFunction();" name='username' /> <br /> Time:
<input type='text' name='time' /> </form> </body> </html>

Ajax

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (13)

Similar to Ajax

Similar to Ajax (20)

Recently uploaded

Recently uploaded (20)

Ajax