méthode javascripthttp

JavaScript est un langage de programmation important dans le développement front-end, utilisé pour gérer diverses opérations interactives dans les pages Web. Parmi elles, la méthode http est une méthode de requête couramment utilisée, qui peut envoyer une requête au serveur et obtenir le résultat de la réponse. Cet article explorera la méthode http en JavaScript et son utilisation associée.

1. Présentation de la méthode http

La méthode http fait référence à une méthode d'envoi de requêtes au serveur via le réseau. Les méthodes http actuellement couramment utilisées incluent GET, POST, PUT, DELETE, etc. Parmi elles, GET et POST sont les deux méthodes les plus utilisées.

Quatre actions dans le protocole HTTP :

GET : Utilisé pour demander l'accès aux ressources qui ont été identifiées par l'URI pour effectuer une opération de « lecture ». La méthode GET nécessite que le serveur renvoie la ressource située par l'URL dans le corps du message de réponse et spécifie le format et le jeu de caractères des informations d'en-tête de réponse pour décrire le contenu.

POST : soumettra les données à la ressource spécifiée et demandera au serveur un traitement (comme la soumission d'un formulaire ou le téléchargement d'un fichier). Les requêtes POST peuvent entraîner la création de nouvelles ressources et/ou la modification de ressources existantes.

PUT : Utilisé pour télécharger des fichiers sur le serveur ou pour mettre à jour des ressources existantes.

DELETE : demandez au serveur de supprimer la ressource spécifiée.

2. Méthode http en JavaScript

En JavaScript, vous pouvez utiliser l'objet XMLHttpRequest pour implémenter des requêtes http. L'objet XMLHttpRequest fournit les méthodes courantes suivantes :

(1) méthode open() : La fonction de cette méthode est de créer une nouvelle requête http. Les paramètres de cette méthode incluent la méthode http, l'adresse URL demandée et l'utilisation ou non du mode de requête asynchrone, etc.

XMLHttpRequest.open(method, url, async, user, password);

Description du paramètre de méthode :

method : représente une méthode http, telle que GET, POST, PUT, DELETE, etc.

url : Indique l'adresse URL demandée.

async : Indique s'il faut utiliser le mode de requête asynchrone. false indique le mode synchrone, true indique le mode asynchrone.

user : indique le nom d'utilisateur, facultatif.

mot de passe : Indique le mot de passe, facultatif.

(2) Méthode send() : Cette méthode est utilisée pour envoyer des requêtes http au serveur. Les paramètres de cette méthode peuvent être le contenu des données demandées (pour la méthode POST) ou vides (pour la méthode GET).

Méthode XMLHttpRequest.send(data);

(3) setRequestHeader() : Cette méthode est utilisée pour définir les attributs et les valeurs dans l'en-tête de la requête. Les attributs dans l'en-tête de la demande incluent Content-Type, Accept, etc.

XMLHttpRequest.setRequestHeader(name, value);

Description du paramètre de méthode :

name : Spécifiez le nom de l'attribut dans l'en-tête de la requête.

value : Spécifiez la valeur de l'attribut dans l'en-tête de la requête.

(4) Attribut onreadystatechange : Cet attribut définit une fonction de rappel pour gérer le changement d'état de la réponse du serveur.

XMLHttpRequest.onreadystatechange = function() {};

• readyState : Représente l'état de l'objet XMLHttpRequest, allant de 0 à 4.

0 : représente non initialisé (la méthode open() n'a pas encore été appelée).
1 : Indique qu'il est en cours d'initialisation, c'est-à-dire que la méthode open() a été appelée, mais que la méthode send() n'a pas encore été appelée.
2 : Cela signifie que la requête a été envoyée (la méthode send() a été appelée), mais que le message de réponse du serveur n'a pas encore été reçu.
3 : Le message de réponse du serveur a été reçu, mais toutes les données de réponse n'ont pas encore été lues.
4 : Toutes les données de réponse ont été lues.

status : Indique le code d'état renvoyé par le serveur, tel que 200 indiquant le succès, 404 indiquant que la ressource demandée n'existe pas, etc.

responseText : représente le texte de réponse renvoyé par le serveur.

3. Exemple de démonstration

Ce qui suit est un exemple d'envoi d'une requête http à l'aide de la méthode GET et de la méthode de requête asynchrone :

function sendHttpRequest() {
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText);
        }
    }
    xhr.open("GET", "https://www.example.com/", true);
    xhr.send();
}

Dans le code ci-dessus, nous définissons une fonction appelée sendHttpRequest() et utilisons l'objet XMLHttpRequest dans la fonction Une requête GET est envoyée à l'adresse "https://www.example.com/" et le mode de requête asynchrone est défini sur true. Lorsque le serveur renvoie avec succès le résultat de la réponse et que le code d'état est 200, le texte de la réponse sera imprimé sur la console.

Ce qui suit est un exemple d'envoi d'une requête http à l'aide de la méthode POST et de la méthode de requête synchrone :

function sendHttpRequest() {
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "https://www.example.com/", false);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("name=John&age=25");
    console.log(xhr.responseText);
}

Dans le code ci-dessus, nous définissons une fonction nommée sendHttpRequest() et utilisons l'objet XMLHttpRequest dans la fonction pour envoyer la requête sur "https://www .example.com/" et définissez le mode de requête synchrone sur false. En même temps, nous avons également appelé la méthode setRequestHeader() pour définir l'attribut Content-Type dans l'en-tête de la requête, indiquant que le type de données de la requête est "application/x-www-form-urlencoded". Méthode send() pour envoyer des données de requête, le contenu des données est "name=John&age=25". Lorsque le serveur renvoie avec succès le résultat de la réponse, le texte de la réponse est imprimé sur la console.

4. Résumé

Cet article présente la méthode http en JavaScript et son utilisation associée. Grâce à la démonstration de l'exemple ci-dessus, nous pouvons voir que l'utilisation de l'objet XMLHttpRequest peut facilement implémenter des requêtes http. En même temps, différents types et formats de requête peuvent également être implémentés en définissant des en-têtes de requête et des paramètres de requête. Par conséquent, maîtriser la méthode http en JavaScript est très nécessaire pour les développeurs front-end.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!