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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Getting output from PHP script in Javascript using AJAX

    I'm trying to do a game of Hangman I did in PHP in javascript using AJAX so that there is no need to reload the page while playing. However, I'm running into a problem. I'm trying to access the output of a PHP script that gives me a random word via AJAX. However, it's not working. I'd try doing this part in Javascript but my class textbook has nothing about file access in Javascript and I'm having a hard time finding a good resource online. Here's my code.
    Code:
    <?php
    session_start();
    $stuff = $_SESSION['id'];
    ?><html>
    <head>
    <title>Javascript Hangman</title>
    <script type = "text/javascript">
    
    function processData(){
                    //alert("Actually in ProcessData block");
            var httpRequest;
     
            var type = arguments[0];  // get type of call
    
            if (window.XMLHttpRequest) { // Mozilla, Safari, ...
                httpRequest = new XMLHttpRequest();
                if (httpRequest.overrideMimeType) {
                    httpRequest.overrideMimeType('text/xml');
                }
            }
            else if (window.ActiveXObject) { // IE
                try {
                    httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
                    }
                catch (e) {
                    try {
                        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (e) {}
                }
            }
            if (!httpRequest) {
                alert('Giving up :( Cannot create an XMLHTTP instance');
                return false;
            }
     
            // Set data to submit to server, based on the type of the action
            var data;
            if (type == 0)
            {
                data = 'type=word'; 
                //alert(data);
            }
           
            httpRequest.open('POST', 'getword.php', true);
            httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    
            httpRequest.onreadystatechange = function()
                    {
                            //alert("In httprequest block");
                            //alert(httpRequest.responseText);
                            //word = httpRequest.responseText;
                            if (httpRequest.readyState == 4)
                            {
                                    if (httpRequest.status == 200)
                                    {
                                            return httpRequest.responseText;
                                    }
                            }
                            alert(httpRequest.responseText);
                    };
            //else
                                    //other requests
    
            httpRequest.send(data);
        }
    </script>
    </head>
    <body>You're logged in.
    <script type = "text/javascript" language = "javascript">
    var userid = '<?=$stuff?>';
    var word = processData(0);
    document.writeln("User id = ", userid);
    document.writeln("Word = ", word);
    </script>
    </body>
    </html>
    Sorry if it's kind of sloppy, we only got a handout and a single example on how to handle AJAX, and I've already tried a bunch of different things to try to get this work as evidenced by the commented out code. Whenever I run it, word comes out undefined, although if I have the alerts enabled, it comes up with the output of the php script.

  • #2
    Senior Coder
    Join Date
    Mar 2003
    Location
    Atlanta
    Posts
    1,037
    Thanks
    14
    Thanked 30 Times in 28 Posts
    I don't know AJAX but what happens if instead of returning the httpRequest.responseText you were to set some property equal to it. I'm not sure its being returned exactly where you think it is. B/c I don't think you're calling it from your HTML page are you?

    Try changing
    Code:
    return httpRequest.responseText;
    to
    Code:
    window.document.getElementById('wordDiv').innerText = httpRequest.responseText;
    Where you have a div with an id of 'wordDiv' that receives the value of the response text.

    Alternatively, you can use something like AjaxUpdater to retrieve the information from your source (i.e. your .php file or whatever).

    Here's a link to show you how to use the Ajax Updater. (You'll have to have the prototype library. You can get it from here.)
    http://www.ajaxtutorial.net/index.ph...totype-part-2/
    Last edited by StupidRalph; 07-28-2007 at 06:48 AM.
    Most of my questions/posts are fairly straightforward and simple. I post long verbose messages in an attempt to be thorough.


  •  

    Posting Permissions

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