ajax - creating an html form

Posted by champtutorial On Thursday 8 September 2011 0 comments

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"

Where? 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.

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();

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 whateverXMLHttpRequest standard the browser uses and we can start sending data to the server.

CHAMPTUTORIAL