About Me

Friday 20 April 2012

Ajax - Javascript Techniques

09:00  SecurityVoid  No comments

Ajax - Javascript Techniques

The real trick of Ajax is updating a segment of the page without actually having to reload the entire page. This little trick is often done by utilizing a Javascript property known as innerHTML. Each HTML element on a page has an innerHTML associated with it that can be changed at any time. For us, we need to update it when our ajax-example.php script has finished executing.

Updating the order.html Page

First we need to create a new div on this page that will contain the results of the query. After we have that in place we can update the div's innerHTML with the information returned by ajax-example.php. Remember that this result is stored inside ajaxRequest.responseText.

order.html HTML/Javascript 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){
   var ajaxDisplay = document.getElementById('ajaxDiv');
   ajaxDisplay.innerHTML = ajaxRequest.responseText;
  }
 }
 var age = document.getElementById('age').value;
 var wpm = document.getElementById('wpm').value;
 var sex = document.getElementById('sex').value;
 var queryString = "?age=" + age + "&wpm=" + wpm + "&sex=" + sex;
 ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
 ajaxRequest.send(null); 
}

//-->
</script>



<form name='myForm'>
Max Age: <input type='text' id='age' /> <br />
Max WPM: <input type='text' id='wpm' />
<br />
Sex: <select id='sex'>
<option value='m'>m</option>
<option value='f'>f</option>
</select>
<input type='button' onclick='ajaxFunction()' value='Query MySQL' />
</form>
<div id='ajaxDiv'>Your result will display here</div>
</body>
</html>

Quick Ajax Recap

So far we have created a new MySQL table, written a new PHP script and updated order.html twice. If you have followed the directions in the Ajax MySQL lesson and created the MySQL table ajax_example and ajax-example.php script then the updated order.html page will function like our example below.

Display:

Max Age:
Max WPM:
Sex:
Your result will display here

Ajax Javascript Lessons

If you want to update a non form element, be sure to use the innerHTML attribute that is associated with all HTML elements. In our case we are updating a div every time a query is sent off. Also, remember that you can easily access an HTML element by giving it an id and using Javascript's document.getElementById function.
If you have successfully completed this advanced Ajax lesson then you know how to use MySQL, PHP, HTML, and Javascript in tandem to write Ajax applications.

Posted in:

0 comments:

Post a Comment