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
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.
AJAX = Asynchronous JavaScript And XML
