Ten Super-Useful Ajax Resources

There’s plenty of Ajax help on the Internet, ready to give you all sorts of information and advice. You can find a good list of Ajax resources in this post, including the Web address for the original article by Jesse James Garrett of Adaptive Path that started the whole Ajax juggernaut going. You can also get wrapped up in any of the Ajax blogs and discussion groups that I introduce here.

Don’t forget, this being the Internet, that URLs can change without notice.And also keep in mind that the Ajax phenomenon is still exploding — more sites, frameworks, and discussions are appearing all the time. Keep in touch with the Ajax community online — there are great days ahead.

The Original Ajax Page



www.adaptivepath.com/publications/essays/archives/000385.php

Yep, this is the big one, the original Ajax page where Jesse James Garrett coined the term Ajax. This article, named “Ajax: A New Approach to Web applications,” even includes a nice picture of Jesse. Although some people have noted that all the technologies involved in Ajax were in use before this article came out, the article, nevertheless, focused vast amounts of attention on Ajax and what it could do.
Adaptive Path says, “Since we first published Jesse’s essay, we’ve received an enormous amount of correspondence from readers with questions about Ajax.” You can find a question and answer section at the end of the page where Jesse answers some of those questions.

The Ajax Patterns Page



The Ajax Patterns page is a great Ajax resource. Patterns refers to best programming practices, and there’s a lot of discussion on this site about the topic.

In addition, this site has a great page of links to Ajax examples (http://
ajaxpatterns.org/Ajax_Examples
) and to the various Ajax frameworks
available (http://ajaxpatterns.org/Ajax_Frameworks). In Part III, It explains many ways in which you put these frameworks to use.

In my view, the interactive discussion and huge number of resources help make this the best Ajax site available anywhere, bar none. Take a look!

The Wikipedia Ajax Page



Wikipedia’s Ajax page is also a great resource. Wikipedia is a free, online encyclopedia, and this page has an in-depth discussion with many links on what Ajax is (and isn’t).
This page has one of the best all-around Ajax overviews you’re going to find anywhere, including not only a discussion of what Ajax is good for, but a discussion of problems — in other words, both the pros and cons.
And you can also find many links to Ajax resources of all kinds, from Ajax examples to Ajax frameworks.

Ajax Matters



www.ajaxmatters.com/r/welcome

Ajax Matters is another power-packed Ajax site, currently updated all the time, on all things about Ajax. It’s great for all-around Ajax topics of any kind.Here’s a quick list of what you can find:

1.Headlines on new product releases
2.Links to books, example sites that use Ajax, and resources that Ajax developers need, such as JavaScript references
3.Frameworks
4.Articles
5.Discussions

XMLHttpRequest Object References



Where are the official references showing how to use XMLHttpRequest objects in the various browsers? You can find the official references for each browser, listing object methods and properties at the following sites:

1.Internet Explorer: http://msdn.microsoft.com/library/
default.asp?url=/library/en-us/xmlsdk/html/
7924f6be-c035-411f-acd2-79de7a711b38.asp


2.Mozilla (including Firefox) and Apple Safari:
http://developer.apple.com/internet/webcontent/xmlhttpreq.html

Ajax Blogs



A handful of Ajax blogs out there have a lot of great Ajax commentary. Here’s a list of some of the better ones:

1.http://ajaxblog.com
2.www.ajaxian.com
3.http://weblogs.asp.net/mschwarz/archive/2005/11.aspx
4.www.robsanheim.com/category/software/ajax

Ajax Examples



Sometimes, nothing helps more than seeing what you want to do already done in an example. And there are plenty of examples available for you. For instance, a very simple example showing how to get started with Ajax is available at

www.openajax.net/wordpress/simple-ajax

You can find two of the best lists of Ajax examples at these URLs:
The fiftyfoureleven.com list of Ajax examples is at

http://www.fiftyfoureleven.com/resources/programming/xmlhttprequest/examples

Ajax Pattern’s list of examples is at
http://ajaxpatterns.org/Ajax_Examples

Ajax Tutorials



There are a number of Ajax tutorials available on the Internet, but most of them deal with using specific Ajax-enabled frameworks, such as Ruby on Rails. Here are some good general-purpose Ajax tutorials not tied to a specific framework:

1.A “30-second” Ajax tutorial
http://marc.theaimsgroup.com/?l=php-general&m=112198633625636&w=2

2.This tutorial uses PHP:
http://www.phpbuilder.com/columns/kassemi20050606.php3

3.This tuorial builds a tree of nodes, whose text is downloaded as needed:
http://www.codeproject.com/aspnet/ajax_treeview.asp

Ajax Discussion Group



http://groups.google.com/group/ajax-world

If you’re looking for interactive Ajax help, check out the active Google group discussion on Ajax.

This group is a good place to go to ask questions and receive answers about Ajax. No matter how complex the question, there’s probably someone on this group that can offer a few suggestions.

More Depth on XMLHttpRequest



http://jibbering.com/2002/4/httprequest.html

Here’s a site that has more information on how to use XMLHttpRequest objects and goes into more depth than the usual Ajax page.

You can find many sites that give you the Ajax basics, but sites like this one, which go deeper into the topic, are very useful when you’re ready to move on from the preliminary discussions. This site includes how to use Head requests and much more.

Google live search - Connecting to Google Suggest - shows the whole code to help you

<html>
<head>
<title>Google live search</title>
<style>
#targetDiv {
background-color: #FFEEAA;
width: 30%;
}
</style>
<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);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
eval(XMLHttpRequestObject.responseText);
}
}
XMLHttpRequestObject.send(null);
}
}
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>”;
}
}
}
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;
}
</script>
</head>
<body>
<H1>Google live search</H1>
Search for <input id = “textField” type = “text” name = “textField” onkeyup = “getSuggest(event)”>
<div id = “targetDiv”><div></div></div>
</body>
</html>

Check out the PHP script, google.php, which is the script that actually does the communicating with Google. This one takes a little PHP of the kind that appears in detail in Chapter 10. This script is passed the term the user has entered into the text field, and it should get some suggestions from Google, which it does like this with the PHP fopen (file open) statement:

<?php
$handle = fopen(“http://www.google.com/complete/search?hl=en&js=true&qu=” .
$_GET[“qu”], “r”);

.
.
.


This gives you a PHP file handle, which you can use in PHP to read from the Google URL. Here’s how that looks in PHP, where a while loop keeps reading data from Google as long as the end of the data marker isn’t seen. You can check if you’ve reached the end of the data with the feof function, which returns true if the end of the data has been reached:

<?php
$handle = fopen(“http://www.google.com/complete/search?hl=en&js=true&qu=” .
$_GET[“qu”], “r”);
while (!feof($handle)){
.
.
.
}
?>

To get the data from Google, you can use the fgets (file get string) function, and echo the fetched text, which sends that text back to the browser. Here’s how you can make that happen:

<?php
$handle = fopen(“http://www.google.com/complete/search?hl=en&js=true&qu=” .
$_GET[“qu”], “r”);
while (!feof($handle)){
$text = fgets($handle);
echo $text;

}
fclose($handle);
?>

And that’s all you need. Now this script, google.php, will read the suggestion data from Google and send it back to your script.

Everything works as expected.

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,

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);
.
.
.
}
}

Detecting keystrokes

The getSuggest function is supposed to be passed an event object that it will refer to as keyEvent, which holds data about the key event that just took place:

function getSuggest(keyEvent)
{
.
.
.
}

However, this method of passing the event object doesn’t work in the Internet Explorer, which means getSuggest won’t be passed anything in that browser.You have to use the window.event object instead in the Internet Explorer.So the first line of getSuggest is a typical line of JavaScript that uses the JavaScript conditional operator to make sure you have an event object to work with. Here’s an example that
shows how to use this operator:

var temperature = condition ? 72 : 55;

If condition is true, the temperature variable will be assigned the value 72; if condition is false, temperature will be assigned 55. In the getSuggest function, you can use the conditional operator to test whether keyEvent has a non-zero value. If it doesn’t, you should use window.event instead:

function getSuggest(keyEvent)
{
keyEvent = (keyEvent) ? keyEvent: window.event;
.
.
.
}

You can also determine which control the user was typing into, but that depends on which browser the user has. In the Internet Explorer, you use the srcElement property of the keyEvent object, but otherwise, you use the target property to get the control the user was typing into:

function getSuggest(keyEvent)
{
function getSuggest(keyEvent)
{
keyEvent = (keyEvent) ? keyEvent: window.event;
input = (keyEvent.target) ? keyEvent.target :
keyEvent.srcElement; .
.
.
}

Excellent. You have all the data you need about the key event. Now you can
use the following code to check whether the event was a key up event:

function getSuggest(keyEvent)
{
keyEvent = (keyEvent) ? keyEvent: window.event;
input = (keyEvent.target) ? keyEvent.target :
keyEvent.srcElement;
if (keyEvent.type == “keyup”) {
.
.
.
}
}

If the event was a key up event, it’s time to read the struck key. If there is
some text in the text field, it’s time to connect to Google Suggest.

Handling the data Google sends you

What does the code look like in google.html? The text field where the user enters text is tied to a function named getSuggest by using the onkeyup event. As a result, getSuggest will be called every time the user types and releases a key. (Note that the event object is passed to getSuggest by this code, because that object holds information about which key was pressed, and also note the <div> element where the suggestions will appear,targetDiv.)

Here’s what the code looks like:

<body>
<H1>Google live search</H1>
Search for <input id = “textField” type = “text” name = “textField” onkeyup = “getSuggest(event)”>

<div id = “targetDiv”><div></div></div>
</body>

Connecting to Google for a Live Search

How can you connect to Google Suggest yourself? Say that you placed the search term you wanted to search for in a variable named term. You could then open this URL:

http://www.google.com/complete/search?hl=en&js=true&qu=” + term;

You get back a line of JavaScript from Google Suggest that calls a function named sendRPCDone. Here are the parameters passed to that function:

sendRPCDone(unusedVariable, searchTerm, arrayTerm, arrayResults, unusedArray)

What does the actual JavaScript you get back from Google Suggest look like?

If you’re searching for “ajax”, this is the JavaScript you’ll get back from Google as of this writing:

sendRPCDone(frameElement, “ajax”, new Array(“ajax”, “ajax amsterdam”,
“ajax fc”, “ajax ontario”, “ajax grips”, “ajax football club”, “ajax public
library”, “ajax football”, “ajax soccer”, “ajax pickering transit”), new
Array(“3,840,000 results”, “502,000 results”, “710,000 results”, “275,000
results”, “8,860 results”, “573,000 results”, “40,500 results”, “454,000
results”, “437,000 results”, “10,700 results”), new Array(“”));


You can handle this by putting together a function named sendRPCDone that will display this data

Useful Links on Adobe Flex

Your Ad Here

Latest Books on Adobe Flex