Ajaxsicle Logo

Open AJAX: taking Ajax mainstream

“The project, called Open Ajax, aims to create a single framework that standardizes development and debugging on a common library of Ajax widgets that could run on multiple Ajax runtimes.”

The goal of OAJAX (Open Ajax), is to create a framework that standardizes development and debugging of a common library of widgets, that can run with multiple Ajax runtimes. Really it means having a standard set of widgets for use in the Eclipse development environment. It is neat to see the convergence anyway.

Besides IBM, there are several players already pledging their endorsement: BEA, Borland, the Dojo Foundation, Eclipse Foundation, Laszlo Systems, Mozilla, Novell, Oracle, Openwave, Red Hat, Yahoo, Zend, Zimbra and Google.

http://www.cbronline.com/article_news.asp?guid=97D640A5-48E2-4078-A131-D7256CA376DC

Libraries: That is a ton of them!

I was thinking of writing a post that tried to highlight the countless number of Javascript Library/Frameworks available. A very daunting task for sure.

Turns out, somebody has already done it: http://edevil.wordpress.com/2005/11/14/javascript-libraries-roundup/.

I have used several of them mentioned, including Prototype, Rico, Behavior, Scriptaculous and AJAX.NET.

Be sure to check them out. You never know how easy it may be to implement something in one of your projects.

Library: Prototype

As far as Javascript frameworks go, it really is hard to beat Prototype by Sam Stephenson. Dubbed as a “framework that aims to ease development of dynamic web applications”, Prototype is quickly becoming the library of choice for Web 2.0 developers.

Several prominent web projects, currently rely on, or are heavily based on Prototype:

* Look for reviews on each of these libraries very soon…

Although, AJAX is not the primary goal of the Prototype framework, it certainly has a very nice implementation. And through JavaScript classes, it also makes extended in your own projects, a piece of cake (relatively speaking of course).

Prototype is available here: http://prototype.conio.net

In 2005, Jesse James Garrett coined the term Ajax in his article Ajax: A New Approach to Web Applications.

Simple AJAX Example

AJAX is a way of using Javascript, Dynamic HTML and the XMLHttpRequest (IE uses the ActiveX object “Microsoft.XMLHTTP”) object to perform HTTP GETs and POSTs. The results (return value(s)) are interpreted and through DHTML the source page can be updated. The great part is the user is none the wiser to what happened - the behavior simulates a true thick-client experience, which is the holy grail in web application development.

Below is a very simple example that utilizes a PHP script to print out the remote user’s IP address.

View a running example here.

HTML page:

This is the HTML page with the necessary JavaScript functions that perform the AJAX functionality and also the code that updates the page.

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ajaxsicle - Sample #1</title>
<meta name="author" content="Kevin Hillabolt">
<script language="javascript">
var xmlhttp

function getIPAddress() {
document.getElementById("ipaddress").innerHTML = "Wait...";

if (typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange = updateIPAddress;
xmlhttp.open("GET","http://www.ajaxsicle.com/samples/1/getip.php", true);
xmlhttp.send(null);
}

function updateIPAddress() {
if (xmlhttp.readyState == 4) {
var xmlDoc = xmlhttp.responseXML;
var nds = xmlDoc.getElementsByTagName("remote");
var nd = nds[0];

document.getElementById("ipaddress").innerHTML = "Your IP Address is: " +
nd.attributes[0].nodeValue;
xmlhttp = null;
}
}
</script>
</head>
<body>
<h1>A simple Ajax example</h1>
<P>This example demonstrates Asynchronous JavaScript and XML.</P>
<h2 id="ipaddress">Click the button below...</h2>
<p><input onclick="getIPAddress()" type="button"
value="Click to get your IP Address"></p>
</body>
</html>

PHP Script

This is the PHP script that the HTML page calls. This script could have easily been implemented with any language.

<?php
header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="utf-8"?'.">";
echo '<remote ip="';
echo getenv(REMOTE_ADDR);
echo '" />';
?>

Note: pay special attention to the line “Content-Type: text/xml”. You must specify this mime type, otherwise the XMLHttpRequest will not work properly.

The earliest form of asynchronous remote scripting, Microsoft’s Remote Scripting, was developed before XMLHttpRequest existed, and made use of a dedicated Java applet.

AJAX = Asynchronous JavaScript And XML

Ajaxsicle is proudly powered by Wordpress 2.0 and Squible Beta 1.1.
All content is copyrighted by its author[s].