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 8 of 8
  1. #1
    New Coder
    Join Date
    May 2004
    Posts
    48
    Thanks
    5
    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,296
    Thanks
    10
    Thanked 584 Times in 565 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/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • 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,037
    Thanks
    0
    Thanked 250 Times in 246 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.

  • #4
    New Coder
    Join Date
    May 2004
    Posts
    48
    Thanks
    5
    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,037
    Thanks
    0
    Thanked 250 Times in 246 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

  • #6
    New Coder
    Join Date
    May 2004
    Posts
    48
    Thanks
    5
    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,296
    Thanks
    10
    Thanked 584 Times in 565 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/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #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


  •  

    Posting Permissions

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