Ajax-based Login Control Without Any Standard Database
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 to see control. The user can enter his password into the text field. For simplicity, I have all the states on behalf of the United States as passwords. If the user specified string matches with one of the passwords
In this case, string user input does not match any of the pre-fix password, the color of the text box will automatically be yellow. He says the user does not try to do so and to 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" 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 that you do not need any kind of standard database (Access, SQL database, etc.). Make these four simple to update files on your server, or fill in the XML script with your passwords (customers) and run the html. Now, from the server (eg call with http://localhost/path ..). Its not work, right? You see all the complexity in terms of standard database connection in the server-side scripting is not required. In many cases this simple script to setup your load and external databases and SQL programming to remove in your script.
Happy simpler coding!
Manzur Ashraf
www.sacars.com.au
Posted in: javascript tutorial| Tags: Database XML Script ajax Control technique text user ajax-based login