Ajax innerHTML

**Termana** · 09-23-2009, 04:51 AM

This tutorial continues my tutorial on innerHTML. In this tutorial, instead of using a function that will directly update the page, we are going to use ajax techniques to update the page. By using Ajax, you can call out to any piece of PHP (or other web language like ASP) code, rather than just be able to use javascript.

First, we start with our base form again, including our onclick event:

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

  <meta content="text/html; charset=ISO-8859-1"

http-equiv="content-type">

  <title></title>

</head>

<body>

<p id="namehere"></p>

<input name="name" id="name"><br>

<input name="Submit" id="Submit" value="Submit"

 onclick="javascript:changename()" type="button"></body>

</html>

Next we’ll add in the function. I’ll explain what each bit of what we are doing is in the comments of the code.

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

  <meta content="text/html; charset=ISO-8859-1"

http-equiv="content-type">

  <title></title>

</head>

<body>

<script type="text/javascript">

function changename()

{

//Declare the variable that will hold the XMLHttp Object.

var ajaxobject;

if (window.XMLHttpRequest)

  {

  // code for IE7+, Firefox, Chrome, Opera, Safari

  ajaxobject=new XMLHttpRequest();

  }

else if (window.ActiveXObject)

  {

  // code for IE6, IE5

  ajaxobject=new ActiveXObject("Microsoft.XMLHTTP");

  }

else

  {

//The browser doesn’t support Ajax.

  alert("Your browser does not support Ajax!");

  }

//Here we store a function in the onreadystatechange property. This makes it automatically set off when the readystate changes.

ajaxobject.onreadystatechange=function()

{

if(ajaxobject.readyState==4)

//Here, we test if the readystate is 4, which means it is finished.

  {

//Here is where we flow on from the last tutorial. We update the page by changing the innerHTML to the HTML that is sent back from the ajax request.

  document.getElementById('namehere').innerHTML = ajaxobject.responseText;

  }

}

//Here is where the Ajax request sends out to an external page. You can also use POST, however you must add some more code.

ajaxobject.open("GET","ajaxtest.php?name="+document.getElementById('name').value,true);

//This is normally used to send extra data, like when doing a POST instead of GET.

ajaxobject.send(null);

}

</script>

<p id="namehere"></p>

<input name="name" id="name"><br>

<input name="Submit" id="Submit" value="Submit"

 onclick="javascript:changename()" type="button"></body>

</html>

Now, we also need another file, called ajaxtest.php. All this PHP script will do is get the name sent to it and then echo it.

Code:


<?php

echo "Hello, ", $_GET['name'];

?>

Congratulations, you have created an Ajax page. By putting your name in the text box and pressing submit it should show up without reloading the page, just like in the innerHTML tutorial. Remember though, that we have used PHP code rather than pure javascript though. In this respect, we could do things like call out to a database to get information, where as with the pure javascript solution, this is an unreasonable thing to do.
A live demo will be available on my CodeCall subdomain.

If this was helpful, please +rep!