Jump to content

Super Simple AJAX example.


coolpro

Recommended Posts

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

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.