Dear friends:
I am working through The Book of JavaScript by thau! and I got stuck near the end. In chapter 16, it is discussing making an-synchronized calls, using a server side .php (which I am running from my own machine locally).
now the query.php works correctly when I run it from localhost, but the problem is that when I call it from my html page, the responseText is empty. This goes for both IE and FireFox. BTW, I'm running Win7 64Bit, and I am using the latest XAMPP with everything installed
This problem was compounded by the fact that the book assumes that google suggestions is still in beta testing, however it is now standard google. It wanted me to use "www.google.com/complete/search?js=true&qu=" which no longer exists, I found out that I have to use "www.google/search?js=true&q=" (see the key is no longer "qu", it is now "q") Having figured that out you'd think I had it in the bag. However....
Here is my query.php, as I said, it runs fine by itself when I type 'localhost/query.php?word=Spidey' into my browser:
Code:
<?php
include "Snoopy.class.php"; //snoopy.sourceforge.net
$snoopy = new Snoopy();
$requestedWord = $_REQUEST["word"];
$googleURL = "http://www.google.com/search?js=true&q=" . $requestedWord;
$snoopy->fetchtext($googleURL);
print $snoopy->results;
?>
but when I call it from this .html, the responseText is empty, as shown by the alert statement in the request.onreadystatechange = function statechanged(); same thing if I just echo text out from the query.php
Code:
<html>
<head>
<title>Querying Google Search</title>
<script type = "text/javascript">
<!--
function getSuggestions(the_word)
{
var request = null;
if (window.XMLHttpRequest)
{request = new XMLHttpRequest();}
else if (window.ActiveXObject)
{request = new ActiveXObject("Microsoft.XMLHTTP");}
var escaped_word = escape(the_word);
var the_URL = "http://localhost/query.php?word=" + escaped_word;
if (request)
{
request.open("GET", the_URL);
request.onreadystatechange = function statechanged()
{
if (request.readyState == 4)
{
alert(request.responseText); //shows that it is empty
displayResults(request.responseText);
}
}
request.send(null);
}
else
{alert("Sorry, you must update your browser before seeing Ajax in action.");}
}//getSuggestions
function displayResults(the_response)
{
var the_results = eval(the_response);
var display_me = "";
var splitter;
var this_result = null;
for (loop = 0; loop < the_results.length; loop++)
{
this_result = the_results[loop];
if (this_result != null)
{
splitter = this_result.split("\t");
display_me += "<tr><td align='left'>" + splitter[0] + "<\/td><td align='right'>" + splitter[1] + "<\/td><\/tr>";
}
}
document.getElementById("theResults").style.height = (the_results.length + parseInt(the_results.length / 5) + 1) + "em";
document.getElementById("theResults").innerHTML = "<table width='100%' border='0' cellpadding ='0' cellspacing='0'>" + display_me +"<\/table>";
}//displayResults
function sendRPCDone(ignore1, ignore2, word_array, count_array, ignore3)
{
var result_array = new Array();
for (var loop = 0; loop < word_array.length; loop++)
{result_array.push(word_array[loop] + "\t" + count_array[loop]);}
return result_array;
}
// -->
</script>
</head>
<body>
<input type = "text" size = "55" id = "theText" onKeyUp = "getSuggestions(this.value);" />
<div id = "theResults" style = "width:22em;border:1px black solid;padding-left:2px;padding-right:2px"></div>
</body>
</html>
I can't run it from The Book Of JavaScript's website (chapter 16 figure 9) because it uses the old Google suggestions while it was still in beta.
Does anyone have any suggestions? Thank you for your time.
notes: this should work like Google's own search box, i.e. a list should drop down with several suggestions all beginning with the text typed on the left, with the number of results for that suggestion to the right.