I figured it couldn’t be that hard, but for some reason I was struggling to get AJAX to work like I wanted, and in talking to other developers I found out I wasn’t alone. For all of you that can relate to my story, here’s quick tutorial.

The Setup

We need a simple HTML page with a block element, with an id of  “element”. This page will also have the Jquery/Javascript needed to make the magic happen ( Usually you’d like to have most of your scripts in a separate file.) Later on we’ll add more to it, but this is all we need to get started.

<!-- import jQuery wherever it is, in this case it's the same dir -->

<script src="jquery.js" type="text/javascript"> >/script> <!-- This is the secret sauce --<
<script type="text/javascript">
    $(document).ready(function ()
    {
        $('#element').load('output.php');
    });
</script>
    >div id="element" >/div>

Let’s take a minute to explain the code above. First we need to import jQuery. Then we run our little script which says when the DOM is ready grab the output from output.php and attach it to #element (that is the div with id ‘element’.) The best part of the load function is that it expects a piece of HTML to attach to the given selector. It’s simple, rudimentary, and exactly what backend developers need.

Of course, we also need a very simple PHP script to give us the output we want to bring in via AJAX; I’ll name the file output.php. Again, we’ll add some complexity in latter examples.

<?php
echo "Hello AJAX";
?>

At first sight this example seems as if the “Hello Ajax!” message is just part of the page we’re viewing, so we’re going to modify the scripts a bit to show that is actually making a call to the script. Alternatively you can use the Firebug console to view the request and script information (highly recommended.)

Wait for me!

This time around, instead of making the request as soon as the DOM is ready, we’re going to do it at the push of a button.

<script src="jquery.js" type="text/javascript"></script> <!-- import jQuery wherever it is --> <!-- This is the secret sauce -->
<script type="text/javascript">
    $(document).ready(function ()
    {
        $("#btn").click(function ()
        {
            $("#element").load('output.php');
        });
    })
</script>
<div id="element"></div>
<input id="btn" type="submit" />

This time around we told the function to wait for the button with id of ‘btn’ to be clicked before fetching the output. We do so by using the click function of javascript. The same could be accomplished by adding onClick to the button in the HTML.

The Final Act

In the last example, I’ll show you how to combine the the power of jQuery and PHP to bring in real HTML to the page. Grab good ‘ole output.php and modify it as follows

//output.php

echo '<h1>Hello AJAX</h1>';
echo '<p>This is a paragraph right after the Hello Ajax title</p>';

When you click on the button now, you get properly formatted HTML. Yay AJAX!

Please keep in mind that there are much more advanced ways of doing this (witin and without jQuery) that allow for much more granular control, yet this is an extremely simple but powerful way to get some AJAX rolling.

Bookmark It

Hide Sites