View Single Post
Old 12-15-2005, 05:09 AM   PM User | #1
Velox Letum
Senior Coder

 
Join Date: Apr 2005
Location: Colorado, United States
Posts: 1,208
Thanks: 0
Thanked 0 Times in 0 Posts
Velox Letum is an unknown quantity at this point
Simple AJAX/PHP Example

As I posted this in a topic in normal PHP forum, I thought I'd also post it in here where it can be discussed properly. AJAX is used to add more interactivity to a web page with Javascript and XML using what's known as an XMLHTTP request. This example combines Javascript, PHP, and XML to effectively provide dynamic response to a MySQL query.

This example uses the Sarissa XMLHTTP library, a cross-browser XMLHTTP wrapper which can be downloaded at http://www.sourceforge.net/projects/sarissa.

The HTML/Javascript page (conforms to XHTML 1.0 Transitional standards):
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<
head>
<
title>AJAX Example 1</title>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<
script language='JavaScript' src='sarissa.js' type='text/javascript'></script>
<script language='JavaScript' type='text/javascript'>
    function deleterow(id) {
    
        if (confirm('Are you sure you want to delete row number ' + id + '?')) {
        
            // Set up the request
            var xmlhttp =  new XMLHttpRequest();
            xmlhttp.open('POST', 'mycheck.php', true);
            
            // The callback function
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4) {
                    if (xmlhttp.status == 200) {
                        var response_stat = xmlhttp.responseXML.getElementsByTagName('deleted')[0].firstChild.data;
                        if (response_stat == 1) {
                            alert('Deleted row successfully.');
                        } else {
                            alert('Failed to delete row: ' + xmlhttp.responseXML.getElementsByTagName('error')[0].firstChild.data + '.');
                        }
                    }
                }
            }
            
            // Send the POST request
            xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xmlhttp.send('row=' + id);
        }
    }
</script>
</head>
<body>
<input type="button" onclick="deleterow(3);" value="Delete Row" />
</body>
</html> 
The PHP Page:
PHP Code:
<?php
if (isset($_POST['row'])) {
    
// Identify as XML
    
header('Content-type: text/xml');

    
// MySQL Stuff (connect, select, query)
    
$result mysql_query('DELETE FROM row WHERE row="' $_POST['row'] . '"');

    
// XML Preamble
    
$xml '<?xml version="1.0" encoding="utf-8"?>' "\n";

    
// Begin XML response
    
$xml .= '<xmlresponse>' "\n";

    
// Build result string
    
if ($result) {
        
$xml .= '<deleted>1</deleted>' "\n";
    } else {
        
$xml .= '<deleted>0</deleted>' "\n";
        
$xml .= '<error>' mysql_error() . '</error>' "\n";
    }

    
// End XML response
    
$xml .= '</xmlresponse>' "\n";

    
// Output XML string
    
echo $xml;
}
?>
As you can see, this could be extremely useful in a number of projects. You could dynamically load data into a table, and use XMLHTTP requests to modify it on demand. As long as the browser supports Javascript, the applications for AJAX are virtually limitless.
__________________
"$question = ( to() ) ? be() : ~be();"

Last edited by Velox Letum; 12-15-2005 at 07:16 AM..
Velox Letum is offline   Reply With Quote