Loading

Monday, January 14, 2008

Showing Google’s response

When you have the search data, you need to show the response from Google, which will be JavaScript. The response is executed with the JavaScript eval function:

function getData(dataSource)
{
if(XMLHttpRequestObject) {
XMLHttpRequestObject.open(“GET”, dataSource);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
eval(XMLHttpRequestObject.responseText);
}
}
XMLHttpRequestObject.send(null);
}
}

This calls the sendRPCDone function. All that’s left in google.html is to set up that function in this way:

function sendRPCDone(unusedVariable, searchTerm, arrayTerm,
arrayResults, unusedArray)
{
.
.
.
}

You fill the <div> element, targetDiv, with data you get from Google in the sendRPCDone function, using an HTML table to align the columns. Here’s how to create the table and start looping over the suggestions Google returned:

function sendRPCDone(unusedVariable, searchTerm, arrayTerm,
arrayResults, unusedArray)
{
var data = “<table>”;
var loopIndex;
if (arrayResults.length != 0) {
for (var loopIndex = 0; loopIndex < arrayResults.length;
loopIndex++) {
.
.
.
}
}
data += “</table>”;
var targetDiv = document.getElementById(“targetDiv”);
targetDiv.innerHTML = data;

}

Next, you give each suggestion its own hyperlink which — when clicked — searches Google, redirecting the browser to the Google Web site like this:

function sendRPCDone(unusedVariable, searchTerm, arrayTerm,
arrayResults, unusedArray)
{
var data = “<table>”;
var loopIndex;
if (arrayResults.length != 0) {
for (var loopIndex = 0; loopIndex < arrayResults.length;
loopIndex++) {
data += “<tr><td>” +
“<a href=’http://www.google.com/search?q=” +
arrayTerm[loopIndex] + “‘>” + arrayTerm[loopIndex] +
‘</a></td><td>’ + arrayResults[loopIndex] + “</td></tr>”;

}
}
data += “</table>”;
var targetDiv = document.getElementById(“targetDiv”);
targetDiv.innerHTML = data;
}

The last touch: the targetDiv <div> element is given a light yellow background
in the <style> element in the <head> section

<html>
<head>
<title>Google live search</title>
<style>
#targetDiv {
background-color: #FFEEAA;
width: 30%;
}
</style>
.
.
.

And that’s all it takes.
Because this Google example is a complicated one,

SHARE TWEET

Thank you for reading this article Showing Google’s response With URL http://x-tutorials.blogspot.com/2008/01/showing-googles-response.html. Also a time to read the other articles.

0 comments:

Write your comment for this article Showing Google’s response above!