A couple of times ago, its quite hard for me to find a simple yet effective example of using POST method via XML request (also known as AJAX). After finally getting my hands on it and use it in one of my web projects, i decided to make one simple article of using POST method via AJAX.

What we’re going to make is a login form with username and password, but when the user is logging in they dont have to switch pages. First of all, the Javascript. This script is the script for opening connection using XML HTTP, sending a query for request, and catch the response. This request query for opening a XML HTTP connection is different for each browser, so this script tries 3 methods for IE, Mozilla, and other browser using the standard XML queries. You can put this code on a *.js file or insert it inside the HTML file you’re about to execute.

function nigol(u,p)
{
document.getElementById("mnlgn").innerHTML='<input type="button" name="Submit" value="Logging In.." disabled>';
var xmlHttp;
try
{
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
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) // if xmlHttp connection succeeded
{
document.getElementById("mnlgn").innerHTML=xmlHttp.responseText;
}
}
kue = "user="+u+"&pass="+p;
xmlHttp.open("POST","log-me-in.php?"+kue,true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length", kue.length);
xmlHttp.setRequestHeader("Connection", "close");
xmlHttp.send(kue);
}

For POST method, we have to use extra queries : SetHeader. According to the RFC , POST method requires additional meta data such as Content-type,and Length. We send this using .setHeaderRequest similar to Header() function in PHP.

Inside the HTML file, we have to make a login form but dont bother.. i already made one :

<div class="item" id="mnlgn">
<h2 id="verybig" align="left" style="font-size:2em;">e-LOGIN</h2>
<form name="frmLogin">
<label>Username</label>
<input name="username" type="text" style="border:1px solid #CCC;">
<label>Password</label>
<input name="pas" type="password" style="border:1px solid #CCC;">
<input class="button" type="submit" value="Login >>" onclick="nigol(document.frmLogin.username.value,document.frmLogin.pas.value);">
</form>
</div>


Now, this is pretty much it.. next thing you should is making a normal PHP/ASP page for processing the username and password. Just in case you didn’t get that, here’s an example of a PHP login script compatible to the ajax script above.

file : log-me.in.php

<?
include(”db_connection.php”);

$login_query = mysql_query(”SELECT * FROM users WHERE username=’”.$_POST[’username’] .”‘ AND password =’”.md5($_POST[’pas’]).”‘”);

if(mysql_num_rows($login_query)==”1″)
{
echo(”Login success”);
}
?>

Well thats about it.. any questions? Leave a comment.. =)