Getting output from PHP script in Javascript using AJAX

TwistedJester · July 2007

I'm trying to do 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 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.

<?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.

rock217 · July 2007

Why do you need PHP for this? Are the words stored only in a database or something?

TwistedJester · July 2007

The reason I'm using PHP is because I don't know anything about handling files in javascript. I already have a php script that does what I want, and it's returning the right values, but for some reason the variable word isn't being assigned the response.

The words are stored in a flat file.

Jimmy King · July 2007

I'm not a php guy and have only done ajax once using a perl module that handled it all, so I can't help out there. The reason you aren't finding anything about accessing files via javascript, though, is because you can't. Your file is server side. The javascript executes client side.

.:Orion · July 2007

Should that processData function return a value at the end? I don't know much about javascript in particular and perhaps 'httpRequest.send(data);' does everything you need, it's just a wild guess.

I don't think the 'return httpRequest.responseText;' in your anonymous function is gonna return from your processData function, it's only going to return from itself.

That line in the anonymous function :

//word = httpRequest.responseText;

should assign the right value to word, if you can actually access word from there.

Penny Arcade

Quick Links

Getting output from PHP script in Javascript using AJAX

Posts