Maison > Article > interface Web > Que signifie la requête asynchrone jquery ?
La requête asynchrone jquery signifie qu'une fois que le navigateur a envoyé une requête au serveur, il peut envoyer la requête suivante à tout moment sans attendre le retour de la réponse du serveur, c'est-à-dire que les données avant l'envoi de la requête ne sont pas perdues et. Un rafraîchissement partiel de la page peut être réalisé ; vous pouvez utiliser Ajax, "$.get()", "$.post()" et "$.getJSON()" pour implémenter des requêtes asynchrones.
L'environnement d'exploitation de ce tutoriel : système Windows 10, jquery version 3.6.0, ordinateur Dell G3.
Demande asynchrone
Lorsque le navigateur envoie une requête synchrone au serveur, pendant que le service traite la requête synchrone, le navigateur sera dans un état d'attente que le serveur traitera. la demande et répond avec les données. Le navigateur écrase les données d'origine dans la mémoire du navigateur, et le navigateur recharge la page et affiche les données de réponse du serveur.
Alors, existe-t-il une technologie qui permet au navigateur d'envoyer une requête au serveur ? Pendant que le serveur traite la requête, le navigateur n'est pas en état d'attente et le navigateur ne recharge pas la page entière lors de la réception de la réponse. data. Comment réaliser un rafraîchissement partiel de la page sans perdre les données avant l’envoi de la requête ? Ensuite, vous devez utiliser la requête ajax - modèle de requête asynchrone
La requête synchrone signifie qu'après l'envoi d'une requête, vous devez attendre le retour de la réponse du serveur avant d'envoyer la requête suivante.
Les requêtes asynchrones sont opposées aux requêtes synchrones. Les requêtes asynchrones n'ont pas besoin d'attendre une réponse et la requête suivante peut être envoyée à tout moment.
Quatre façons de requêtes asynchrones jQuery
La première requête Ajax :
Enregistrer les données sur le serveur, afficher les informations en cas de succès
$.ajax({ type: “POST”, url: “some.php”, data: “name=John&location=Boston”, success: function(msg){ alert( "Data Saved: " + msg ); } });
Remarque :
l tapez : (par défaut : "GET"), méthode de requête ( "POST" ou "GET") Les autres méthodes de requête ne sont prises en charge que par certains navigateurs.
l url : (adresse par défaut de la page actuelle) l'adresse à laquelle envoyer la demande.
l data : données stockées.
l success : Appelée après la requête, les données renvoyées et la chaîne contenant le code de réussite sont transférées.
l Function() doit stocker les variables globales déclarées côté contrôleur
La deuxième requête $.get() :
(Charger les informations via une requête HTTP GET à distance. Il s'agit d'une simple fonction de requête GET Pour remplacer le complexe $.ajax. La fonction de rappel peut être appelée lorsque la requête réussit. Si vous devez exécuter la fonction lorsqu'une erreur se produit, utilisez $.ajax.)
Description :
Afficher la valeur de retour test.php (HTML ou XML, selon). sur la valeur de retour).
Code jQuery :
$.get(“test.php”, function(data){ alert("Data Loaded: " + data); });
Troisième requête $.post() :
(charger les informations via une requête HTTP POST distante)
Description :
Afficher les résultats de la page demandée test.php (HTML ou XML, selon (basé sur le contenu renvoyé) :
Code jQuery :
$.post(“test.php”, function(data){ alert("Data Loaded: " + data); });
Quatrième requête $.getJSON() :
(chargement des données JSON via une requête HTTP GET)
Code jQuery :
$.getJSON(“http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format =json&jsoncallback=?”, function(data){ $.each(data.items, function(i,item){ $("").attr(“src”, item.media.m).appendTo("#images"); if ( i == 3 ) return false; }); });
Remarque :
l $.getJSON () est différente des trois premières. Ce qui est renvoyé dans le contrôleur n'est pas du contenu mais du code au format JSON
Tutoriel vidéo recommandé : Tutoriel vidéo jQuery
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!