Comment envoyer une demande de poste à l'aide de XMLHTTPREQUEST dans JavaScript

Le XMLHttpRequest est une API sous forme d'objets qui est utilisé pour envoyer ou recevoir des données de serveurs. La méthode Send () de XmlHttpRequest fait une demande au serveur. La demande est asynchrone par défaut mais peut également être synchrone. Si la demande est synchrone, la méthode ne revient que lorsque la réponse arrive, sinon la réponse est livrée à l'aide d'événements.

HmlHttpRequest fait partie de l'Ajax qui sont des techniques de développement Web qui peuvent être utilisées pour développer des applications Web asynchrones. Sur les pages Web asynchrones, nous pouvons envoyer et recevoir des données de serveurs et mettre à jour les pages Web sans recharger les pages Web.

La demande envoyée par XMLHttpRequest peut être une demande Get ou Post. Nous pouvons obtenir dans la plupart des cas, mais la publication est plus sécurisée et doit être utilisée chaque fois que nous avons de grandes quantités de données ou une entrée utilisateur inconnue.

Envoi d'une demande de poste à l'aide de XMLHttpRequest

Pour envoyer une demande via xmlhttpRequest, nous devons d'abord faire un nouvel objet XMLHttpRequest:

const de demande = nouveau xmlHttpRequest ();

Pour envoyer une demande, nous devons utiliser les méthodes Open () et envoyer (). La méthode Open () prend trois paramètres qui sont la méthode (get / post), l'URL (emplacement du fichier sur le serveur) et une valeur booléenne pour la nature asynchrone ou synchrone de la demande:

demande.Open ("Post", "file_path", true);

Pour une demande synchrone:

demande.Open ("Post", "file_path", false);

Avec les demandes asynchrones, JavaScript n'attend pas la demande de la demande et peut exécuter d'autres scripts pendant la fin de la demande. Il n'est pas recommandé d'utiliser des demandes synchrones car l'application Web peut s'arrêter complètement si le serveur est occupé.

Avant d'envoyer les données par la méthode Send (), nous pouvons également utiliser le setRequestHeader () pour envoyer les données comme un formulaire HTML avec un nom d'en-tête et une valeur d'en-tête:

demande.setRequestHeader (en-tête, valeur);

Nous pouvons maintenant envoyer des données avec un paramètre facultatif qui spécifie le corps de la demande:

demande.envoyer (corps);

La propriété OnReadyStateChange peut être utilisée sur l'objet XMLHTTPRequest pour exécuter une fonction une fois qu'une réponse a été reçue du serveur:

demande.onreadystatechange =>
si ce.ReadyState == XmlHttpRequest.Fait && ceci.status == 200)
// code à exécuter une fois la demande terminée

;

Dans l'ensemble, une simple demande de publication asynchrone utilisant XMLHTTPREQUEST ressemblera à ceci:

const de demande = nouveau xmlHttpRequest ();
demande.Open ("Post", "file_path", true);
demande.setRequestHeader (en-tête, valeur);
demande.onreadystatechange =>
si ce.ReadyState == XmlHttpRequest.Fait && ceci.status == 200)
// code à exécuter une fois la demande terminée

;
demande.envoyer (corps);

Conclusion

XMLHTTPREQUEST AJAX peut être utilisé pour envoyer et recevoir des données du serveur et mettre à jour la page Web en fonction de celui-ci. Cette technique est de l'or pur pour les développeurs car ils peuvent faire tout cela sans avoir à recharger la page.