Embed Size (px)
Citation preview
AjaxAjax 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.
• 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• 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.• 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;
} }
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:• // 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", “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.
• 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.
• <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>
