diving into ajax

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

diving into ajax

Post by s.dot »

I've read a couple of tutorials. And copy/pasted and then tinkered a simple working AJAX application.

Code: Select all

<html>
<head>
<title>AJAX Test</title>
</head>
<body>
<script type="text/javascript">
function GetXmlHttpObject()
{
  var xmlHttp=null;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    }
  return xmlHttp;
}
function get_time(format)
{
	xmlHttp = GetXmlHttpObject();
	xmlHttp.onreadystatechange=stateChanged;
	
	if(format == 'regular')
	{
		xmlHttp.open("GET","time.php?rand="+Math.random(),true);
	} else if(format == 'formatted')
	{
		xmlHttp.open("GET","time.php?format=1&rand="+Math.random(),true);
	}
	
	xmlHttp.send(null);
}

function stateChanged() 
{ 
	var state = xmlHttp.readyState;
	if(state != 4)
	{
		document.getElementById("time").innerHTML = 'please wait while we process your request...';
	} else
	{
		document.getElementById("time").innerHTML = xmlHttp.responseText;
	}
} 

</script>
<a href="javascript:void(0);" onclick="get_time('regular');">click here to get the time</a><br />
<a href="javascript:void(0);" onclick="get_time('formatted');">click here to get the formatted time</a><br /><br /><br /><br /><br />
<div id="time" style="width:300px; height: 300px; background-color: #aeaeae; padding: 3px; text-align: center;"></div>
</body>
</html>
Is this pretty much all there is to ajax? Where does the XML come in?
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
TheMoose
Forum Contributor
Posts: 351
Joined: Tue May 23, 2006 10:42 am

Post by TheMoose »

The XML comes in if you want to have more than just plain text returned from your time.php page. You can use xmlHttp.responseXml to get an XML object and then parse through child nodes and the like to get the data pieces you want.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

Welcome to the chic world of [s]buzzw..[/s] ajax!

Now that you have a decent understanding of how it works, do yourself a favour and jump on the jQuery express bus:

Code: Select all

<a href="#" onclick="$('#time').load('time.php',{rand: Math.random()});">click here to get the time</a>
<a href="#" onclick="$('#time').load('time.php',{rand: Math.random(),format:'1'});">click here to get the formatted time</a>
<div id="time"/> 
User avatar
jyhm
Forum Contributor
Posts: 228
Joined: Tue Dec 19, 2006 10:08 pm
Location: Connecticut, USA
Contact:

Post by jyhm »

Man you love that jquery, are you trying to sell it? :D
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

I love it too... Kieran showed me the light.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

"jQuery sells itself, sweetheart! It chops, grates, slices, dices... twice as fast as any framework -- isn't that amazing? Act now!"
The Ninja Space Goat wrote:I love it too... Kieran showed me the light.
There's plenty of kool-aid for everyone, get your blue jumpsuits at the door.
Post Reply