Ajax Lessons|Simple Ajax Tutorials and News

Over at NappyFab.com the author has posted a bunch of animated Ajax activity indicators. There are images for both light and dark backgrounds.

Check them out

Technorati Tags: Ajax, Indicators

Over at the IBM developerWorks website a new tutorial on Ajax and DOM has been posted.

Like many Web programmers, you have probably worked with HTML. HTML is how programmers start to work on a Web page; HTML is often the last thing they do as they finish up an application or site, and tweak that last bit of placement, color, or style. And, just as common as using HTML is the misconception about what exactly happens to that HTML once it goes to a browser to render to the screen. Before I dive into what you might think happens — and why it is probably wrong — I want you need to be clear on the process involved in designing and serving Web pages:

1. Someone (usually you!) creates HTML in a text editor or IDE.
2. You then upload the HTML to a Web server, like Apache HTTPD, and make it public on the Internet or an intranet.
3. A user requests your Web page with a browser like Firefox or Safari.
4. The user’s browser makes a request for the HTML to your Web server.
5. The browser renders the page it receives from the server graphically and textually; users look at and activate the Web page.

While this feels very basic, things will get interesting quickly. In fact, the tremendous amount of "stuff" that happens between steps 4 and 5 is what the focus of this article. The term "stuff" really applies too, since most programmers never really consider exactly what happens to their markup when a user’s browser is asked to display it:

• Does the browser just read the text in the HTML and display it?
• What about CSS, especially if the CSS is in an external file?
• And what about JavaScript — again often in an external file?
• How does the browser handle these items and how does it map event handlers, functions, and styles to that textual markup?

It turns out that the answer to all these questions is the Document Object Model. So, without further ado, let’s dig into the DOM.

Read the full tutorial

Technorati Tags: Ajax, IBM, Javascript, DOM

Over at Max Kiesler’s blog, Max has posted up 30 Ajax tutorials for you to start learning Ajax and it’s features. One of our very own workshops made the cut: Ajax Workshop 2: Building Tabbed Data.

here are quite a few AJAX demos and examples on the web right now. While these are invaluable to learning AJAX, some people need a bit more information than just a raw piece of code. In todays environment there are many ways to learn AJAX including, books, classes, conferences, workshops and tutorials. Of these the only one that is free and accessible to everyone are web-based tutorials. The following is a list of what I consider the be the best and most helpful AJAX tutorials that I’ve found over the past year.

Read the full article

Technorati Tags: Ajax, Tutorials, Javascript, Lessons, XML, Web 2.0

Over at the Unofficial Google Weblog there is a post about Tom Vendetta, 15 year old from New Jersey who was recently hired by Google. I must say that’s a great start to a career!

Here is a link to his blog

According to I-Newswire, Tom Vendetta, a 15 year old student from just outside New Jersey has been hired by Google to work on security flaws concerning Gmail. He was found via his blog, and Google liked his experience with JavaScript and AJAX. Supposedly Tom will be receiving a “lowered salary”, placing the funds into a bank account for future education. Tom would be working from home in Jersey instead of at the GooglePlex.

Read the full article

Technorati Tags: Ajax, Google, Javascript

Over at Ajaxian.com Michael Mahemoff has written an article on the new Gabbly chat for websites. He also talks about Quek which is similar but uses little avatars on the site.

Gabbly (via Digg) is a new application that embeds a chat window in any web page. It seems to be based on web proxying and iframes: You think you’re looking at the target website, e.g. digg.com, but you’re actually looking at gabbly.com with an iframe for digg.com and an iframe above that for the chat window. The URL in this case is http://gabbly.com/digg.com.

Read the full article

Technorati Tags: Ajax, Ajaxian, Chat, Web 2.0, Javascript

Over at napyfab:blog the author has posted a tutorial on doing live searches with Ajax. This tutorial is in Italian but I will be posting a link to the original and also the google translation.

Read the full tutorial (Italian)
Read the full tutorial (English Google Translation)

Technorati Tags: Ajax, Tutorial, Tutorials, Javascript, live, search

Tomas Larsson over at tomas.epineer.se has posted a tutorial on uploading files with PHP and showing the progress with Ajax. This is a relatively short and easy tutorial and adds that little extra to your uploading forms.

One of the few things that I find lacking in PHP is the ability to report the progress of a file upload. This means that file uploads, especially uploads of larger files, can be extremely frustrating for end users when they don’t know if the upload is progressing or if it has stalled or if it has even started. There are two ways around this. One is to patch PHP, Pdoru provides such a patch. Not everyone can patch PHP though. You can’t use a patch if you’re on a shared server, if you want to use ready-made binaries, if you don’t want to risk stability by using a patch or if you just don’t want to have to remember to apply the patch again every time you upgrade PHP. The other option is to use a perl script to receive the file when it’s uploaded. This is the approach used by MegaUpload. MegaUpload is what I have based my solution on, but I have added asynchronous file upload support and an AJAX upload progress bar, instead of the refreshing popup used by MegaUpload.

Read the full tutorial

Technorati Tags: Ajax, Javascript, Tutorial, Tutorials, Form, Uploading, PHP

A List Apart has a two part article on starting with Ajax. The first part of the article is using Ajax using the DOM innerHTML and the second part using nodes from XML.

The start of 2005 saw the rise of a relatively new technology, dubbed “Ajax” by Jesse James Garrett of Adaptive Path. Ajax stands for Asynchronous JavaScript and XML. In a nutshell, it is the use of the nonstandard XMLHttpRequest() object to communicate with server-side scripts. It can send as well as receive information in a variety of formats, including XML, HTML, and even text files. Ajax’s most appealing characteristic, however, is its “asynchronous” nature, which means it can do all of this without having to refresh the page. This allows you to update portions of a page based upon user events and provides one of the cornerstones of Rich Internet Applications (RIA) referred to in discussions of “Web 2.0.”

Read the full article

Technorati Tags: Ajax, lessons, tutorials, javascript, alistapart, XML

Over at JRoller.com Mats has posted 12 perfect cases for the use of Ajax. He gives an explanation for all of the twelve cases along with some examples.

I’ve spent quite some time creating a 2 hour long Ajax course in Swedish. At the end of the course I list 12 cases where I think Ajax is a perfect fit, inspired by Alex Bosworth’s 10 Places You Must Use Ajax, which really only has 6 cases. Well, here is my list. I know some of the cases are closely related, and some of them may be out of order when you try them out. Well, at least I’m trying!

• Rating, voting, yes/no
• Input suggestions.
• Direct validation of form data.
• Status area.
• Automatic update.
• Microlink.
• Live form.
• Active Search.
• Data navigation.
• Panning maps or large pictures.
• Filtering data.
• Chat.

Check out the full article

Technorati Tags: Ajax, Javascript, Examples

This workshop we will be building a live data viewer similar to that of Digg.com’s Digg Spy. We will be using the Prototype.js library as well as the Script.aculo.us library. This type of feature is great if you have a lot of user interaction with your site and want to see what is happening in real time. Let’s get started.

View the demo

First thing we need to do is get the XHTML and CSS out of the way, this is very straight forward but I will explain what everything does below.

The XHTML

<ul>
	<li id="pl" class="tab" onclick="ld.playFunc(); this.style.color = 'black'; $('st').style.color = '#CCC';">Play</li>
	<li id="st" class="tab" onclick="ld.stopFunc(); this.style.color = 'black'; $('pl').style.color = '#CCC';" style="margin-right:0; color:#CCCCCC">Stop</li>	
</ul>
<div id="container">
	<div class="hold" id="hold_0" style="border-top:1px solid #999"></div>
	<div class="hold" id="hold_1"></div>
	<div class="hold" id="hold_2"></div>
	<div class="hold" id="hold_3"></div>
	<div class="hold" id="hold_4"></div>			
</div>

The XHTML is pretty basic we start out with an unordered list for our controller buttons (play & stop), we also attach some events for usability as well as function calls onclick to our live data object. We then create a container that will hold our live data. Inside of the container we have 5 new divs that will be the temporary holders for the live data. We give each child div a separate ID, this is important as the live data object will populate the divs based on their ID.

The CSS

body {
	font-family:Arial, Helvetica, sans-serif;
}
.hold {
	font-size:12px;
	color:#999999;
	padding:10px;
	border:1px solid #999;
	border-top:0;
	border-left:0;
	border-right:0;
	background: #F1FEFC;
}
a {
	color:blue;
	font-weight:bold;
	text-decoration:none;
}
h1 {
	font-size:24px;
	letter-spacing:-1px;
}
ul {
	margin:0;
	padding:0;
	margin-bottom:3px;
	text-align:right;
}
ul li {
	display:inline;
	border:1px solid #999;
	padding:4px;
	border-bottom:0;
	margin-right:5px;
	text-align:center;
	background:#F1FEFC;
	font-size:10px;	
}

The CSS is straight forward as well, we add some styles here and there and set the unordered list’s display to inline so we can get the nice tab effect.

We should now have something that looks like the following:

Now let’s take a look at the JavaScript. We will start out by creating our liveData class using Prototype’s Class.create() function. We will then continue to build the class using JSON.

JavaScript: liveData Class

var liveData = Class.create();
liveData.prototype = {
	data: [
		// Dynamically generate on page load from server-side
		{'id':0, 'name':'Article 1', 'desc':'This is article one...', 'url':'article1.html'},
		{'id':1, 'name':'Article 2', 'desc':'This is article two...', 'url':'article2.html'},
		{'id':2, 'name':'Article 3', 'desc':'This is article three...', 'url':'article3.html'},
		{'id':3, 'name':'Article 4', 'desc':'This is article four...', 'url':'article4.html'},
		{'id':4, 'name':'Article 5', 'desc':'This is article five...', 'url':'article5.html'}								
	],
	pe: 0,
	interval: 2,
	status: 1,
	initialize: function () {
		this.fillHolder();
		this.pe = new PeriodicalExecuter(this.getNewData.bind(this), this.interval);
	},
	fillHolder: function () {
		this.data.each(function(item, index) {
			var holder = 'hold_' + index;
			if (index == 0) { 
				// EXPERIMENTAL ANIMATION
				//Element.hide(holder);
				//new Effect.Appear(holder);
				new Effect.Highlight(holder); 
			}
			$(holder).innerHTML = '<a href="' + item.url + '">' + item.name + '</a><br />' + item.desc;
		});	
	},
	getNewData: function () {
		var showNewData = this.showNewData.bind(this);
		var url    = 'liveData.php';
		var rand   = Math.random(9999);
		var pars   = 'id=' + this.data.last().id + '&rand=' + rand;
		var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onComplete: showNewData} );
	},
	showNewData: function (originalRequest) {
		this.data.unshift(eval('(' + originalRequest.responseText + ')'));
		this.data.pop();
		this.fillHolder();
	},
	playFunc: function () {
		if (this.status == 0) {
			this.pe = new PeriodicalExecuter(this.getNewData.bind(this), this.interval);
			this.status = 1;
		}
	},
	stopFunc: function () {
		this.pe.stop();
		this.status = 0;
	}
};

We first created our class then used the prototype to extend the class and add our properties and methods. The first property is data, data will be the actual data that is displayed in the live data viewer. For this demo we have an ID, name, description and URL, but you can have as many or as little fields as you like. We put in some dummy data for now but in a production enviroment you should populate this from your database.

Next we have three (3) more properties. pe: this is the PeriodicalExecuter, we set this so that we can access the same PeriodicalExecuter without creating a new one every time we play and stop the live data. interval: this is the interval in seconds that the live data updates from the serverside. status: the status is used to let us know whether the PeriodicalExecuter is live or not.

Now onto our methods. We start with the initialize function that is mandatory when using Prototype’s Class.create(). This is the constructor and will be called when the object in initialized hence the name. In this method we call another method in the class fillHolder which populates the live data holder divs and start the PeriodicalExecuter. You will notice that we used the bind function from prototype so that we can pass the object along with the method .

We now have the fillHolder method that populates the holder divs. We start by iterating through the data property filling the appropriate div with the appropriate data. You will notice we have a conditional statement that checks to see if the index is equal to zero. If it is we add a nice little highlight effect from the Script.aculo.us library.

Next is the getNewData method, in this method we create our Ajax object and send off for our new data. We cover using Prototype’s Ajax object more in depth in previous workshops.

Onto our next method showNewData. showNewData is called when the Ajax object has finished communicating with the server side and then adds a new record to the data property using the array unshift() function. We now have one extra row in our data property so we need to remove the last one, we do this by using the array function POP(). We then call the fillHolder method again to replace the holders with the new data from the server.

Next we have two (2) new methods, playFunc and stopFunc. These are pretty straight forward and either play the live data or stop the live data. In the playFunc we check to make sure that the movie isn’t already playing using a conditional statement checking to see if the status is already equal to one (1).

That’s it for the liveData class. Let’s take a look to see how we use it.

JavaScript: Using the liveData Class

var ld;
window.onload = function () {
	ld = new liveData;
	var tabs = document.getElementsByClassName('tab');
 
	$('hold_3').style.opacity = 0.50;
	$('hold_4').style.opacity = 0.25;
 
	tabs.each(function (item, index) {
		item.style.cursor = 'pointer';
		item.onmouseover = function () {
			this.style.background = '#fff';
			this.style.borderBottom = '1px solid #999';
		}
		item.onmouseout = function () {
			this.style.background = '#F1FEFC';
			this.style.borderBottom = 0;
		}		
	});
}

First we create a global variable of ld (for liveData). We need to do this so we can access the object outside of the window.onload function. We then create a new event for window.onload so when the window is loaded we create a new instance of the liveData class. We then add some events for mouse overs and mouse outs on the control tabs and set the opacity of the second last and last div holder to 50% and 25% respectively.

All of the client side is now complete. Time to take a look at the serverside.

PHP: liveData.php

$id         = $_GET['id'] + 1;
$content[0] = "{'id':$id, 'name':'Google', 'desc':'Google is the top search engine online.', 'url':'http://www.google.com'}";
$content[1] = "{'id':$id, 'name':'Yahoo!', 'desc':'Yahoo! is a great search engine and also a good place for developers.', 'url':'http://www.yahoo.com'}";
$content[2] = "{'id':$id, 'name':'Ajax Lessons', 'desc':'Resourse for Ajax lessons and tutorials.', 'url':'http://www.ajaxlessons.com'}";
$content[3] = "{'id':$id, 'name':'Ajaxian.com', 'desc':'Number one source online for up to the minute Ajax news.', 'url':'http://www.ajaxian.com'}";
$content[4] = "{'id':$id, 'name':'Digg.com', 'desc':'Great resource for user submitted news', 'url':'http://www.digg.com'}";
$content[5] = "{'id':$id, 'name':'Prototype.js', 'desc':'JavaScript library making Ajax simple.', 'url':'http://prototype.conio.net'}";
$content[6] = "{'id':$id, 'name':'SitePoint', 'desc':'Community surrounding web developers and designers.', 'url':'http://www.sitepoint.com'}";
$content[7] = "{'id':$id, 'name':'Script.aculo.us', 'desc':'DHTML library for making cool animations.', 'url':'http://script.aculo.us'}";
$content[8] = "{'id':$id, 'name':'IGN.com', 'desc':'Video game site that covers all popular platforms.', 'url':'http://www.ign.com'}";
$content[9] = "{'id':$id, 'name':'Gamespot', 'desc':'Video game site that covers all popular platforms', 'url':'http://www.gamespot.com'}";
print $content[rand(0,9)];

The PHP is straight forward, we have set up an array with some dummy text then print out a random record. Ofcourse for live data you will want to make a call to the database to get the latest data or to an RSS feed. This is not limited to live data you could also use it to display archived data the choice is yours.

I hope you guys/girls enjoyed this workshop, I have another one on the way. If you have any questions, comments or need some support check out the Ajax Lessons Discussion Board.

View the demo

Download the project

I just want the class

Technorati Tags: Ajax, Tutorials, Javascript, JSON, Lessons, Workshop