1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans titre</title>
</head>
<body>
<h3 id="lien" data-attr="toto">Cliquer sur ce titre pour compléter le paragraphe</h3>
<div id="content_text"></div>
<script>
const
lien = document.getElementById("lien") // Cible le lien par son id
,cible = document.getElementById("content_text") // Cible le conteneur par son id
,root = window.location.origin // Dossier racine du site
;
// Requête Ajax
function handleChange() {
// Initialise un objet XMLHttpRequest
var xhr = new XMLHttpRequest();
// Ecouteur d'évènement
xhr.onreadystatechange = function(){
// si requête ok
if (xhr.readyState == 4 && xhr.status == 200){
// On peuple la cible avec la réponse ajax
cible.innerHTML = xhr.responseText;
}
}
// Instancie la requête
xhr.open('GET', root+'/Destination_Ajax.php', true);
// Envoie de la requête. Si on utilise le protocole POST on peut envoyer des paramètres dans send()
xhr.send();
}
// Création de l'événement on click sur le lien et appel de la fonction handleChange
if (lien){
lien.addEventListener('click', function(e){
handleChange();
}, false );
}
</script>
</body>
</html> |
