Ajax aims to:
- reduce latency;
- avoid reloading the page;
- bring new features;
- increase the responsiveness of the Web application.
Web applications that have these qualities are called Rich Internet Applications (RIA).
Compared to competing products for performing RIA, such as Adobe Flex or Microsoft Silverlight, which require the installation of a plug-in for each browser to use this technology, Ajax makes use of standard technologies present on most Web browsers on the market.
Programming and Ajax
For the sake of industrialization, many of these frameworks were coupled to web design frameworks.
IBM created Open AJAX Initiative, a technology advocacy group with partners such as 24SevenOffice, Adobe Systems, BEA Systems, Borland, the Dojo Foundation, Eclipse Foundation, Google, Ilog, Yahoo!, Laszlo Systems, Mozilla Corporation, Novell, Openwave Systems, SAP, Oracle, Red Hat, Tibco, Zend Technologies and Zimbra.
The first result of this initiative is the AJAX Toolkit Framework (ATF), a project that aims to provide tools for developing AJAX applications in the Eclipse development tool. This project is based among others on the initial contribution from IBM and various open source AJAX frameworks (such as Dojo or Rico).
Ajax example of a query using the jQuery library:
The index.html code is written in HTML5. It states a form for entering two numbers.
<link rel=“stylesheet” media=“screen” href=“style.css”>
<script src=“http://code.jquery.com/jquery-1.6.2.min.js”></script> <!– The sources of the JQuery library –>
<script src=“script.js”></script> <!– The source that contains the sending code in Ajax –>
<form method=“post” action=“add.php”> <!– Form sent by the POST method –>
<legend>Choose two integers</legend>
<p><label>a = <input name=“a” type=“number” required></label></p> <!– First number –>
<p><label>b = <input name=“b” type=“number” required></label></p> <!– Second number –>
<p id=“result”></p> <!– The result will be placed here–>
<p><button>Submit</button></p> <!– Submit button –>
Submitting the form causes the sending of two numbers to the server. When the response from the server has been received, it is inserted in a tag provided for this purpose.
$(document).ready(OnReady); // Subscribe the callback to run when the whole DOM is loaded
$(“form”).submit(OnSubmit); // Subscribe a callback to the event “submit” form
type: $(this).attr(“method”), // Gets the send method of the form, here “POST”
url: $(this).attr(“action”), // Retrieve the URL of the script that receives the request, here “add.php”
data: $(this).serialize(), // Manufactures the “query string” containing both numbers
success: OnSuccess // Callback that retrieves the server response
return false; // Cancels the classic form submission
$(“#result”).html(result); // Insert the result in the id tag “result”
The server calculates the sum of these numbers and returns the result.
$a = filter_input(INPUT_POST, “a”, FILTER_VALIDATE_INT);
$b = filter_input(INPUT_POST, “b”, FILTER_VALIDATE_INT);
echo $a + $b; // Sends to the client the result of the calculation of a + b
The sending of the numbers to the server is made asynchronous by the Ajax object of the browser.