... Advanced Web Programming ...

C5. Ajax. Web Application Frameworks

Ajax is used mainly to create interactive web applications. AJAX (Asynchronous JavaScript and XML) technology is not based on a new language but proposes a new approach to implement Web applications. Indeed, its combine existing technologies to overcome the drawbacks of the HTTP protocol.
The basic idea of Ajax is the usage of the JavaScript XMLHttpRequest object to make asynchronous calls to the Web server. In this way you will avoid reloading the Web page whenever is necessary data from the server. Web applications using Ajax thus become smaller, faster and friendlier. Besides JavaScript, Ajax applications involves HTML and CSS for presentation, DOM for browse interaction and XML for data interchange.
Ajax technology is a current standard. Most browsers have support for XMLHttpRequest (Internet Explorer, Firefox, Chrome, Opera, Safari). Below is a short function that will detect the browser type and instantiates the xmlHttp object:
function ajaxFunction()
{
 var xmlhttp;
 if (window.XMLHttpRequest) {
  // for IE7+, Firefox, Opera, Safari
  xmlhttp=new XMLHttpRequest();
 }
 else if (window.ActiveXObject)
   {
    // for IE6, IE5
    xmlhttp=new ActiveXObject
              ("Microsoft.XMLHTTP");
   }
   else
   {
     alert("Your browser does not
                 support XMLHTTP!");
   }
}
XMLHttpRequest object properties are:
- onreadystatechange. Allows implementation of a function to process data received from the server. This function will be called automatically by the browser when associated xmlHttp event occurs. The function prototype is:
xmlhttp.onreadystatechange=function()
{
  // data processing
}
- readyState. This property keeps status code that is the answer to the last call made. Possible values are:
   0 application was not initialized;
   1 application is ready;
   2 the request has been sent;
   3 the request is in process;
   4 the request is complete.
At each change in value of readyState variable browser will automatically execute the function associated onreadystatechange property. This will test the end of request and will process the data received:
xmlhttp.onreadystatechange=function()
{
  if(xmlhttp.readyState==4)
  {
     // data processing
  }
}
- responseText / responseXML. Provides data from the server response. As name suggest, they are usually wrapped in plain text or XML.
xmlhttp.onreadystatechange=function()
{
  if(xmlhttp.readyState==4)
  {
    document.dispPanel.value =
                xmlhttp.responseText;
  }
}
To send the request to the server, the program will call the XMLHttpRequest object functions open() followed by send(). The open() function has three parameters. The first specify the method of data transmition (GET or POST), the second specify the page from the server (PHP, ASP, etc..) that will process the request, and the last parameter should be always true for asynchronous calls. In the case of send(), the only one parameter will be null if the GET call refers pages on the same directory on the server.
To change a portion of the current page, this portion may be included in a tag <div>:
<html>
<head>
 <title>First Ajax Example</title>
 <script type="text/javascript">
 function ajax()
 {
  var xmlhttp;
  if (window.XMLHttpRequest)
  {
   // code for IE7+, Firefox ...
      xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // code for IE6, IE5
    xmlhttp=new ActiveXObject
              ("Microsoft.XMLHTTP");
  }
  
xmlhttp.onreadystatechange=function()
 {
  if(xmlhttp.readyState==4) {
    document.getElementById
      ('panel').innerHTML=
           xmlhttp.responseText;    
    }
  }
  xmlhttp.open("GET","ajaxRepl.php",
                             true);
  xmlhttp.send(null);
 }
 </script>
</head>
<body>
 <div id='panel'>
  <h2>HTML Text</h2><br>
    Original text from HTML file.
 </div>

 <form name="f1">
  <input type="button" name="Change"
   value="Change" onClick="ajax();">
 </form>
</body>
</html>

// ajaxRepl.php
<?php
  echo '<h2>PHP Text</h2>'; 
  echo '<br>Text from PHP';
?>
For more information, please consult W3Schools tutorials on Ajax and tizag Ajax tutorial.

Ajax Libraries

AjaxAnywhere (http://ajaxanywhere.sourceforge.net/) 
AjaxAnywhere is a simple way to enhance an existing JSP / Struts / Spring / JSF application with AJAX. It uses AJAX to refresh "zones" on a web page. It is not component-oriented. Simply separate your web page into multiple zones, and use AjaxAnywhere to refresh only those zones that needs to be updated.
AJS (http://orangoo.com/labs/AJS/)
AJS is a ultra lightweight JavaScript library. It's only about 33 KB. AJS main force is performance - both in execution and file size. AJS includes powerful and easy to use AJAX functions, visual effects, drag and drop, JSON support and many more.
DHTMLX (http://dhtmlx.com/)
DHTMLX is a JavaScript library of Ajax-enabled user interface components for building feature rich web applications. It includes the most widely-used types of UI components: grid, treegrid, treeview, combobox, tabbar, menu, windows, calendar, layout, and more. However, some advanced functionality is available in commercial version only.
Fleegix.js (http://js.fleegix.org/)
Fleegix.js provides an extremely lightweight, cross-browser set of JavaScript tools for building dynamic Web-app UIs.
jQuery (http://jquery.com/)
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is the most popular JavaScript library in use today. jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plugins on top of the JavaScript library. Using these facilities, developers are able to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. This contributes to the creation of powerful and dynamic web pages.
MochiKit (http://mochi.github.com/mochikit/)
MochiKit is a light-weight Javascript library. It uses the concept of deferred execution to allow asynchronous behaviour. It includes the MochiKit.DOM, a set of functions to easily create dynamic page components and the MochiKit.Visual for visual effects.
My library (http://www.cinsoft.net/mylib.html)
My Library is an Ajax browser scripting library. The design is modular with a high level of granularity to minimize the downloading of unused code.
Rialto (http://rialto.improve-technologies.com/wiki/)
Rialto (Rich Internet Application Toolkit) is ajax-based cross browser javascript widgets library. Because it is technology agnostic it can be encapsulated in JSP, JSF, .Net, Python or PHP graphic components. The purpose of Rialto is to ease the access to rich internet application development to corporate developers. The target of Rialto is corporate web applications and not internet web sites. Widgets library includes : forms, drag & drop, tree, data list with fix header and resizable columns, pop up, and splitter.
Scriptaculous (http://script.aculo.us/)
Scriptaculous is a set of JavaScript libraries to enhance the user interface of web sites. It provides a visual effects engine, a drag and drop library (including sortable lists), a couple of controls (Ajax-based autocompletion, in-place editing, sliders) and more.

Ajax Frameworks

Dojo (http://dojotoolkit.org/)
Dojo is a UI toolkit that allows a larger number of web application authors to easily use the rich capabilities of modern browsers. It includes implementations of GUI elements, AJAX-style communication with the server, and visual effects. Dojo is powerful, lightweight core makes common tasks quicker and easier. Animate elements, manipulate the DOM, and query with easy CSS syntax, all without sacrificing performance. Dojo’s widget system Dijit provides a variety of commonly used form widgets like calendars, input validation and more.
Ajax OOP (http://ajaxoop.org/)
AJAX.OOP is a fast and scalable JavaScript Library that provides you with possibility to create JavaScript/Ajax components in object oriented way. It provides you with possibility write your own classes, use inheritance, polymorhysm mechanisms and gives possibility of extending and reusing existing code. In addition this core will help you handle AJAX requests of different types.
Prototype (http://prototypejs.org/core)
Prototype framework enables you to deal with Ajax calls in a very easy way that is also safe (cross-browser). Besides simple requests, this module also deals in a smart way with JavaScript code returned from a server and provides helper classes for polling. The biggest part of the Prototype framework are its DOM extensions.
TIBCO General Interface (http://developer.tibco.com/)
TIBCO General Interface is a mature AJAX RIA framework that's been at work powering applicaitions at Fortune 100 and US Government organziations since 2001. It contents dozens of types of extensible GUI components, a vector based charting package, support for SOAP communication  and a full visual development environment. 

Suggested readings: Richard Cornford - Browser Detection (and What to Do Instead).

Slides:
C5. Ajax.