stii.za.net » Blog Archive » A quick example of moo.ajax

A quick example of moo.ajax

Sep 22

Okay, now we’ve cleared the air around AJAX, let’s look at a quick example. This is almost like the example on the mad4milk website, but just a wee different…

Right, the first thing you need to be sure of, is that you’ve got the 2 much needed Javascripts; moo.ajax.js and prototype.lite.js Funny, but without those it simply doesn’t work… :O

Link those 2 files between your head tags of your html document.

Right, next step is to write a bit of Javascript to actually use those two libraries you’ve made. I simply wrote a function that creates a new ajax instance and pass the parameters to a second php file.

<script type=”text/javascript”>
function myFunction(request){
alert (request.responseText);
}
function aStiiFunction(){
var name = $(’yourname’).value;
var mesg = $(’yourmsg’).value;
new ajax(’stii.php’, {postBody: ‘name=’ + name + ‘&msg=’ + mesg, update: $(’myelementid’), onComplete: myFunction});
}
</script>

So what happens in the script:

You fill in your name and your message in the fields, right?
Then you click the appropriate button.
The button you’ve clicked calls the function named aStiiFunction()
aStiiFunction looks at the 2 input text html elements named “yourname” and “yourmsg” and assign it to 2 Javascript variables.
I must just quickly mention: The $(’elementName’) thingy there is a shortcut supplied to us by the lovely people developing prototype, that looks for an html element with a id name of that which you told it to. VERY nifty, hey?!
aStiiFunction then creates a new ajax instance and you pass two paramaters to it. The first is the URI to the file/script you want to call, the second are some instructions that must go to the file/script and what to do afterwards.

So lets look at the second parameter as the first one is, uhm, obvious… The second parameter has { and } around it. That is basically only to group all the stuff in the second parameter together.

The first item “postBody:” actually pass some parameters to your script on the “other side” (the stii.php script). To add more and more parameters, all you do is you add &varname=varvalue to the string already there.
The second thingy there is “update:”. That gives the ajax lib the instruction “Update the HTML element with the id thats equal to ‘myElement’ with whatever it is that the script called by ajax returns…”
The third one “onComplete:” says to ajax, “once you have received the result back, call this other Javascript function called myFunction”.

There now. THAT was not too difficult?! Ajax is simply sweet (pun intended) thanx to the okes at mad4milk!

Oh and before I rush off… Below is all the code and you can click here for a test drive, and here to download the example!

Below is the source for test.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<meta name=”author” content=”mad4milk” />
<meta name=”robots” content=”all” />
<title>moo.ajax</title>
<script type=”text/javascript” xsrc=”prototype.lite.js” mce_src=”prototype.lite.js”></script>
<script type=”text/javascript” xsrc=”moo.ajax.js” mce_src=”moo.ajax.js”></script>

<script type=”text/javascript”>
function myFunction(request){
alert (request.responseText);
}
function aStiiFunction(){
var name = $(’yourname’).value;
var mesg = $(’yourmsg’).value;
new ajax(’stii.php’, {postBody: ‘name=’ + name + ‘&msg=’ + mesg, update: $(’myelementid’), onComplete: myFunction});
}
</script>
</head>
<body>
<h1>moo.ajax, 1.3kb for all your asyncronous needs.</h1>

<div id=”myelementid”>
this text will be (hopefully) replaced after the request is completed.
</div>
<div>
Your name: <input type=”text” id=”yourname” value=”"/><br/>
A message: <input type=”text” id=”yourmsg” value=”"/><br/>
<input type=”button” value=”Send to AJAX!” id=”sendbtn” onClick=”aStiiFunction();”/><br/>
</div>

</body></html>

And here is the stii.php script:

<?php
echo ‘Hello, ‘ . $_POST['name'] . ‘ here is a cool message for you! <b>’ . $_POST['msg'] . ‘</b>’;
?>

Sharing is caring:These icons link to social bookmarking sites where readers can share and discover new web pages.

2 Comments to "A quick example of moo.ajax"

qureyoon said: On 11/15/2006 at 8:31 am
yeah moo.fx is awesome ^^
i got rid of script.aculo.us coz of this

but, it seems that it was a little hard to do moo.ajax on blogger

i’ve saw some ajax on wp that was some prev-next page to load your posts

but can’t do that in blogger
Dean said: On 11/21/2006 at 8:08 pm
Hi All Experts,
I want to use AJAX (Asynchronous JAVA script with XML ). How can i Optimize the site SEO.
as Java script and flash is not recommended by search engines. Any suggestion or help is welcomed. With Regards.