Ajax-based Login Control Without Any Standard Database
- Saturday, April 24, 2010, 16:53
- Programming
- Add a comment
Introduction: In this tutorial, I will present a simple Login control based on AJAX. Any login control requires a database which stores all the user profiles like passwords. Server-sided script uses that database to compare against user given strings and matches, shows errors or redirects to appropriate pages, etc. However, the proposed technique does not require any standard database like access, sql, etc. It just requires a native xml flat/text database which has the minimal complexity to implement in practice.
I was looking for this type of simple login approach and finally came up this idea while going though the asynchronous javascript and xml technique (in short AJAX). In many occasions, setting up an external database is cumbersome and not worthy in terms of minimal usages. The proposed login control however will help you to remove all the burden, compatibility issues and time. To make it clear, conventional and standard database implementation requires a database server, authentication and authorization before creating a database, database-string to be used in your script which is platform specific and to me always clumsy. To get rid of all the cost and efforts, the proposed approach uses a simple flat database and read the database using (AJAX) to make a nice-looking login control.
Keep reading!
Big Picture: The following figure shows the AJAX-based login control view. User can give his password in the text box. For simplicity I used all the states name of USA as passwords. If the user-given string matches with any of the passwords, the ‘submit query’ button appears. In other words, the user will be forwarded to his desired page by clicking on that button.
In case, the user’s input string does not match with any of the pre-fix of the passwords, the colour of the text box will be automatically yellow. It says the user not to try towards that direction and delete some of the characters to try again.
Necessary files: We need 4 files for this login control:
i) script.html
ii) script.css
iii) script.js
iv) script.xml
The html and CSS file represents the contents and design mainly to show different components. Note that the ‘submit query’ button is kept hidden from visibility. It will only appear when the user-string matches with any of the passwords stored in the xml file.
The javascript file controls the AJAX connectivity and read the password on the fly. As soon as user presses a letter on the textbox, the corresponding function works to check for any match or mismatch and behave accordingly.
While pressing a single character, the function populates all the passwords in a hidden ‘popoups’ (which actually does not popup!) html component. The function then matches those strings with the user-given string. If, the popups component is empty, it indicates the user-string is not a prefix of any of the passwords and makes the text box yellow.
However, in case of matching between those two strings, the submit button appears. User now can click and go directly to his desired page.
// —————————- script.html —————————————-
<html>
<head>
<title>Auto-fill states</title>
<link rel=”stylesheet” rev=”stylesheet” rel=”nofollow” onclick=”javascript:pageTracker._trackPageview(‘/outgoing/article_exit_link’);” href=”script.css” />
<script src=”script.js” type=”text/javascript”>
</script>
</head>
<body>
<form action=”#”>
Please enter your Password:
<input type=”text” id=”searchField” autocomplete=”off” /><br />
<div id=”popups”> </div>
<input type=”submit” id=”submitme” style=”visibility:hidden”>
</form>
</body>
</html>
// —————————- script.css —————————————-
#popups {
position: absolute;
visibility:hidden;
}
#searchField.error {
background-color: #FC0;
}
// —————————- script.js —————————————-
window.onload = initAll;
var xhr = false;
var statesArray = new Array();
var passArray = new Array();
function initAll() {
document.getElementById(“searchField”).onkeyup = searchSuggest;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
try {
xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (e) { }
}
}
if (xhr) {
xhr.onreadystatechange = setStatesArray;
xhr.open(“GET”, “us-states.xml”, true);
xhr.send(null);
}
else {
alert(“Sorry, but I couldn’t create an XMLHttpRequest”);
}
}
function setStatesArray() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
if (xhr.responseXML) {
var allStates = xhr.responseXML.getElementsByTagName(“item”);
for (var i=0; i<allStates.length; i++) {
statesArray[i] = allStates[i].getElementsByTagName(“label”)[0].firstChild;
}
}
}
else {
alert(“There was a problem with the request ” + xhr.status);
}
}
}
function searchSuggest() {
var str = document.getElementById(“searchField”).value;
document.getElementById(“searchField”).className = “”;
if (str != “”) {
document.getElementById(“popups”).innerHTML = “”;
var flag = 0;
for (var i=0; i<statesArray.length; i++) {
var thisState = statesArray[i].nodeValue;
if (str == thisState) {
flag = 1;
}
if (thisState.toLowerCase().indexOf(str.toLowerCase()) == 0) {
var tempDiv = document.createElement(“div”);
tempDiv.innerHTML = thisState;
//tempDiv.onclick = makeChoice;
tempDiv.className = “suggestions”;
document.getElementById(“popups”).appendChild(tempDiv);
}
}
var foundCt = document.getElementById(“popups”).childNodes.length;
if (foundCt == 0) {
document.getElementById(“searchField”).className = “error”;
document.getElementById(“submitme”).style.visibility=”hidden”;
}
if (foundCt > 0) {
if (flag == 1) {
document.getElementById(“submitme”).style.visibility=”visible”;
}
}
}
}
Javascript: Using window.XMLHttpRequest object, the AJAX connectivity starts. The client reads from an XML file, parse required data from it and use that information in the client end.
Then the value is compared against the given string. If it matches with the stored passwords, the ‘submit button’ appears (case B in the figure). However, any mismatch of both strings will keep the submit button hidden from viewing. Also the mismatch is shown by the yellow colour (case C in the figure). Note that case C indicates that the user-given string cannot be prefix of any stored passwords. Therefore user should delete and enter again.
// —————————- states.xml (passwords) —————————————-
<?xml version=”1.0″?>
<choices xml:lang=”EN”>
<item>
<label>Alabama</label>
<value>AL</value>
</item>
<item>
<label>Alaska</label>
<value>AK</value>
</item>
<item>
<label>Arizona</label>
<value>AZ</value>
</item>
………………………………….
…………………………………..
</choices>
Conclusion: The advantage of this code is that you do not need to use any sort of standard database (access, sql database, etc). You simple put these four files in your server, change or populate the xml script with your passwords (of clients) and run the html. Now call from the server (e.g. using http://localhost/path..). Its working, isn’t it? You see all the complexity regarding standard database connectivity in the server sided script is not required. In many occasions, this simple script will remove your burden to setup and external database and sql coding within your script.
Happy simpler coding!
Manzur Ashraf
Manzur Ashraf is with Adtrans Ltd, Adelaide, Australia working as a Developer and SEO analyst. He can be reasched at manzur_bd@yahoo.com, manzurashraf@adtransgroup.com.au.
About the Author
admin has written 12094 stories on this site.
Write a Comment
Gravatars are small images that can show your personality. You can get your gravatar for free today!
You must be logged in to post a comment.
