Connecting to Google Suggest

To connect to Google Suggest, you call a function named getData which does exactly that — gets the live search data, like this:

function getSuggest(keyEvent)
{
keyEvent = (keyEvent) ? keyEvent: window.event;
input = (keyEvent.target) ? keyEvent.target :
keyEvent.srcElement;
if (keyEvent.type == “keyup”) {
if (input.value) {
getData(“google.php?qu=” +input.value);
}
.
.
.
}
}

If no text exists in the text field, the user deleted that text, so you can clear the suggestions (which appear in a <div> element named targetDiv) as follows:

function getSuggest(keyEvent)
{
keyEvent = (keyEvent) ? keyEvent: window.event;
input = (keyEvent.target) ? keyEvent.target :
keyEvent.srcElement;
if (keyEvent.type == “keyup”) {
if (input.value) {
getData(“google.php?qu=” +
input.value);
}
else {
var targetDiv = document.getElementById(“targetDiv”);
targetDiv.innerHTML = “<div></div>”;
}
}
}

How does the getData function work? This function calls the PHP script that actually interacts with Google Select, and passes on the current search term on to that script. This function is called with the relative URL to call, which is this (where term holds the search term):

google.php?qu=” + term;

That URL is opened in the getData function this way:

<script language = “javascript”>
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject(“Microsoft.XMLHttp”);
}
function getData(dataSource)
{
if(XMLHttpRequestObject) {
XMLHttpRequestObject.open(“GET”, dataSource);
.
.
.
}
}

0 Comments

Read More »

XML in ACTION : AJAX Sample Program

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en"> <head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
<title>Ajax learners</title>
<script type="text/javascript" src="fetchxml.js"></script>
</head>
<body>
<h1>Ajax Technologies</h1>
<ul>
<li>
<a href="w3c.xml"
onclick="grabFile(this.href); return false;">W3C</a>
</li>
<li>
<a href="XML.xml"
onclick="grabFile(this.href); return false;">XML</a>
</li>
<li>
<a href="CSS.xml"
onclick="grabFile(this.href); return false;">CSS</a>
</li>
<li>
<a href="XMLHttpRequest.xml"
onclick="grabFile(this.href); return false;">XMLHttpRequest</a>
</li>
<li>
<a href="JavaScript.xml"
onclick="grabFile(this.href); return false;">JavaScript</a>
</li>
</ul>
<div id="details"></div>
</body>
</html>


// JavaScript Document fetchxml.js
function getHTTPObject() {
var xhr = false;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
xhr = false;
}
}
}
return xhr;
}

function grabFile(file) {
var request = getHTTPObject();
if (request) {
request.onreadystatechange = function() {
parseResponse(request);
};
request.open("GET", file, true);
request.send(null);
}
}

function parseResponse(request) {
if (request.readyState == 4) {
if (request.status == 200 || request.status == 304) {
var data = request.responseXML;
var name = data.getElementsByTagName("name")[0].
firstChild.nodeValue;
var website = data.getElementsByTagName("website")[0].
firstChild.nodeValue;
var email = data.getElementsByTagName("email")[0].
firstChild.nodeValue;
var header = document.createElement("h2");
var mailto = document.createElement("a");
mailto.setAttribute("href","mailto:"+email);
var text = document.createTextNode(name);
mailto.appendChild(text);
header.appendChild(mailto);
var link = document.createElement("a");
link.setAttribute("href",website);
var linktext = document.createTextNode(website);
link.appendChild(linktext);
var details = document.getElementById("details");

while (details.hasChildNodes()) {
details.removeChild(details.lastChild);
}

details.appendChild(header);
details.appendChild(link);
}
}
}

0 Comments

Read More »