Detailed Ajax Tutorial [keep getting updated]

Ryan · September 06, 2007, 01:44:33 AM

I think the best way to learn a programming language is starting by examples so i will show you a script and explain each part of it
So lets get it started

Let us say we want to create a script that will show the current time and updates automaticly once the cursor of the mouse moves

For now look at the code below no need to know the green text at the moment i will cover later on

Quote<html>
<head>
<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
You are not allowed to view links. Register or Login("GET","time.php",true);
xmlHttp.send(null);
}
</script>
</head>
<body onmousemove="ajaxFunction();">
<form name="myForm" ">

Time: <input type="text" name="time" size="50"/>
</form>

</body>
</html>

So for now from this code we need

Code Select

<body onmousemove="ajaxFunction();">
<form name="myForm" ">

Time: <input type="text" name="time" size="50"/>
</form>

in the Body tag we got onmousemove handler which runs a script when there is a mouse movement in this case it runs ajaxFunction();

next we built a form and we called it myForm
next we put a text field named time

i think that was very simple
lets look back at the green code which is basicly javascript i will comment blue in the next code all what you need to know
this part below you will need to copy past 90% of it in every ajax script u ever make

Quote<script type="text/javascript">
We will create a Javascript function called ajaxFunction()
function ajaxFunction()
{
In this function we got the valiable xmlHttp which changes depending in the visitor's browser
var xmlHttp;
try
{
iT sets the variable to new XMLHttpRequest() if the Browser is FF opera or safari
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
here the same thing goes it sets the variable to another values for internet explorer
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
Finaly if none of the checks workit will display this alert
alert("Your browser does not support AJAX!");
return false;
}
}
}

xmlHttp.onreadystatechange=function()
{
this part below is ==4 means when we have a complete request
if(xmlHttp.readyState==4)
{
now simple it changes the time form to the value we got
document.myForm.time.value=xmlHttp.responseText;
}
}
below will get the script file with the method
You are not allowed to view links. Register or Login("GET","time.php",true);
xmlHttp.send(null);
}
</script>

I know its not yet clear next upates will make it more clear

Ryan's District Boards

News:

Detailed Ajax Tutorial [keep getting updated]

Ryan