Code: Prototype Ajax library version of Hello World

Chapter 8 - Ajax Optimization

An optimal Ajax application should not only be fast for users to use, but also be fast for developers to build. There are a number of open source JavaScript libraries that you might turn to, such as Prototype, jQuery, and the Yahoo! User Interface Library (YUI). They make Ajax programming easier and faster. As an example, take a look at a library rewrite of our "Hello World" example. It is much smaller.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Prototype Hello Ajax World</title>
<script type="text/javascript" src=" prototype.js"></script>
<script type="text/javascript">

function sendRequest( )
{
    new Ajax.Request("sayhello.php",{method:"get",onSuccess: responseCallback});
}

function responseCallback(response)
{
    var responseString = response.responseXML.getElementsByTagName('message')[0].firstChild.nodeValue;
    $("output").update(responseString);
}

Event.observe( window, "load", function( ) { Event.observe("button1", "click",
sendRequest);} );
</script>
</head>
<body>
<form action="#">
    <input type="button" value="Say it!" id="button1" />
</form>

<br /><br />
<div id="output"> </div>

</body>
</html>