Una delle tecniche che permettono di aumentare le performance di un' applicazione web si basa sul caricamento "on-demand" di javascript via Ajax. In questo modo si possono ridurre le latenze di precaricamento di troppe librerie javascript alla prima GET di una pagina. Infatti, in alcuni scenari specifici risulta più consigliabile scaricare "pezzi" di script solo quando se ne ha bisogno. Fino a non molto tempo fa ho avuto modo di testare alcune librerie free come Include e AJILE che permettono di raggiungere questo obiettivo senza troppi problemi. Ma da quando sono passato a jQuery le cose sono cambiate :D.
Vorrei semplicemente mostrare un paragone tra l'utilizzo classico di XMLHTTP e l'utilizzo di Ajax/jQuery.getScript.
Supponiamo di voler caricare dinamicamente ed eseguire una function javascript "HelloWorld()"che si trova in un file HelloWorld.js
function HelloWorld() { alert( 'Hello World!' ); }
al click di un button nella nostra pagina.
1. Esempio con XMLHTTP
<! 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>
<script type ="text/javascript">
function CallExternalScriptMethod(scriptUrl, targetCall)
{
var AJAX = null;
if (window.XMLHttpRequest) AJAX = new XMLHttpRequest();
else AJAX = new ActiveXObject("Microsoft.XMLHTTP");
AJAX.onreadystatechange = function() {
if (AJAX.readyState == 4 && AJAX.status == 200) {
eval(AJAX.responseText);
eval(targetCall);
}
}
AJAX.open("GET", scriptUrl, true);
AJAX.send(null);
}
</script>
<title></title>
</head >
<body>
<div>
<input type="button" id="btnGO" value="GO!!!"
onclick="CallExternalScriptMethod('HelloWorld.js','HelloWorld()')" />
</div>
</body>
</html>
2. Esempio con Ajax/jQuery.getScript
<! 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>
<script type ="text/javascript" src ="http://code.jquery.com/jquery-latest.js"></script>
<script type ="text/javascript">
function CallExternalScriptMethod(scriptUrl, targetCall)
{
$.getScript(scriptUrl, function() {
eval(targetCall);
});
}
</script>
<title></title>
</ head >
<body>
<div>
<input type="button" id="btnGO" value="GO!!!"
onclick="CallExternalScriptMethod('HelloWorld.js','HelloWorld()')" />
</div>
</body>
</html>
Come si può notare la facilità e l'eleganza di realizzazione con jQuery è disarmante. Inoltre, a partire dalla v1.2 abbiamo gratuitamente un nuovo enanchement riguardante le possibili problematiche relative a richieste cross-domain che limiterebbero l'utilizzo dell'esempio con XMLHTTP sopra riportato:
Before jQuery 1.2, getScript was only able to load scripts from the same domain as the original page. As of 1.2, you can now load JavaScript files from any domain.
Technorati Tag:
Ajax,
jQuery