»  Home  »  Web Technologies  »  3 Practical Uses For AJAX
 »  Home  »  Web Design  »  3 Practical Uses For AJAX
 »  Home  »  Programming  »  3 Practical Uses For AJAX
3 Practical Uses For AJAX
By Mitchell Harper | Published 01/31/2006 | Web Technologies , Web Design , Programming | Rating: ratingfullratingfullratingfullratingfullratingempty Unrated |
AJAX Use #1: Validate a Login Attempt

Instead of posting back to the server to validate a username/password for a login form, let's see how you can do it using AJAX.

Let's start by creating the PHP script that AJAX will “talk” to. Create a file called login.php on your web server in the same directory as the ajax.js script we created earlier. Copy and paste the following PHP code into login.php and save it:

<?php

    if(isset($_POST["username"]) && isset($_POST["password"]))
    {
        $username = $_POST["username"];
        $password = $_POST["password"];

        if($username = "user" && $password == "password")
            echo 1;
        else
            echo 0;
    }
    else
    {
        echo 0;
    }

?>

Note: Obviously this example has been oversimplified. Normally you would use a MySQL database to store user logins and some sort of encryption to pass the data from the client to the server.

Next, let's create our login page. Create a new page called login.html and copy and paste this code the following code into it:

<html>
    <head>
        <script>

            var url = "login.php";
            var what = "LoginStatus(req.responseText)";

            function CheckLogin()
            {
                var username = document.getElementById("username").value;
                var password = document.getElementById("password").value;

                DoCallback("username="+username+"&password="+password);
            }

            function LoginStatus(Status)
            {
                if(Status == 0)
                    alert("Bad login!");
                else
                    alert("Login OK!");
            }

        </script>
        <script src="ajax.js" type="text/javascript"></script>
    </head>
    <body>
        <pre>Username: <input id="username" type="text"><br>Password  <input id="password" type="password"><br><br><input type="button" value="Check Login" onClick="CheckLogin()">
        </pre>
    </body>
</html>

To test our first example, enter “username” in the username field and “password” (no quotes) in the password field and click the “Check Login” button.

First we invoke the DoCallback function, passing the values of the username and password fields, like so:

DoCallback("username="+username+"&password="+password);

The DoCallback function uses AJAX to call up the login.php page with our username and password values taken from the form. There are 2 variables defined at the top of the login.html file that tell the AJAX function what to do:

var url = "login.php";
var what = "LoginStatus(req.responseText)";

The url variable tells the AJAX function where to post its data to, and the what variable tells AJAX the name of the function to run when the server is ready to pass back some data. The req.responseText variable will contain the value passed back from the server. In this case, a 0 for a bad login and a 1 for a successful login, as shown in the login.php script:

if($username = "user" && $password == "password")
    echo 1;
else
    echo 0;
Pages: « Back  1 2 3 4 5  Next » 
Next: AJAX Use #2: Country and State Drop Down »

Spread The Word

Web designers: Learn how to attract more clients and profit like the big guys. Subscribe to our newsletter.