Category: JavaScript

AJAX is a wonderful technology that provides the visitor with a “no refresh” experience on the web. With the advent and popularity of Web 2.0 this technology is making progress by leaps and bounds.

If you would like to verify whether a user is registered on your website or not then you can use the following code to implement that functionality.

As AJAX uses JavaScript we will be using the XMLHTTP object.

<script><!--
/*
Due to browser compatibility issues following function instantiates the right object with respect to the browser
*/

function getHTTPObject() {
var xmlhttp;

if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
if (!xmlhttp){
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
}
return xmlhttp;
}

// Instantiating the object
var http = getHTTPObject();
// --></script>

Next we will define the function which actually gets called to verify the user from the web page

<script><!--
function getMemberEmail() {
/*
Place validation code here to verify whether the input is in the correct format or not.  If it is not in the correct format then prompt user other wise start checking the user.
*/

sId = document.frmCheck.txtEmail.value;
document.getElementById('spnMessage').innerHTML = "Please wait...";
var url = "chk_user_email.php?e=";

// Note the http is a global variable as you can see from the above code

http.open("GET", url + escape(sId), true);
http.onreadystatechange = handleResponse;
http.send(null);
}
// --></script>

Now we have to write the code which handles the response from the chk_user_email.php file.

<script><!--

function handleResponse() {
/*
We have to check the response status and whether the operation has completed or  not. 4 means completed and 200 means that response is OK.
*/

if (http.readyState == 4) {
if(http.status==200) {
var results=http.responseText;
document.getElementById('spnMessage').innerHTML = results;
}
}
}
// --></script>

The complete code as it would appear on the page for the above example is below:

<script><!--
function getHTTPObject() {
var xmlhttp;

if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
if (!xmlhttp){
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
}
return xmlhttp;
}

var http = getHTTPObject();

function getMemberEmail() {

sId = document.frmCheck.txtEmail.value;
document.getElementById('spnMessage').innerHTML = "Please wait...";
var url = "chk_user_email.php?e=";

http.open("GET", url + escape(sId), true);
http.onreadystatechange = handleResponse;
http.send(null);
}

function handleResponse() {

if (http.readyState == 4) {
if(http.status==200) {
var results=http.responseText;
document.getElementById('spnMessage').innerHTML = results;
}
}
}
// --></script>
<form> <input name="txtEmail" type="text" />
<span id="spnMessage" type="text" /> </span>

</form>