Examples: Simple AJAX Example

zip 40kb Download
This Example

We have placed some of the longer examples from the fourth edition online for your convenience. Click on a chapter link to the left to view the examples online, or below to download the zip file.

Live Example

reponseText
Hello user from 63.210.161.190 it is 06:53:30 PM at the Ajaxref.com server

-->

Front End Source
Back End Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Hello Ajax World</title>
<script type="text/javascript">
<!--
function createXHR()
{
   try { return new XMLHttpRequest(); } catch(e) {}
   try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
   try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
   alert("XMLHttpRequest not supported");
   return null;
}

function sendRequest()
{
    var xhr = createXHR();

if (xhr)
     {
       xhr.open("GET","http://ajaxref.com/ch1/sayhello.php",true);
      xhr.onreadystatechange = function(){handleResponse(xhr)};
      xhr.send(null);
     }
}

function handleResponse(xhr)
{
  if (xhr.readyState == 4  && xhr.status == 200)
    {
     var parsedResponse = xhr.responseXML;
     var msg = parsedResponse.getElementsByTagName('message')[0].firstChild.nodeValue; 
     var responseOutput = document.getElementById("responseOutput");    
     responseOutput.innerHTML = msg;
    }
}
//-->
</script>
</head>
<body>
<form action="#">
 <input type="button" value="Say Hello"  onclick="sendRequest();" />
</form>

</body>
</html>