Comment déboguer une requête AJAX

Lorsqu'on fait une requête AJAX, il faut savoir déboguer autant du côté client que du côté serveur car les deux entrent en jeu.

Les raisons pouvant causer le problème sont nombreuses. Le problème peut provenir de l'exécution de la fonction JavaScript, de l'appel AJAX en tant que tel, du code serveur, du traitement effectué lorsque l'appel AJAX a été réussi, ...

Et tous nos tests ne seront valides que si on est assuré que la version testée correspond bel et bien à la dernière version écrite. Le piège de la mémoire cache vous guette !

Avez-vous la dernière version du code JavaScript en cache ?

Puisque les navigateurs conservent une copie du code JavaScript en cache, il est important de s'assurer que c'est bien la dernière version écrite qui est exécutée. Voici une technique infaillible pour y parvenir :

• Lancez le site Web
• Dans la page à tester, cliquez dans la barre d'URL puis cliquez sur Entrée. Ceci assurera que vous n'êtes pas en PostBack.
• Appuyez sur F5 pour forcer le rafraîchissement du code en mémoire cache. Si la date du fichier est plus récente que la date de l'information en cache, le navigateur rafraîchira l'information en cache. Notez que Ctrl+F5 forcera le rafraîchissement du cache même si la date sur disque n'est pas plus récente.

Quelle ligne de code cause le problème ?

Les tests suivants vous permettront de cibler ce qui ne fonctionne pas.

La fonction JavaScript qui fait l'appel AJAX est-elle exécutée ?

Dans le débogueur JavaScript (F12 sous Chrome, onglet Sources), placez un point d'arrêt sur la première ligne exécutable dans la fonction qui se chargera d'effectuer la requête AJAX. Lancez le site Web et assurez-vous que le code s'arrête sur cette ligne.

Si ce n'est pas le cas, c'est que vous avez fait une erreur.

• Avez-vous oublié le $(function () { ... } ?
• Si l'appel AJAX est en réponse à un événement, avez-vous bien orthographié la classe ou l'identifiant utilisé dans le sélecteur jQuery ? (ex : si on réagit au clic sur le bouton dont le id est soumettre : $('#soumettre'))
• Avez-vous utilisé le bon événement jQuery ? (ex : .clic)

La fonction serveur est-elle exécutée ?

Une fois qu'on est assuré que l'appel AJAX est exécuté, si le problème persiste, l'étape suivante consiste à vérifier si le code serveur est exécuté. Dans votre environnement de développement (dans l'image qui suit, on a utilisé CodeLobster), placez un point d'arrêt sur la première ligne du code serveur puis lancez le site.

Si le programme n'arrête pas sur le point d'arrêt, c'est qu'il y a une erreur dans l'appel AJAX.

L'appel AJAX est-il réussi (.done()) ou non (.fail()) ?

Dans le débogueur JavaScript, placez un point d'arrêt sur la première ligne exécutable du .done() et sur la première ligne exécutable du .fail(). 

Si le programme s'arrête sur .done()

Si le programme s'arrête sur .done(), l'appel AJAX a eu lieu alors le problème se trouve :

• soit dans le code serveur;
• soit dans le code du .done();
• soit dans le lien entre les données qui transigent de l'appel AJAX vers le code serveur;
• soit dans le lien entre les données qui transigent du code serveur vers le .done().

À vous de réviser votre code. L'affichage des paramètres response, textStatus et jqXHR pourront vous aider.

Dans l'exemple suivant, on voit qu'il manquait un point-virgule dans le code serveur.

Si le programme s'arrête sur .fail()

Si le programme s'arrête sur .fail(), c'est que l'appel AJAX en tant que tel a rencontré un problème.

Parfois, les paramètres textStatus ou errorThrown contiennent un message clair. Dans d'autres cas, c'est jqXHR qui fournira la piste recherchée ou plus précisément jqXHR.responseText.

Il est souvent très aidant d'afficher la valeur de jqXHR.responseText, textStatus et errorThrown dans le débogueur JavaScript.

Dans cet exemple, on voit que le caractère < n'était pas attendu. Puisque notre code avait pour but de retourner du HTML et que le code < fait partie intégrante du HTML, une cause possible serait que le dataType: soit configuré à autre chose que "html".

Autre source d'information : les réponses HTTP

Le Web est composé d'une série d'échanges entre le client et le serveur. Le client fait une requête au serveur et le serveur retourne une réponse au client. Ces réponses peuvent être explorées afin de déterminer ce qui cause problème.

Dans Chrome, les réponses peuvent être visualisées en appuyant sur F12 puis sur l'onglet Network. Il faut recharger le site Web pour que les réponses apparaissent.

Dans cet exemple, on voit que l'appel au fichier generer-liste-cat.php cause une erreur 404.

Un clic sur le nom du fichier dans cet écran donnera plus de détails. L'exploration des onglets Headers, Preview, Response, etc. peut vous fournir de l'information intéressante.

Dans certains cas, l'affichage sera encore plus éloquent, comme dan cet exemple où un service Web n'est pas trouvé :