AJAX Asynchronous JavaScript and XML
A l'aide de xmlhttprequest, Javascript nous donne la possibilité de mettre à jour une page web sans avoir besoin de la réafficher intégralement comme c'est le cas d'habitude.
Voici un exemple tout simple, en cgi. Contrairement au nom de la fonction utilisé, il n'est pas du tout indispensable d'utiliser le format xml. L'exemple ci-dessous permet d'afficher une table par rapport à une largeur et hauteur saisies dans un formulaire.
Dans le fichier monform.html, la première gymnastique consiste à déceler s'il faut utiliser un activeX pour le cas d'Internet Explorer ou non dans le cas de Mozilla, firefox, safari, konqueror, opera etc. Ce code fonctionne ainsi indifférement quelque soit le navigateur et quelque soit le système d'exploitation (windows, mac, linux...), sans plugin et en toute sécurité.
Pour plus d'informations : http://en.wikipedia.org/wiki/AJAX
Fichier html : monform.html
<html>
<head>
<script>
function getHTTPObject() {
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
var http = getHTTPObject();
var url = "serv.py?val=";
function go() {
var v = document.getElementById("val").value;
http.open("GET", url + escape(v), true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
function handleHttpResponse() {
if (http.readyState == 4) {
md = document.getElementById('mondiv');
md.innerHTML = http.responseText;
}
}
</script>
</head>
<body>
largeur, hauteur : <input type="text" name="val" id="val" /> <button onclick="javascript:go()">GO</button><br />
<hr>
<div id="mondiv">
</div>
</body>
</html>Après avoir renseigné la valeur de la forme largeur, hauteur (5,3 par ex), on clique sur le boutton GO qui va appeler le script serv.py et afficher le résultat dans un div
serv.py :
print "Content-type: text/html"
print
import cgi
form=cgi.FieldStorage()
x,y = form.getvalue("val").split(',')
x,y = int(x),int(y)
print "<table>"
for i in range(y):
print "<tr>"
for j in range(x):
print "<td>%dx%d</td>" % (j,i)
print "</tr>"
print "</table>"Le script serv.py se contente de renvoyer des données.