Utilisez AJAX facilement avec une fonction Javascript !

Vous avez peut-être déjà entendu parlé de AJAX ? Celui-ci est pratique pour vos sites web afin de les rendre encore plus dynamiques.

Qu’est-ce que AJAX ?

AJAX signifie Asynchronous JavaScript and XML, autrement dit JavaScript et XML asynchrones. C’est donc un rassemblement de plusieurs technologies. AJAX va nous permettre de rendre notre site plus dynamique.
Un bon exemple est Facebook. Quand vous cliquez sur le lien « Afficher les commentaires » en dessous d’une photo, la liste des commentaires s’affiche quelques secondes après le clic sans toutefois recharger la page. Ceci est de l’AJAX.
Lors du clic, l’utilisateur envoi l’identifiant de la photo à une autre page qui se charge d’afficher les commentaires associées à cette photo.

Concrètement comment ça marche ?

AJAX va permettre d’associer Javascript et PHP pour notre cas. On va utiliser le DOM (permettant d’accéder aux éléments d’une page en Javascript), associé à l’objet XMLHttpRequest qui va permettre de charger du contenu XML de manière asynchrone.

Une fonction pour tout résumer:

Je parie que vous n’avez pas trop compris ce qui est écrit au-dessus. Ce n’est pas trop grave et c’est le but de cet article: vous faciliter l’utilisation d’AJAX. En bas de l’article se trouve un lien vous permettant de télécharger une fonction réalisée par moi-même afin de vous permettre d’utiliser AJAX plus facilement.
Voici son prototype:

1	void ajax(string donnees, string url, string methode, string cadre)

• donnees: Les données à envoyer à l’autre page (l’identifiant de la photo par exemple)
• url: L’adresse de la page appelée en AJAX (celle qui reçoit et traite les données)
• methode: La méthode d’envoi. 2 valeurs possibles: POST ou GET.
• cadre: L’endroit où vous souhaitez afficher le résultat (l’identifiant d’un DIV, d’un P par exemple)

Un petit exemple:

1	ajax("photo=5", "ajax/photos.php", "POST", "afficherCommentaires")

La fonction va donc demander à la page photos.php d’afficher tous les commentaires de la photo n°5 dans le conteneur DIV appelé afficherCommentaires.
Télécharger ajax.zip