Voici un petit exemple Ajax :
Tout d'abord un exemple synchrone :
var xhr_object = null;
if(window.XMLHttpRequest) // Firefox
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
return;
}
xhr_object.open("GET", location.href, false);
xhr_object.send(null);
if(xhr_object.readyState == 4) alert("Requête effectuée !");
Puis , un exemple asynchrone :
var xhr_object = null;
if(window.XMLHttpRequest) // Firefox
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
return;
}
xhr_object.open("GET", "uneJsp.jsp", true);
xhr_object.onreadystatechange = function() {
if(xhr_object.readyState == 4) alert(xhr_object.responseText);
}
xhr_object.send(null);
Un exemple complet avec un POST :
var l1 = f.elements["list1"];
var l2 = f.elements["list2"];
var index = l1.selectedIndex;
if(index < 1)
l2.options.length = 0;
else {
var xhr_object = null;
if(window.XMLHttpRequest) // Firefox
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
return;
}
xhr_object.open("POST", "species.php", true);
xhr_object.onreadystatechange = function() {
if(xhr_object.readyState == 4)
eval(xhr_object.responseText);
}
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var data = "family="+escape(l1.options[index].value)+"&form="+f.name+"&select=list2";
xhr_object.send(data);
}
Une troisième façon de faire, mais qui ne me semble pas être de l'ajax car elle rafraichi tout la page :
Voici la page complète :
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ page import="java.util.Date" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
function updateData()
{
var dt = new Date();
window.status = dt.getSeconds();
}
function timer()
{
var value = 1000;
if(value > 0)
{
//window.setTimeout(function() {var dt = new Date();window.status = dt.getSeconds();},2000);
var date = new Date();
var e = window.document.getElementById("date");
e.innerHTML = date.getSeconds();
window.setTimeout('document.location=document.location',2000);
}
else
{
alert("erreur de saisie");
}
}
</script>
<title>test refresh</title>
</head>
<body onload="timer()">
<h1 id="date">pas de date</h1>
</body >
</html>
Aucun commentaire:
Enregistrer un commentaire