Php - Ajax

Discussion in 'PHP' started by Auxin, Sep 9, 2010.

  1. #1
    The goal of this tutorial is to learn you a bit about Ajax langage, and make quickly something working.
    First of all, I'm going to quote the definition about Ajax in Wikipedia.

    Definition :
    AJAX (shorthand for asynchronous JavaScript and XML) is a group of interrelated web development techniques used on the client-side to create interactive web applications. With AJAX, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page.


    In other term : You can retrieve data from server, without reloading your page.

    Let's see some code :
    Here is my Ajax function, coded in Javascript :

    The code is not that hard to understand : We create an HttpRequest or ActiveXObject depending of the browser, we send the data via POST, and we get the new informations and write it on the page.

    Well, you don't really need to know how everything works in this function, let's see now the parameters :

    function ajax_request(data,div,file)

    • data : It is the post data which we are going to send to the php script. You have to write it like that : "var1=v1&var2=v2&var3=v3...etc"
    • div : It is the container where the response will be written
    • file : It is the php file which will be requested for the process.


    You want an example ?

    ajaxfunction.js :
    (you already know it !)
    Index.html : (a form which asking your name ...)
    
    <html>
    <head>
    <title>Ajax -- Support Forums Tutorial</title>
    <script type="text/javascript" src="ajaxfunction.js"></script>
    </head>
    
    <body>
    <form name="form" onSubmit="ajax_request('promptbox='+document.getElementById('promptbox').value,'answer','phpanswer.php');return(false);">
        Enter your name > <input type="text" id="promptbox">
    </form><br />
    
    <div id="answer">
    Php is sleeping.
    </div>
    
    </body>
    </html>
    
    Code (markup):
    phpanswer.php (php will receive data and will answer !)
    
    <?php
    if (isset($_POST['promptbox'])){
    	echo "PHP says : Hello ".$_POST['promptbox']." ! *yawns*";
    }
    ?>
    
    PHP:
    So, let's take a look into the code :
    onSubmit="ajax_request('promptbox='+document.getElementById('promptbox').value,'answer','phpanswer.php')"
    1. The first parameter send "promptbox="+the value into the promptbox
    2. It will send the data into the div id = "answer"
    3. And it will request the phpanswer.php file !

    Written by: Auxin :cool:
     
    Auxin, Sep 9, 2010 IP
  2. twitterdev

    twitterdev Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Thanks for share, nice tutorial :)
     
    twitterdev, Sep 9, 2010 IP
  3. SEOaaron

    SEOaaron Peon

    Messages:
    107
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for the post :)
     
    SEOaaron, Sep 9, 2010 IP
  4. Auxin

    Auxin Peon

    Messages:
    52
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Glad to know that you liked it. If you need any help or got any suggestions, post them o'er here.
     
    Auxin, Sep 10, 2010 IP