Comment implémenter des requêtes synchrones asynchrones en AJAX

Ce tutoriel explique comment implémenter des requêtes asynchrones et synchrones dans AJAX. Nous savons que le type FormData et l'interface d'écoute d'événements nécessitent l'implémentation d'AJAX. Existe-t-il donc un moyen de demander au serveur uniquement lorsque les données de la page changent ? remplacer dynamiquement les données affichées sur la page par de nouvelles données tout en empêchant le rafraîchissement de la page ? Aujourd'hui, parlons du concept d'AJAX.

Objet XMLHttpRequest

XMLHttpRequest est juste un Objet JavaScript, pour être précis, c'est un constructeur. En d’autres termes, ce n’est pas du tout mystérieux, la seule particularité est qu’il est fourni par le client (c’est-à-dire le navigateur) (plutôt que d’être natif de JavaScript. De plus, il possède des propriétés, des méthodes et). nécessite l'instanciation via le nouveau mot-clé, il suffit de les maîtriser

XMLHttpRequest pour obtenir des données

Nous savons qu'AJAX est utilisé pour obtenir des données dans le projet en empêchant le rafraîchissement de la page, puis où d'où viennent les données ? Comment savons-nous comment obtenir ces données ? La réponse est que nous utilisons généralement des API pour interagir avec diverses bases de données.

"API" est l'abréviation de "Application Programming Interface" (c'est-à-dire : Application Programming Interface). Vous pouvez imaginer que certaines données sont ouvertes et attendent d'être utilisées, et la façon dont nous obtenons ces données est de les utiliser. l'API. La forme habituelle d'une API est une URL et fournit des noms de paramètres et des valeurs de paramètres spécifiés pour vous aider à localiser les données que vous souhaitez obtenir.

XMLHttpRequest - Préparer la demande

Pour interagir avec le serveur, vous devez d'abord réfléchir aux questions suivantes :

Voulons-nous obtenir des données ou stocker des données ? ——La méthode de requête est « GET » ou « POST ». Où envoyer la requête ?　　　——C'est-à-dire l'adresse API correspondante. Comment attendre la réponse ? - Il existe deux options : "synchrone" et "asynchrone"

La méthode .open() de l'instance XMLHttpRequest est utilisée pour répondre aux trois questions ci-dessus. La méthode .open() reçoit trois paramètres : la méthode de requête, l'adresse URL de la requête et une valeur booléenne indiquant s'il s'agit d'une requête asynchrone.

Ce qui suit est un exemple d'appel de la méthode .open() :

// Ce code lancera une requête synchrone GET pour "example.php".

xhr.open("get", "example.php", false)

// "DELETE", "HEAD", "OPTONS", "PUT" peut également être utilisé comme open( ) premier paramètre de la méthode.

Dans le code ci-dessus, la synchronisation est réalisée en passant le troisième paramètre comme faux. Il convient de noter qu'une fois définie sur synchrone, la méthode send() se bloquera jusqu'à ce que la requête soit terminée.

(3) Requêtes synchrones et requêtes asynchrones

Les gens pensent généralement qu'AJAX est asynchrone, mais en fait ce n'est pas le cas. AJAX est une technologie permettant d'éviter de rafraîchir la page après avoir obtenu les données. pour attendre le serveur Que la méthode de réponse soit synchrone ou asynchrone, les développeurs doivent la configurer en fonction des besoins de l'entreprise (bien qu'elle soit généralement asynchrone).

Vous pourriez être curieux, quand devons-nous utiliser l'AJAX synchrone ? D'après mon expérience personnelle, il semble difficile de trouver la scène correspondante.

Enfin, expliquons brièvement la différence entre « synchrone » en attente d'une réponse et « asynchrone » en attente d'une réponse : « Synchrone » signifie qu'une fois la requête envoyée, tout code JavaScript ultérieur ne sera pas exécuté, tandis que « asynchrone » signifie que lorsque la requête est envoyée, le code JavaScript suivant continuera à s'exécuter. Lorsque la requête réussit, la fonction de rappel correspondante sera appelée.

Type FormData XMLHttpRequest niveau 2

Le W3C a proposé la spécification XMLHttpRequest niveau 2 Bien que tous les navigateurs n'aient pas implémenté le contenu spécifié dans la spécification, certains contenus sont encore entièrement ou implémentés. par la plupart des navigateurs.

Type FormData

FormData est un nouveau type de données (constructeur) qui nous est fourni par XMLHttpRequest niveau 2. Rappelez-vous également comment déguiser une requête POST Soumettre un formulaire ? FormData facilite ce processus car l'objet XHR2 reconnaît que le type de données transmis est une instance de FormData et configure automatiquement les informations d'en-tête appropriées.

Comment déguiser une requête POST en soumission de formulaire ?

Lorsque vous utilisez la méthode POST pour soumettre les données du formulaire dans cette séquence, l'en-tête de requête "Content-Type" doit être défini sur cette valeur.

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

Remarque : Il ne s'agit pas d'une valeur obligatoire lors de l'utilisation du formulaire car il s'agit de la valeur par défaut. méthode.

FormData est utilisé comme suit :

// 添加数据
let data1 = new FormData()
data1.append("name", "Tom")
xhr.send(data1)
 
// 提取表单数据
let data2 = new FormData(document.forms[0])
xhr.send(data2)

De plus, un autre avantage de FormData est que par rapport aux requêtes AJAX traditionnelles, il nous permet de télécharger des données binaires (images, vidéos, audio, etc.).

Compatibilité du navigateur pour FormData.

Support de bureau IE 10+ et d'autres navigateurs

Mobile Android, Firefox Mobile, OperaMobile sont pris en charge, les autres navigateurs sont inconnus

Interface de surveillance des événements XMLHttpRequest niveau 2

La première version de XMLHttpRequest ne peut spécifier qu'une fonction de rappel pour l'événement onreadystatechange. L'événement répond à toutes les situations.

La deuxième version de XMLHttpRequest permet de spécifier des fonctions de rappel pour plus d'événements.

onloadstart Requête émise

onprogress Envoi et chargement des données

onabort La requête a été abandonnée, par exemple, l'utilisateur a appelé la méthode abort()

onerror La demande a échoué

onload La demande est terminée avec succès

ontimeout Le délai spécifié par l'utilisateur a expiré et la demande n'a pas été complétée

onloadend La demande est terminée quel que soit le le résultat ou l'échec

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Résumé et explication de l'utilisation du framework front-end js

Comment résoudre le problème d'ajax unité lors de l'analyse des données json Sous forme de secondes

Étapes pour implémenter le téléchargement de fichiers avec js et servlet dans h5

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!