Super Simple AJAX example.

coolpro · July 19, 2008

Anybody can make super simple example, written by Ajax way.

For example, it is a time: time.php
<?
echo date("H:i"); //hours and minutes
?>

I have index.html, with 2 lines, "Update the time", and "Time is:".

I want to do, that when i click on "Update the time", AJAX check time.php, and respond it to index.html file

corbin · July 19, 2008

Ahhh here it goes. Just giving example code isn't my style, so I'm going to explain everything first.

First off, I have a function (really a class) that I like to use to get an AJAX object.

function GetAjax() {
try {
	return new ActiveXObject("Msxml2.XMLHTTP");
} 
catch (e) { }
try {
	return new ActiveXObject("Microsoft.XMLHTTP");
}
catch (E) { }

if (typeof XMLHttpRequest != 'undefined') {
	return new XMLHttpRequest();
}
throw new Exception('No AJAX support');
}

Why do it in a class? I like it because it returns an AJAX class as long as the browser has support for AJAX (and the support is looked for in that class). What I mean is that I never have to know what object I'm dealing with, since they all have the same methods (functions).

So, the usage of this so far would be:

var aobj = new GetAjax();

Now, that doesn't exactly do much by its self.

All of the AJAX objects have the same methods with the same parameters.

The methods/variables you will need to know are:

open(method, url, asynch)

send(content)

onreadystatechange

open takes a method (POST or GET for example), then a URL (somepage.php for example) and onreadystatechange is a variable. When the readyState of the object changes, the onreadystatechange function will be fired off. Send is simply used to send the actual request, along with any content if needed (usually only needed on POST requests).

So, assuming you have time.php as:

<?php
echo date("H:i");
?>

Your Javascript for what you're trying to do could look something like this:

<!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" xml:lang="en" lang="en" dir="ltr">
<head>
<title>AJAX Example</title>
<script language="javascript">

	function GetAjax() {
		try {
			return new ActiveXObject("Msxml2.XMLHTTP");
		} 
		catch (e) { }

		try {
			return new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch (E) { }

		if (typeof XMLHttpRequest != 'undefined') {
			return new XMLHttpRequest();
		}

		throw new Exception('No AJAX support');
	}

	function GetTime() {
		try {
			var aobj = new GetAjax();
			aobj.open("GET", "time.php", true);
			aobj.onreadystatechange = HandleSendResponse;
			aobj.send(null);
		}
		catch (E) {
			alert('Bah!');
			//worst error handling ever.  EVER!
		}
	}

	function HandleSendResponse() {
		//hopefully you get this concept because i't's hard to explain....  HandleSendRequest() will be executed
		//inside of the XMLHttpRequest class, so, this responds to 'this' instance of that class
		if(this.readyState == 4) {
			//it's done!
			if(this.status == 200) {
				//everything is (assuming the data was passed/processed correctly) good
				document.getElementById("time").innerHTML = this.responseText;
			}
			else {
				//something went wrong x.x
			}
		}
	}

	window.onload = GetTime;

</script>
</head>

<body>

<h1>AJAX Example</h1>

The time is: <div id="time" style="display: inline">N/A</div>
<br />
<br />

</body>

Sign In

Super Simple AJAX example.

Recommended Posts

coolpro

Link to comment

Share on other sites

corbin

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information