A Simple Example of an AJAX Call to Get a Random Chess Trivia from the Database

Step 1

First create the actual file that queries the database

In this example the file is called chess_trivia_get_random.php

<?php
##################################
#       VERSION HISTORY
##################################
#
#   chess_trivia_get_random.php
#
#   v1.0 - initial version - 8/16/11 - bnb
#
##################################

##################################
#   CONFIG FILES & SETTINGS
##################################

require_once('config.php');
require_once('functions.php');

// make session data available to page
session_start();


#####################################
#   SET DATABASE CONFIG & VARIABLES
#####################################
// Set database table
// NOTE: Needed for the sidebar
$v_database_table = "trivia";

// Connect to the database server
// NOTE: Needed for the sidebar
$link = connect_to_mysql($live); //function make database connection

// First get the record data
$v_sql_trivia = "SELECT * FROM $v_database_table ORDER BY Rand() LIMIT 1";

$result = @mysql_query($v_sql_trivia);
if (!$result) {
    exit('<p> Error performing query against the $v_database_table table: ' . mysql_error() . '</p>');
}
$v_Trivia_Desc = stripslashes(mysql_result($result, 0, "Trivia_Desc"));



$v_Trivia_Create_Dt = stripslashes(mysql_result($result, 0, "Trivia_Create_Dt"));
$v_Trivia_Last_Update_Dt = stripslashes(mysql_result($result, 0, "Trivia_Last_Update_Dt"));


echo '</div><!-- end  trivia-desc div -->';


mysql_close($link);
?>

            

Step 2

The next step is the AJAX code

This can be in the primary file, or an include js file

In this example it is included in the main.js file

// GET CHESS TRIVIA
    function getNextTrivia() {

        var xmlhttp;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }



        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                document.getElementById("chess-trivia-content").innerHTML=xmlhttp.responseText;
            }
        }

        xmlhttp.open("GET","http://www.dailychesspuzzles.com/includes/chess_trivia_get_random.php",true);
        xmlhttp.send();
    }

            

Step 3

The final step is to create the file that displays the AJAX

In this case the file is called chess_trivia_ajax_widget.php

<div id="chess-trivia-content">
    <?php include("chess_trivia_get_random.php"); ?>
</div><!-- end chess-trivia-content div -->
<a id="trivia-next" title="Get next random chess trivia factoid" href="javascript:getNextTrivia()" >Next Chess Fact</a>
            

Note: The next thing to try is to turn the AJAX into a generic call using parameters for the div name and the file to include.
Example: callAJAX('chess-trivia-content','chess_trivia_get_random.php')

Return to Test Directory Home Page