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 10 of 10
  1. #1
    New Coder
    Join Date
    May 2004
    Posts
    56
    Thanks
    12
    Thanked 0 Times in 0 Posts

    simple Ajax program

    I've been learning ajax, mostly by copying code posted online, and I've had good success so far. To help me understand ajax, I wanted to write the SIMPLEST example I could. Here's my failed attempt.

    I create a button and 2 text boxes. I type something into the 1st box, and try to have ajax send it to a php and echo it back to my javascript and place it in the 2nd box. If I uncomment the commented line, the program works fine without sending it, but I want the ajax and php to do the work.

    Any idea what's wrong?

    Code:
    <html><head><title></title></head><body>
    <input type='button' id = 'btnSend' onclick="send()" value="Do It"><br>
    <input type='text' id = 'txtInput'>
    <input type='text' id = 'txtOutput'>
    
    <script type = 'text/javascript'>
       function send() {
          //txtOutput.value = txtInput.value;
          var ajax = new XMLHttpRequest();
          ajax.open("POST",'sleep.php',false); 
          ajax.send(txtInput.value);
          ajax.onreadystatechange = function(){txtOutput.value = ajax.responseText;}
       }
    </script>
    </body></html>
    PHP Code:
    <?php
    if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
    {
       
    $receiveMe=$GLOBALS['HTTP_RAW_POST_DATA'];
    }
    echo 
    "$receiveMe";
    ?>
    Last edited by tony873004; 01-28-2014 at 05:33 AM. Reason: replaced 'remove' with 'uncomment'

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,372
    Thanks
    11
    Thanked 591 Times in 572 Posts
    Code:
    ajax.open("POST",'sleep.php',false);
    should be

    Code:
    ajax.open("POST",'sleep.php',true);
    in order to use onreadystatechange(). if you set it false, you can simply use responseText at the bottom of send() after ajax.send()...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • Users who have thanked rnd me for this post:

    tony873004 (01-29-2014)

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by rnd me View Post
    if you set it false, you can simply use responseText at the bottom of send() after ajax.send()...
    And expect the browser to freeze if the sync ajax call takes time to process for some reason.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #4
    New Coder
    Join Date
    May 2004
    Posts
    56
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Thanks rnd me! That worked! And thanks glenngv. So are you saying that "true" is better since it won't hang the browser?

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    true means the ajax call is asynchronous. Here's an article on asynchronous and synchronous ajax.

    http://javascript.about.com/od/ajax/a/ajaxasyn.htm
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #6
    New Coder
    Join Date
    May 2004
    Posts
    56
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Ok, thanks. I have a new question. Now I'd like to echo the value of the first text box to not only the 2nd text box, but also to a text box on a different page called monitor.html. Googling gave me the impression I could do this, but it doesn't work.
    PHP Code:
    <?php
    if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
    {
       
    $receiveMe=$GLOBALS['HTTP_RAW_POST_DATA'];
    }

    echo 
    $receiveMe('monitor.html');
    echo 
    "$receiveMe";

    ?>
    monitor.html:
    Code:
    <html><head><title></title></head><body>
    
    <input type='text' id = 'txtOutput'>
    
    <script type = 'text/javascript'>
          //txtOutput.value="hello world";  //verify that the script is executing
          var ajax = new XMLHttpRequest();
          ajax.open("POST",'sleep.php',true); 
          ajax.onreadystatechange = function(){txtOutput.value = ajax.responseText;}
    </script>
    </body></html>

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,372
    Thanks
    11
    Thanked 591 Times in 572 Posts
    Quote Originally Posted by tony873004 View Post
    Ok, thanks. I have a new question. Now I'd like to echo the value of the first text box to not only the 2nd text box, but also to a text box on a different page called monitor.html. Googling gave me the impression I could do this, but it doesn't work.
    PHP Code:
    <?php
    if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
    {
       
    $receiveMe=$GLOBALS['HTTP_RAW_POST_DATA'];
    }

    echo 
    $receiveMe('monitor.html');
    echo 
    "$receiveMe";

    ?>
    monitor.html:
    Code:
    <html><head><title></title></head><body>
    
    <input type='text' id = 'txtOutput'>
    
    <script type = 'text/javascript'>
          //txtOutput.value="hello world";  //verify that the script is executing
          var ajax = new XMLHttpRequest();
          ajax.open("POST",'sleep.php',true); 
          ajax.onreadystatechange = function(){txtOutput.value = ajax.responseText;}
    </script>
    </body></html>
    that's a php problem for a php forum...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #8
    New to the CF scene
    Join Date
    Feb 2014
    Location
    san diego
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hello everyone

  • #9
    New Coder
    Join Date
    May 2004
    Posts
    56
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Sorry for opening this old thread, but I'm having trouble with this again.

    When I made the change that rnd me suggested it worked just fine. That was back in January. Today this code doesn't work fine anymore. If I type 'hello' into the first text box, the php doesn't echo back 'hello'. It echos back the entire php code. My 2nd text box is filled with <?phpif (isset($GLOBALS["HTTP_RAW_POST_DATA"])){ $receiveMe=$GLOBALS['HTTP_RAW_POST_DATA'];}echo "$receiveMe";?>

    I'm completely copying and pasting from my first post in this thread to avoid typos (and changing false to true). Why did this work in January, but not in July?

  • #10
    New Coder
    Join Date
    May 2004
    Posts
    56
    Thanks
    12
    Thanked 0 Times in 0 Posts
    I solved my own problem. The code works just fine if I upload it to my server and run it from there. But I was running it directly off my computer, which I never configured to run php.


  •  

    Posting Permissions

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