Comment passer un appel ajax en javascript?

JavaScript est un langage de programmation de haut niveau où le code est exécuté ligne par ligne et est appelé exécution synchrone du code. L'inconvénient de l'exécution synchrone est que les lignes de code suivantes doivent attendre l'exécution complète de la ligne de code actuelle. La réponse à ce problème est l'exécution asynchrone, dans une instruction asynchrone ou une ligne n'a pas à attendre que le code précédent s'exécute complètement, ils peuvent s'exécuter en parallèle. Pour réaliser une exécution asynchrone du code, Ajax entre en jeu.

Dans cet article, nous verrons ce qu'est AJAX et comment passer un appel Ajax en JavaScript à l'aide d'un exemple.

Qu'est-ce que l'Ajax?

Ajax est devenu populaire en 2005 lorsque Google l'a mis en place dans leur Google suggérer et il signifie JavaScript et XML asynchrones. Xml signifie un langage de balisage extensible qui est utilisé pour chiffrer les messages qui peuvent être lus par les humains et les machines. XML est similaire à HTML, mais il vous permet de construire et de personnaliser vos propres balises. La fonction de AJAX est de transmettre des demandes à un serveur puis de recevoir des données de ce serveur de manière asynchrone.

L'avantage de l'Ajax est qu'il remplit sa fonction sans avoir besoin de rafraîchir toute la page. Par exemple, lorsque vous tapez quelque chose à rechercher dans la barre de recherche Google, avec chaque touche, appuyez sur la barre de recherche fait des appels Ajax et que l'utilisateur reçoit des suggestions sans rafraîchir la page.

Il convient de noter que l'Ajax communique avec le serveur à l'aide de l'objet XMLHTTPRequest, JavaScript / Dom pour faire des demandes et XML comme mécanisme de transmission de données.

Ajax est déclenché avec un événement puis exécute ses fonctionnalités en créant d'abord un Xmlhttprequest objet puis envoyer le Httprequest au serveur où le Httprequest est traité et une réponse est générée qui est ensuite renvoyée au navigateur avec certaines données. Le navigateur traite les données renvoyées et met à jour le contenu de la page à l'aide de JavaScript.

Maintenant que nous savons ce qu'est AJAX et comment passer un appel ajax en utilisant JavaScript.

Appel ajax en utilisant JavaScript

Dans cet exemple, nous allons d'abord initialiser l'objet XMLHttpRequest qui est utilisé pour communiquer avec le serveur ou pour le dire simplement, passer un appel ajax. Le XMLHTTPRequest a de nombreuses méthodes intégrées que nous pouvons utiliser pour manipuler ou jouer avec le serveur en envoyant, en interrompant les réponses et en recevant des données du serveur. Nous nous connecterons à une fausse API gratuite pour tester notre appel ajax. Le lien de l'API que nous allons utiliser est donné ci-dessous:

https: // jsonplaceholder.typicode.com /

Le code complet pour passer un appel ajax est donné ci-dessous:

functionmyfunc ()
// Initialisation de l'objet XMLHTTPRequest
varXhttp = newXmlHttpRequest ();
// établit une connexion avec la fausse API
varurl = 'https: // jsonplaceholder.typicode.com / todos / 1 ';
// Obtenez l'API de l'URL
xhttp.Open ("Get", URL, true);
// Lorsque la demande réussit, la fonction ci-dessous s'exécutera
xhttp.onReadyStateChange = function ()
// Si la demande est complète et réussie
si ce.ReadyState == 4 && ceci.status == 200)
console.journal (ceci.ResponseText);


// Envoyer une demande
xhttp.envoyer();

// appelle la fonction myfunc
myfunc ();

Dans le code ci-dessus, nous avons d'abord initialisé une fonction avec le nom de myfunc (), Et à l'intérieur de cette fonction, nous avons créé un Xmlhttprequest objet. Ensuite, nous établissons la connexion avec une API à l'aide d'une URL. Pour obtenir l'API, nous utilisons le xhttp.ouvrir() Méthode et passer la méthode HTTP OBTENIR et le URL. La méthode GET est utilisée lorsque nous obtenons des données d'un serveur et du POSTE La méthode est utilisée lorsque nous écrivons ou mettons à la mise à jour des données sur le serveur.

Maintenant, lorsque la demande terminera l'exécution et si elle réussit, le onreadystatechange L'événement s'exécutera où nous utilisons une condition que si la demande est terminée et que la demande a été réussie, la console enregistre les données. Le code d'état 200 est utilisé ce qui signifie ok. Le 400 Le code d'état signifie l'erreur et le 300 Le code d'état signifie rediriger vers une page. L'étape suivante consiste à envoyer la demande à l'aide de la méthode Send ().

En fin de compte, nous appelons la fonction myfunc () et nous verrons la sortie suivante dans le journal de la console:

Le code d'état vu dans les outils du développeur est de 200, ce qui signifie OK:

Conclusion

Ajax signifie JavaScript asynchrone et XML où XML est utilisé pour crypter des messages qui sont faits en format lisible pour les humains et les machines, sauf que XML vous permet de personnaliser vos propres balises. Ajax vous permet de transmettre des données au serveur sans avoir à actualiser la page entière. Il effectue son opération de manière asynchrone, améliorant ainsi la vitesse car le code n'a pas à attendre le code précédent pour terminer son exécution. En JavaScript, l'objet XMLHTTPREQUEST est utilisé pour passer un appel ajax.

Dans cet article, nous avons d'abord discuté de ce qu'est l'AJAX, puis nous avons continué à discuter de la façon de passer un appel AJAX en JavaScript en utilisant l'objet XMLHTTPREQUEST.