Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    Senior Coder
    Join Date
    Apr 2005
    Location
    Colorado, United States
    Posts
    1,208
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.
    Last edited by Velox Letum; 12-15-2005 at 07:16 AM.
    "$question = ( to() ) ? be() : ~be();"


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •