Dream.In.Code -> 03_call php file from html using the prototype lib

Subscribe to The New and Improved Ruby Codes

03_call php file from html using the prototype lib

18 May 2011

Leave Comment

Posted by NotarySojac

Ok, in our last example, we called a PHP file from within a web page. It was a fairly simple procedure to understand, but it took a lot of lines. Like 30 or 40 I think! That's crazy, especially considering most of it was browser compatibility workarounds. So instead of using AJAX that way, we're better off using the prototype library.

prototype.js can be obtained from: http://www.prototypejs.org/download

You put it in the same directory as your .html file and add this line:

<head>
        <script src="prototype.js" type="text/javascript"></script>
        ...
</head>

If you're using netbeans, it will automatically look through the .js file and offer you code completion assistance!

OK, so let's set you up with the examples:

(index.html)


<!DOCTYPE html>
<html>
    <head>
        <script src="prototype.js" type="text/javascript"></script>
        <script>
            function bla()
            {
                var url = "getme.php";
                var pars = "foo=bar";  //  so it will call like this:  bla.com/getme.php?foo=bar
                var myBlaObj = $('printhere');
                
                var myAjax = new Ajax.Request(
                            url, 
                            {
                                    method: 'get', 
                                    parameters: pars,
                                    onComplete: showResponse
                            });
            }
            
            
            function showResponse(originalRequest)
            {
                //put returned XML in the textarea
                var elementToPrintTo = $('printhere');
                
                elementToPrintTo.innerHTML = originalRequest.responseText;
            }
            
        </script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Call a PHP using prototype's AJAX support</title>
    </head>
    <body>
        <?php
            // put your code here
            echo "this is a test php page <br>";
        ?>
        
        <input type="button" value="Clicky!" onclick="bla();"/>
        
        <div id="printhere"> </div>
    </body>
</html>

(getme.php)