Getting started with ajax: Ajax & jQuery

Written by Joe on Tuesday, May 25, 2010

Ajax is one of the most popular technologies today. And jQuery makes it extremely easy to handle any ajax request. Ajax stands for Asynchronous JavaScript And XML. Using html, css, and javascript, ajax gives you the ability to create interactive web applications by being able to retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page.

Getting Started With Ajax

You will need to create two files for this example, test.html and process.php and of course a copy of the jQuery library, which can be downloaded here. The test.html file will hold all of your html code to display to the user and process.php will handle the ajax request. After you download jQuery, unzip the files to your web directory and include them in the <head></head> section of your test.html document. Now you are ready to start programming the ajax code.

Client Side HTML Code

This code will go inside test.html and will be displayed to the user. This code should be in between the <head></head> section of your html page.

Pretty simple and straight forward. $.ajax({}); starts your ajax request. Type is the way the php will be able to get your data. It can be POST, GET, or REQUEST. Url tells the script to call the file ajax/process.php to process the request. Data is the javascript variable containing the data you want to process. Success tells the javascript what to do with the data sent back to it. All this means is that the script was able to communicate with the php without error. The alert() will display a pop up box with the data the php script sends back to it.

Now inside the <body></body> section of your test.html document you add this code:

<label>Enter your name:</label>
<input type="text" name="name" id="name"/>
<input type="button" value="Submit" onclick="return false;process_ajax();"/>

This will create a simple form with a text box to enter your name and a submit button. The onclick in the submit button tells the browser not to submit the form and to run the process_ajax function when the button is clicked.

Server Side PHP Code

This code goes inside the process.php file. Inside this file will be any code that you want to use process the data being sent. This is a very simple example but you can do anything with the data including insert or modify data in a database, check if a user name is already taken, etc..

<?php

    $name = $_POST['name'] ;
    if($name == "")
    {
        $message = "Please enter your name.";
    }
    else
    {
        if(date("a") == "am")
            $message = "Good morning ".$name.".";
        else
            $message = "Good afternoon ".$name.".";
    }

    json_encode($message);

?>

Again, very simple code here. If you do not enter your name, the code will return an alert message telling you to please enter your name. If you do enter your name, the line date("a") will determine whether it is in the am or pm and return the appropriate message to the user. This can be easily modified to be a simple mailing list sign up script, but I will save that for another article.

So as you can see, ajax is not that complicated, and jQuery makes it even easier. In todays web world ajax is used all over the place and can really enhance your website usability. It will also give the user an enriched experience. The only drawback is if the user has javascript turned off, they will not see any of this functionality.

Do you want this ajax functionality on your website? We can help. Contact us and let us know what you are looking for.