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",  
        ...
Pour consulter la suite, découvrez le livre suivant :
couv_EP3CAK.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Créer un formulaire sans modèle
Suivant
Introduction