Requêtes Ajax

1. Introduction

Ajax (Asynchronous JavaScript and XML) est une technique permettant de rafraîchir uniquement une partie d’une page web sans être obligé de recharger toute la page.

Cette technique consiste à faire un appel vers le serveur via JavaScript en utilisant la classe XmlHttpRequest puis à récupérer la réponse.

2. Appel de la requête depuis une vue

La première étape consiste à utiliser la classe JavaScript XmlHttpRequest pour créer un appel Ajax depuis une vue vers une action d’un contrôleur.

Exemple :

Le code ci-dessous permet d’appeler l’action coucou() du contrôleur UsersController :

<button type="button" id="cakeAjax">C'est ici pour Ajax</button> 
<div id='coucou'> </div>   
<script>   
var bouton=document.getElementById("cakeAjax");  
bouton.addEventListener("click", function(event){  
var xhttp = new XMLHttpRequest();  
   xhttp.onreadystatechange = function() {  
     if (xhttp.readyState == 4 && xhttp.status == 200) {   
        document.getElementById("comptine").innerHTML =  
        xhttp.responseText;  
     }  
   };  
   xhttp.open(  
           "GET",  
        ...