Comment rédiger une soumission de message en javascript

Dans le développement front-end, nous devons souvent utiliser la technologie AJAX pour envoyer des requêtes HTTP, y compris des requêtes POST. Cet article explique comment rédiger une requête POST en JavaScript.

1. Concepts de base des requêtes POST

Tout d'abord, nous devons comprendre les concepts de base des requêtes POST.

Dans le protocole HTTP, GET et POST sont deux méthodes de requête couramment utilisées. La principale différence est la suivante :

1. La requête GET transmet les paramètres directement dans l'URL, tandis que la requête POST place les paramètres dans le corps de la requête.
2. Les requêtes GET transmettent une petite quantité de données, généralement pas plus de 1 Ko, tandis que les requêtes POST n'ont pas de limite et peuvent transmettre de grandes quantités de données. Les requêtes
3. GET sont dangereuses car les paramètres de l'URL peuvent être consultés ou modifiés par l'utilisateur, tandis que les requêtes POST sont relativement sûres car les paramètres sont placés dans le corps de la requête.

Ce qui précède est le concept de base de la requête POST. Ensuite, nous présenterons comment écrire une requête POST en JavaScript.

2. Utilisez l'objet XMLHttpRequest pour envoyer des requêtes POST

En JavaScript, nous pouvons utiliser l'objet XMLHttpRequest pour envoyer des requêtes HTTP, y compris des requêtes GET et POST.

L'objet XMLHttpRequest est une API JavaScript qui peut être utilisée pour échanger des données avec le serveur en arrière-plan. Il peut charger des données de manière asynchrone grâce à la technologie AJAX et pouvoir mettre à jour la page sans recharger la page entière.

Voici les étapes de base pour envoyer une requête POST à ​​l'aide de l'objet XMLHttpRequest :

1. Création d'un objet XMLHttpRequest

Tout d'abord, nous devons créer un objet XMLHttpRequest. Ceci peut être réalisé en utilisant le code suivant :

var xhr = new XMLHttpRequest();

2. Définir le chemin et les paramètres de la requête

Ensuite, nous devons définir le chemin et les paramètres de la requête. Ces paramètres seront placés dans le corps de la requête. Ceci peut être réalisé en utilisant le code suivant :

xhr.open('POST', 'http://example.com/api', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('name=John&age=25');

Dans le code ci-dessus, nous définissons le chemin de la requête sur http://example.com/api, et les paramètres sont name=John et age=25.

De plus, l'en-tête de requête Content-type est également défini sur application/x-www-form-urlencoded. Il s'agit d'un en-tête de requête POST standard, indiquant au serveur que les paramètres du corps de la requête sont au format clé-valeur.

3. Recevoir les données renvoyées par le serveur

Enfin, nous devons recevoir les données renvoyées par le serveur. Ceci peut être réalisé en utilisant le code suivant :

xhr.onreadystatechange = function() {
  if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
    console.log(xhr.responseText);
  }
}

Dans le code ci-dessus, nous définissons le gestionnaire d'événements onreadystatechange de XMLHttpRequest. Lorsque readyState devient 4 (c'est-à-dire que la demande est terminée) et que le code d'état est 200, cela signifie que le serveur a répondu avec succès et renvoyé les données. À ce stade, les données renvoyées par le serveur peuvent être obtenues via xhr.responseText.

3. Utilisez l'API fetch pour envoyer une requête POST

En plus de l'objet XMLHttpRequest, vous pouvez également utiliser l'API fetch pour envoyer une requête POST. L'API fetch est une API JavaScript standard permettant d'envoyer des requêtes HTTP entre le client et le serveur et d'encapsuler la réponse du serveur à l'aide d'un objet Promise.

Voici les étapes de base pour envoyer une requête POST à ​​l'aide de l'API fetch :

1. Définir le chemin et les paramètres de la requête

Tout d'abord, nous devons définir le chemin et les paramètres de la requête. Ceci peut être réalisé en utilisant le code suivant :

fetch('http://example.com/api', {
  method: 'POST',
  headers: {
    'Content-type': 'application/x-www-form-urlencoded'
  },
  body: 'name=John&age=25'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

Dans le code ci-dessus, nous définissons le chemin de la requête sur http://example.com/api, et les paramètres sont name=John et age=25.

De plus, l'en-tête de requête Content-type est également défini sur application/x-www-form-urlencoded. Il s'agit d'un en-tête de requête POST standard, indiquant au serveur que les paramètres du corps de la requête sont au format clé-valeur.

2. Recevoir les données renvoyées par le serveur

Enfin, nous devons recevoir les données renvoyées par le serveur. Vous pouvez utiliser l'objet Promise de l'API fetch pour le gérer. Ceci peut être réalisé en utilisant le code suivant :

.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

Dans le code ci-dessus, nous utilisons la méthode Response.json() pour convertir le corps de la réponse au format JSON, traiter les données de réponse via la méthode then() et gérer les exceptions via la méthode catch().

4. Résumé

Grâce aux méthodes présentées dans cet article, nous pouvons écrire des requêtes POST en JavaScript, notamment en utilisant l'objet XMLHttpRequest et l'API de récupération. Ces méthodes peuvent charger des données de manière asynchrone et mettre à jour la page sans recharger la page entière. Vous pouvez choisir la méthode appropriée pour envoyer des requêtes POST en fonction des besoins réels.

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!