Introduction: In this tutorial I am going to is based a simple login control on AJAX. All login control needs a database that stores all user profiles, such as passwords. Server-side script uses the database from user given string to compare and match shows, errors or redirects to relevant pages, etc. However, the proposed technique is no standard database such as Access, SQL is required, etc. It only takes a native XML Flat / text database, to implement the minimum complexity in practice. I was looking for this kind of simple log-in approach and, finally, came the thought, however, the Asynchronous JavaScript and XML technology (in short AJAX). On many occasions, the establishment of an external database is cumbersome and not worthy in terms of minimal customs. The proposed Login control, but will help you all the load, and compatibility issues to be removed. To be clear, conventional and standard database application, a database server, the authentication and authorization required before the creation of a database, database string to be used in the script, the platform-specific and is awkward for me always. To get rid of all the costs and efforts, the proposed approach uses a simple flat database tables and read the database with (AJAX) to control a pretty login. Keep reading! Big Picture: The following figure shows the AJAX-based login control display. User can enter his password into the text field. For simplicity, I have all the names of the States United States as passwords. If the user specified string games with one of the passwords, make the “search” button appears. In other words, the user’s desired page by clicking on this button will be forwarded. In case the user’s input string is not a pre-fix match of the passwords, the color of the text box will automatically yellow. It tells the user not in this direction and try to delete some of the characters try again. Necessary files: we need four files for this login control: i) script. htmlii script). cssiii script). jsiv script). xmlThe HTML and CSS file corresponds to the content and design to show, above all, at various components. Note that the “query” Submit “button is kept hidden from visibility. It will only be displayed if the user string with one of the passwords stored in the XML file matches. The JavaScript file controls the AJAX connectivity and read the password on the fly. As soon as user presses a letter on the text field, the function works for any game or disproportionate to review and act accordingly. Keep one character fills the role all the passwords in a hidden “popoups” (which is not actually popup!) HTML component. The function is true then the string with the user string. If the pop-ups component is empty, there is the user string is not a prefix of one of the passwords and makes the text box yellow. However in case of agreement between the two strings present, the button will be displayed. User can now click directly requested by his side. / / —————————- 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 id=”searchField” autocomplete=”off” /> <br /> <div id=”popups”> </ Privacy <input type = “submit” id = “submitme” style = “visibility: hidden”> </ form> </ body> </ html> / / ——— —– ————– script. css —————————————-# popups (position: absolute; Visibility: ; hidden) # search box. Error (background-color: # FC0;) / / —————————- script. js —————————————- window. onload = initAll var XHR = false; var state = new Array () var right = new Array (); initAll function () (document. getElementById (“Search Box”). onkeyup = searchSuggest if (window. XMLHttpRequest) ( XHR = new XMLHttpRequest ();) else (if (ActiveXObject window.) (try (XHR = new ActiveXObject (“Microsoft. XMLHTTP”);) catch (e) ())) if (XHR) (XHR. onreadystatechange = setStatesArray ; XHR. open (“GET”, “United States. xml”, true); XHR. send (null)) else (alert (“Sorry, but I could not create an XMLHttpRequest function “);)) setStatesArray ( ) (if (xhr. readyState == 4) (if (status == xhr. 200), (if (xhr. responseXML) (var XHR = Allstate. responseXML. getElementsByTagName (‘item “); for (var i = 0; i <Allstate. length; i + +) (state [i] = Allstate [i]. getElementsByTagName (“label”) [0]. firstChild;))) else alert ((“There was a problem with the request” + XHR. searchSuggest status );))) function () (var str = document. getElementById (“Search Box”). value; document. getElementById (“Search Box”). className = “” if (str! = “”) (document. getElementById (“popup”). innerHTML = “” var flag = 0; For (var i = 0; i <state array. length; i + +) (thisState var state = array [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 = “proposals”; document. getElementById (“popup”). appendChild (tempDiv);)) foundCt var = document. getElementById (“popup”). childNodes. length; if (foundCt == 0) (document. getElementById (“Search Box”). className = “error”; document. getElementById (“submitme”). style. visibility = “hidden”;) if (foundCt> 0) (if (flag == 1) (document. getElementById (“submitme”). style. visibility = “visible “;)))) Javascript: With window. XMLHttpRequest object that AJAX connectivity begins. The client reads from an XML file, parse the necessary data and use this information in the client side. Then the value against the specified string is compared. If it matches with the stored passwords, provide the ‘key’ appears (case B in the figure). However, any discrepancy between the two strings and hold the “Send” button hidden from view. The discrepancy is represented by the yellow color (at C in the figure). Note that in C means that it can not prefix all stored passwords of user-specified string. Therefore, users should delete and re-enter. / / —————————- States. xml (passwords) —————————————-<? xml version = “1 0″?> <choice 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>; … … … … … … … … … … … … …. … … … … … … … … … … … … …. . </ Decisions> Conclusion: The advantage of this code is that you do not need to use any type of standard databases (Access, SQL database, etc). Just put these four files change on your server, or populate the XML script with your passwords (customers) and run the HTML. Now from the server (eg call using http://localhost/path ..). His work, right? You see all the complexity in terms of standard database connection in the server-side script is not required. In many cases this simple script to setup your burden and external database and SQL code will be removed in your script. Happy simpler programming! Manzur Ashrafwww. sacar. com. au
Ajax-based Login Control Without Any Standard Database
Manzur Ashraf is with Adtran Ltd, Adelaide, Australia working as a developer and SEO Analyst. It can be at manzur_bd reasched @ yahoo. com manzurashraf, @ adtransgroup. com. au.