First AJAX Application

Introduction : What Is AJAX

AJAX is very interesting now a days , and a lot of developers want to know what is AJAX , AJAX stands for "Asynchronous JavaScript And XML" which means it is all about Javascript and XML.
Most of people thought that AJAX is a web programming language like PHP , ASP , .. etc. but it is not , whatever the language you are using for your web application , AJAX is totally independent.
we use AJAX when we need to do something asynchronously and don't make the page flashes. Gmail and Google Earth are a good example of AJAX.

What i need to know before i start working with AJAX ?

1. a web programming language like PHP , ASP , JSP or whatever you want .
   
2. JavaScript , and it is actually not a big deal to specify time to learn JavaScript , if you have a small programming background you can learn JavaScript from tracing others code .
   
3. XML , also you won't need anytime for XML , for the simplicity sake XML let you express the data using your own tags
   
4. DOM : "Document Object Model" , every element in the HTML Page is actually an object of the document , DOM actually is not a different language , you can think of it as a concept
   

The First Application : Sign Up Using AJAX the HTML Page < span id="Message"> </span> < from action="#" id="SignUpForm" method="POST"> Username :< input id="Form_Username" type="text" value="" /> Email:<input id="Form_Email" type="text" value=""/> Passwoed:<input id="Form_Password" type="password" value="" /> <input id="SignUpButton" onclick="return SignUp();" type="submit" value="Sign Up" /> <form> The goal of the "span" is to use it for printing the messages related to the sign up process. onClick="return SignUp();" will call the javaScript function - we will create it latter- which is responsible to send the request asynchronously The PHP Page

<?php
// SignUp.php
$UserName = $_REQUEST["Form_Username"];
$Password= $_REQUEST["Form_Password"];
$Email=$_REQUEST["Form_Email"]
$Connect= mysql_connect("localhost","root","password");
mysql_select_db("database");
$SQL = "insert into users 
set 
user_name = '$Username',
user_password= '$Password';                                                  
user_email='$Email'; "
$Query = mysql_query($SQL) 
if( mysql_affected_rows() ==1) 
echo "1";   //user added successfully  else           
echo "0" // //failed
?>

as you see you have to organize your code in a way that only the intended function will respond and print a text that should be displayed Now The JavaScript Part

function XMLHTTPRequest()
{
var xhr=false;
// if running Internet Explorer
if(window.XMLHttpRequest)
{
try
{
xhr= new XMLHttpRequest();
}
catch (e)
{
xhr= false;
}
}
// if running Mozilla or other browsers
else
{
try
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");  
}
catch (e)
{
xhr = false;
}
}
return xhr;
}
function SignUp()
{
var Username=document.getElementById("Form_Username");
var Password=document.getElementById("Form_Password");
var Email=document.getElementById("Form_Email");
var Xml=new XMLHTTPRequest(); 
if (xhr){
var Link=" SignUp.php";
xhr.open("GET",Link,true);
xhr.onreadystatechange = function () { CheckState(xhr);};
xhr.send(null);
}else
return true;
}
function CheckState(xhr)
{
var Message=document.getElementById("Status");
Message.innerHTML="";
if (xhr.readyState == 1)
{
Message.innerHTML="Loading , Please Wait";
}
if (xhr.readyState == 4)
{
if (xhr.status == 200)
{
if(hr.responseText=="1")
Message.innerHTML="User Added";
}
else
{
Message.innerHTML="Error occurred";
}
}
}