Finally, the YUI version is shown next. It is probably the most straightforward of the bunch coding-wise, but the inclusion of multiple script files requires more HTTP requests. To be fair, however, Yahoo! provides a special minified, gzipped, and cached version of its library online in case you want to take advantage of all of its optimization work. Yahoo! will also serve the files from its server closest to the user for optimal response time. The minified and gzipped version of Yahoo!'s Ajax library is 73.2% smaller than the unoptimized version.
<!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>YUI Hello Ajax World</title>
<script src="http://yui.yahooapis.com/2.3.0/build/yahoo/yahoo-min.js" type="text/
javascript"></script>
<script src="http://yui.yahooapis.com/2.3.0/build/event/event-min.js" type="text/
javascript"></script>
<script src="http://yui.yahooapis.com/2.3.0/build/connection/connection-min.js"
type="text/javascript"></script>
<script type="text/javascript">
function sendRequest( )
{
YAHOO.util.Connect.asyncRequest('GET', "sayhello.php", { success:responseCallback }, null);
}
function responseCallback(response)
{
var msg = response.responseXML.getElementsByTagName("message")[0].firstChild.nodeValue;
document.getElementById("responseOutput").innerHTML = msg;
}
YAHOO.util.Event.addListener('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>