Ajax example of a query using the jQuery library

Advantages and disadvantages

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.

JavaScript is a programming language that can be used to carry and spread computer viruses and malware. Some software against malicious software can prohibit preventive execution of any program written in JavaScript. For the same reason, companies can sometimes prohibit the execution of programs written in JavaScript, according to their security policy. These prohibitions prevent Ajax web applications to run.

The indexing robots used by search engines, exploit the integrated mechanisms of the World wide web – those operated by conventional applications – and do not run any programs in JavaScript. Therefore, the content of pages created by a JavaScript program is not added to the search engine index. The same problem arises with competing products such as Adobe Flex and Microsoft Silverlight.

Programming and Ajax

To facilitate the use of these technologies, many frameworks have been established. This is generally a set of JavaScript libraries to perform asynchronous treatments and offer advanced ergonomics with a range of successful graphic objects.

For the sake of industrialization, many of these frameworks were coupled to web design frameworks.

There are more than five hundred estimated number of existing JavaScript frameworks.

Open AJAX

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).

Examples

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.

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<title></title>
<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 –>
</head>
<body>
<form method=“post” action=“add.php”> <!– Form sent by the POST method –>
<fieldset>
<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 –>
</fieldset>
<fieldset>
<legend>Result</legend>
<p id=“result”></p> <!– The result will be placed here–>
</fieldset>
<p><button>Submit</button></p> <!– Submit button –>
</form>
</body>
</html>

index.html

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
function OnReady(){
$(“form”).submit(OnSubmit); // Subscribe a callback to the event “submit” form
}
function OnSubmit(){
$.ajax({
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
}
function OnSuccess(result){
$(“#result”).html(result); // Insert the result in the id tag “result”
}

script.js

The server calculates the sum of these numbers and returns the result.

<?php
$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