Qu'est-ce que l'Ajax?
Dans cet article, nous discuterons de ce qu'est l'Ajax, le travail par étapes de l'Ajax, et traverserons un exemple pour mieux comprendre la mise en œuvre de l'Ajax.
Qu'est-ce que l'Ajax?
Ajax, qui représente JavaScript asynchrone et XML, est une méthode (pas un langage de programmation) qui est utilisée pour les applications Web afin de transmettre et de recevoir des données du serveur de manière asynchrone, sans affecter le reste du contenu de la page ou nécessiter un rechargement de page.
L'abréviation Xml représente Langue de balisage extensible qui est utilisé pour chiffrer les messages afin qu'il puisse être lu par les humains et les machines. XML est similaire à HTML, mais il vous permet de construire et de personnaliser vos propres balises.
AJAX communique avec le serveur à l'aide de l'objet XMLHTTPRequest, JavaScript / Dom pour faire des demandes et XML en tant que mécanisme de transmission de données. Il est devenu populaire que lorsque Google l'a mis dans Google suggérer en 2005
Pour le mettre en mots simples, Ajax est une méthode de réduction des interactions serveur-client qui sont accomplies uniquement en mettant à jour une partie d'une page Web au lieu de mettre à jour la page Web entière. L'objectif de l'Ajax est d'envoyer de petites quantités de données au serveur sans avoir à actualiser la page.
Travailler par étapes de l'Ajax
- Un événement est exécuté et le navigateur crée un objet XMLHTTPRequest, après quoi le HttpRequest est envoyé au serveur.
- Le serveur obtient le HTTPRequest puis le traite, après traitement, le serveur génère une réponse et renvoie la réponse au navigateur avec certaines données.
- Les données renvoyées sont ensuite traitées par le navigateur à l'aide de JavaScript et en fonction de la réponse JavaScript met à jour le contenu de la page Web.
Passons par quelques exemples pour mieux comprendre Ajax.
Exemple 1:
Cet exemple montrera comment modifier le contenu d'un h2 Tag en utilisant Ajax. Tout d'abord, nous implémenterons la structure de notre page Web à l'aide de HTML.
L'objet XMLHttpRequest
Dans le code ci-dessus, nous avons défini un div conteneur et lui a donné l'attribut ID en raison de laquelle nous pouvons référencer ce conteneur Div plus tard dans notre code JavaScript. Cette section div est définie afin qu'elle puisse afficher des informations à partir d'un serveur. Ensuite, nous avons défini une balise H2 et un bouton dans lequel nous avons passé un sur clic événement. Chaque fois qu'un utilisateur cliquera sur ce bouton, un événement sera généré et la fonction ChangeContent () sera exécuté.
functionchangeContent ()// Initialisation d'objet XMLHTTPREQUEST
constxhttp = newXmlHttpRequest ();
// Utilisation de la fonction intégrée Onload
xhttp.onload = function ()
// Mise à jour du contenu de l'élément div
document.getElementByid ("Exemple").innerhtml =
ce.ResponseText;
// Obtenez un fichier ajax_info.SMS
xhttp.ouvert ("get", "ajax_info.SMS");
// Envoyer une demande
xhttp.envoyer();
Maintenant que nous avons terminé avec la configuration de la page HTML, nous devons écrire un code de script. Pour ce tutoriel, nous allons inclure le code JavaScript à l'intérieur du étiqueter. Dans notre code de script, nous devons d'abord créer la fonction ChangeContent () qui sera exécuté en cliquant sur le bouton, nous pouvons le faire avec les lignes de code suivantes:
functionchangeContent ()// Initialisation d'objet XMLHTTPREQUEST
constxhttp = newXmlHttpRequest ();
// Utilisation de la fonction intégrée Onload
xhttp.onload = function ()
// Mise à jour du contenu de l'élément div
document.getElementByid ("Exemple").innerhtml =
ce.ResponseText;
// Obtenez un fichier ajax_info.SMS
xhttp.ouvert ("get", "ajax_info.SMS");
// Envoyer une demande
xhttp.envoyer();
Comme vous pouvez le voir dans l'extrait de code ci-dessus, la fonction génère un nouveau XMLHttpRequest et attend la réponse du serveur. Lors de la réception de la réponse, le contenu du div sera remplacé par cette fonction.
Laissez maintenant créer un fichier avec le nom de ajax_info.SMS et écrivez des informations factices dans ce fichier par exemple:
L'ensemble du code est donné ci-dessous:
L'objet XMLHttpRequest
La sortie du code ci-dessus est fournie ci-dessous:
Nous pouvons voir que lorsque l'utilisateur clique sur le bouton, le texte «change» au texte qui était présent à l'intérieur de l'Ajax_info.fichier txt.
Conclusion
JavaScript exécute le code ligne par ligne qui s'appelle l'exécution synchrone et donc Ajax entre en jeu car il s'agit d'une méthode qui aide à implémenter l'exécution asynchrone du code dans JavaScript. En exécution asynchrone, une instruction ou une ligne de code n'a pas à attendre la finition de la ligne de code précédente et les deux peuvent exécuter parallèle. AJAX est utilisé pour transmettre et recevoir des données du serveur de manière asynchrone sans affecter le reste de la page et ne nécessite même pas la rechargement de la page entière.
Dans cet article, nous avons vu ce qu'est l'Ajax, puis nous sommes allés voir comment Ajax fonctionne en décrivant le processus pas à pas, et à la fin, nous vous avons fourni un exemple pour rendre votre concept plus clair.