Cet article fait référence et cite « Sharp JQuery » pour fournir une explication détaillée de jQuery-Ajax et de ses principales méthodes.
a. Ne nécessite aucun plug-in de navigateur. <br/>Ne nécessite aucun plug-in de navigateur et peut être pris en charge par la plupart des navigateurs. Les utilisateurs doivent uniquement autoriser JavaScript sur le navigateur. navigateur Exécutez simplement.
b. Excellente expérience utilisateur.
Le plus grand avantage est que les données peuvent être mises à jour sans actualiser la page entière, ce qui permet à l'application Web de répondre rapidement aux opérations de l'utilisateur.
c. Améliorer les performances des programmes Web <br/>Par rapport au mode traditionnel, la plus grande différence de performances du mode Ajax réside dans la manière de transmettre les données. Dans le mode traditionnel, la soumission des données se fait via le formulaire (depuis). et les données Ce qui est obtenu est d'obtenir le contenu de la page entière en actualisant complètement la page Web. Le mode Ajax soumet uniquement les données qui doivent être soumises au serveur via l'objet XMLHttpRequest, c'est-à-dire qu'elles sont envoyées à la demande. .
d. Réduire la charge sur les serveurs et le haut débit
Le principe de fonctionnement d'Ajax équivaut à l'ajout d'une couche intermédiaire entre l'utilisateur et le serveur, qui asynchrone les opérations de l'utilisateur et les réponses du serveur. Il crée un moteur Ajax sur le client et transfère une partie du travail du serveur de manière traditionnelle. le client. , ce qui facilite le traitement des ressources client et réduit la charge sur les serveurs et le haut débit.
a. Prise en charge insuffisante du navigateur pour l'objet XMLHttpRequest.
L'un des défauts d'Ajax vient d'abord du navigateur. Seuls IE5.0 et les versions ultérieures prennent en charge l'objet XMLHttpRequest (la plupart des clients à ce stade sont IE6 ou supérieurs et prennent en charge XMLHttpRequest ultérieurement). normalement dans différents navigateurs, les programmeurs doivent consacrer beaucoup d'efforts à coder pour prendre en compte les différences entre les navigateurs, afin que les applications Aajx puissent être mieux compatibles avec les différents navigateurs.
b. Détruire les fonctions normales des boutons avant et arrière du navigateur <br/>En Ajax, les fonctions des boutons avant et arrière seront invalides bien que certaines méthodes (ajout de points d'ancrage) puissent être utilisées pour permettre aux utilisateurs d'utiliser le bouton avant. et les boutons retour, Mais par rapport à la méthode traditionnelle, c'est beaucoup plus gênant pour les utilisateurs, ils rencontrent souvent cette situation lorsqu'ils cliquent sur un bouton pour déclencher une interaction Ajax, ils ont l'impression qu'ils ne veulent pas le faire. puis ils cliquent habituellement sur le bouton de retour, le résultat le plus indésirable s'est produit. Le navigateur est revenu à une page précédente et le contenu obtenu via l'interaction Ajax a complètement disparu.
c. Prise en charge insuffisante des moteurs de recherche <br/>Habituellement, les moteurs de recherche utilisent des robots pour rechercher et organiser des milliards de données massives sur Internet. Cependant, les robots ne peuvent pas encore comprendre ces étranges codes JavaScript et donc les changements dans le contenu des pages provoqués par Ajax font des sites. l'utilisation d'Ajax est désavantagée par rapport aux sites traditionnels dans la promotion du réseau.
d. Manque d'outils de développement et de débogage
JavaScript est une partie importante d'Ajax. À l'heure actuelle, en raison du manque de bons outils de développement et de débogage JavaScript, de nombreux développeurs Web ont peur de JavaScript. Cela rend l'écriture de code Ajax encore plus difficile, de nombreux développeurs Web y sont désormais habitués. . Elle a peur d'utiliser des outils visuels et d'écrire du code elle-même, ce qui a affecté dans une certaine mesure l'application d'Ajax par chacun.
La méthode AppServ Ajax doit interagir avec le serveur Web, elle nécessite donc un environnement AppServe est une boîte à outils pour installer l'environnement.
Adresse de téléchargement : https://www.appserv.org/en/download/Installation
: Appuyez en continu sur le bouton Suivant d'une seule machine et saisissez des informations courantes telles que l'adresse du site Web, l'adresse e-mail, le mot de passe, etc. Le port par défaut est 80.
Entrez « http://localhost:80 » dans le navigateur et l'interface suivante apparaîtra, indiquant que l'installation est réussie.
Utilisation : copiez le programme écrit dans le dossier AppServwww installé, puis entrez « http://loaclhost:80/program file name » dans la barre d'adresse pour y accéder.
La bibliothèque jQuery dispose d'une suite complète compatible Ajax. Les fonctions et méthodes à l'intérieur nous permettent de charger des données depuis le serveur sans actualiser le navigateur.
https://www.w3school.com.cn/jquery/jquery_ref_ajax.asp
Sur la photo ci-dessus,
et $.getJSON().
a déjà publié un article « Explication détaillée de la méthode jquery ajax-ajax() ».
Pour plus de détails, veuillez cliquer sur : https://juejin.cn/post/7019188063704350756
est différente des autres méthodes. La méthode, la plus simple et la plus couramment utilisée, permet de charger du code HTML distant et de l'insérer dans le DOM.
Paramètres
de chargementde la structure
(url, [data], [callback])
Application
1) Chargement de documents HTML
Créez d'abord un fichier HTML (test.html) qui est chargé par la méthode load() et ajouté à la page. Le code HTML est le suivant :
<!DOCTYPE html>. <html> <tête> <méta charset="utf-8"> <titre>Tester</titre> </tête> <corps> <div> <p>Bonjour tout le monde !</p> <ul> <li>C</li> <li>C#</li> <li>C++</li> <li>Java</li> <li>.Net</li> <li>JSP</li> <li>ASP</li> <li>PHP</li> <li>Python</li> <li>ios</li> <li>Android</li> <li>Javascript</li> <li>CSS</li> <li>HTML</li> <li>XML</li> <li>VUE</li> <li>Réagir</li> <li>Angulaire</li> <li>SQL</li> </ul> </div> </corps> </html>
Créez ensuite une nouvelle page vierge (main.html), incluant le bouton qui déclenche l'événement Ajax, et l'identifiant "content"
utilisé pour afficher le contenu HTML ajouté (test.html).<!DOCTYPEhtml> <html> <tête> <méta charset="utf-8"> <script src="jquery/jquery-2.1.1.js"></script> <titre>principal</titre> </tête> <corps> <!-- méthode load() --> <button id="btn1">Cliquez pour charger</button> <h1>Contenu chargé :</h1> <div id="content1"></div> </corps> </html>
Ensuite, écrivez le code jQuery. Une fois le DOM chargé, appelez la méthode de chargement en cliquant sur le bouton pour charger le contenu de test.html dans l'élément avec l'identifiant "content". Le code est le suivant :
<script type="text/javascript">
$(fonction(){
// méthode load(url) $("#btn1").click(function(){
$("#content1").load("test.html")//Charger le contenu de test.html sur la page actuelle lorsque vous cliquez dessus })
})
</script> Avant de charger les résultats en cours d'exécution
:
Après chargement :
2) Filtrez les documents HTML chargés.
L'exemple ci-dessus consiste à charger tout le contenu de test.html dans l'élément avec l'identifiant "content" dans main.html. Si vous souhaitez uniquement charger certains contenus, vous pouvez utiliser load(url. sélecteur) à réaliser.
Remarque : Il y a un espace entre l'URL et le sélecteur.
Par exemple, pour charger uniquement le contenu de la balise p dans test.html, le code est le suivant :
<script type="text/javascript">
$(fonction(){
// charger(url, sélecteur) filtre $("#btn1").click(function(){
$("#content1").load("test.html p")
})
})
</script> Exécuter les résultats
3) Mode de transfert
Le mode de transfert de la méthode load() est automatiquement spécifié en fonction des données des paramètres. Si aucun paramètre n'est passé, la méthode GET est utilisée ; sinon, elle est automatiquement convertie en méthode POST.
// Méthode load(url,fn), pas de transfert de paramètre, méthode GET $("#btn1").click(function(){
$("#content1").load("test.html", function(){
//code
})
})
// Méthode load(url,fn), il y a des paramètres à passer, méthode POST $("#btn1").click(function(){
$("#content1").load("test.html", {nom : "peiqi", âge : "18"}, function(){
//code
})
}) 4) Paramètres de rappel
Pour les opérations qui doivent être poursuivies une fois le chargement terminé, la méthode load() fournit une fonction de rappel (callback). Cette fonction a 3 paramètres, représentant "demande de contenu renvoyé" et "état de la demande". object", le code est le suivant :
$("#content1").load("test.html p", function(responseText, textStates, XMLHttpRequest) {
//responseText : Contenu renvoyé par la requête //textStates : Statut de la requête : succès erreur notmodified timeout 4 types //XMLHttpRequest : objet XMLHttpRequest}); Remarque : dans la méthode load(), que la requête Ajax ait réussi ou non, comme tant que la requête est terminée (complete), la fonction de rappel (callback) sera déclenchée.
load() obtiennent généralement des fichiers de données statiques du serveur Web. Si vous devez transmettre certains paramètres à la page du serveur, vous pouvez les utiliser.
ou méthode $.ajax()).
Avis:
() sont des fonctions globales dans jQuery.
1) Méthode $.get()
La méthode $.get() utilise la méthode GET pour effectuer des requêtes asynchrones.
Structure
des paramètres
$.get(url, [data], [callback], [type])
L'application
ci-dessous est un morceau de code HTML pour une page de commentaires, qui introduit l'utilisation de la méthode $.get(). Le code est le suivant :
<!-- Méthodes $.get() et $.post() --> <h3>Commentaires</h3> <p>Nom :<input type="text" name="" id="name"></p> <p>Contenu :<textarea id="content2"></textarea></p> <button id="btn2">Laisser un message</button> <div id="msg"></div>
La page générée par ce code est telle que présentée dans la figure :
Après avoir renseigné votre nom et votre contenu, vous pouvez soumettre votre commentaire.
a. Tout d'abord, vous devez déterminer l'adresse URL demandée.
$("#btn2").click(function(){
$.get("test.php", paramètre de données, fonction de rappel)
}) b. Avant de soumettre, transmettez les valeurs de nom et de contenu en arrière-plan en tant que données de paramètre.
$("#btn2").click(function(){
$.get("test.php", {"username":$("#name").val(), "content":$("#content2").val()}, fonction de rappel)
}) c. Si le serveur reçoit les données transmises et renvoie avec succès, les données renvoyées peuvent être affichées sur la page via la fonction de rappel.
La fonction de rappel de la méthode $.get() n'a que deux paramètres
function(){
//data : Le contenu renvoyé peut être des documents XML, des fichiers json, des fragments XHML, etc. //textStatus : Statut de la demande : erreur de réussite, délai d'expiration non modifié 4 types} d. Le paramètre représente l'état de la demande. Et la fonction de rappel ne peut être appelée que lorsque les données sont réussies (load() est appelée quel que soit le succès ou l'échec).
// Méthode $.get()$("#btn2").click(function(){
$.get("test.php", {"username":$("#name").val(),"content":$("#content2").val()}, function(data,textStatus) {
if(textStatus=="succès"){ //succès
//code
$(data).appendTo("#msg")
}
},
"html")//type
}) e. Résultats de l'opération
2) La méthode $.post()
a la même structure et la même utilisation que la méthode $.get(), mais il existe toujours les différences suivantes :
a La méthode GET transmettra les paramètres après l'URL et les données seront parcourues. Le serveur le met en cache, tandis que la méthode POST est envoyée au serveur en tant que contenu d'entité du message HTTP (c'est-à-dire enveloppé dans le corps de la requête). On peut voir que la sécurité de la méthode POST est supérieure à celle de la méthode POST. Méthode GET.
b. La méthode GET a une limite de taille sur les données transmises (généralement pas supérieure à 2 Ko), tandis que la méthode POST n'a en théorie aucune limite de taille.
c. Les données transférées par la méthode GET et la méthode POST sont obtenues différemment côté serveur. En PHP, les données en mode GET peuvent être obtenues avec "_GET[]", tandis que les données en mode POST peuvent être obtenues avec " _POST[]". Les deux méthodes peuvent être obtenues en utilisant "$_REQUEST[]".
d. La vitesse de transmission de la méthode GET est supérieure à celle de la méthode POST.
Étant donné que toutes les données soumises par les méthodes POST et GET peuvent être obtenues via $_REQUEST[], tant que la fonction jQuery est modifiée, le programme peut basculer entre les requêtes GET et les requêtes POST. Le code est le suivant :
// $. méthode post() $("#btn2").click(function(){
$.post("test.php", {"username":$("#name").val(),"content":$("#content2").val()}, function(data,textStatus) {
if(textStatus=="succès"){ //succès
//code
$(data).appendTo("#msg")
}
},
"html")//type
}) De plus, lorsque la méthode load() est passée avec des paramètres, la méthode POST sera utilisée pour envoyer la requête. Par conséquent, vous pouvez également utiliser la méthode load() pour compléter la même fonction. Le code est le suivant :
$("#btn2").click(function(){.
$("#msg").load("test.php", {
"nom d'utilisateur":$("#nom").val(),
"content":$("#content2").val()
});
}) 4.
(
)
Parfois, il est totalement inutile d'obtenir tous les fichiers JavaScript nécessaires lors du premier chargement de la page. Bien que vous puissiez créer dynamiquement
$(document.createElement("script")).attr("src", "test.js").appendTo("head");
//Ou $("<script type='text/javascript' src='test.js' />").appendTo("head"); Mais cette méthode n'est pas idéale. jQuery fournit la méthode $.getScript() pour charger directement les fichiers js, ce qui est aussi simple et pratique que le chargement d'un fragment HTML, et ne nécessite pas de traitement de fichiers JavaScript, car les fichiers JavaScript seront exécutés automatiquement.
Structure
$.getScript(url, fn); //url : adresse de requête //fn : application de fonction de rappel
<br/> Créez un fichier nowDate.js pour obtenir la date actuelle Le code est le suivant :
function getNowDate(){.
var date = nouvelle date
date de retour ;
} Lorsque l'on clique sur le bouton "Obtenir l'heure actuelle", l'heure et la date les plus récentes sont affichées. Le code est le suivant :
//Code HTML <!-- Méthode $.getScript() -->.
<button id="btn3">Cliquez pour obtenir l'heure</button>
<div id="message1"></div>
//Code jQuery// Méthode $.getScript() $("#btn3").click(function(){
$.getScript("nowDate.js", fonction(){
var date1 = getNowDate(); //Appelez la méthode getNowDate() dans nowDate.js pour obtenir la date var txtHtml= "<div>"+ date1 + "</div>";
$("#message1").html(txtHtml);
})
}) Avant de charger
les résultats en cours d'exécution
:
Après chargement :
2) Méthode $.getJSON()
.getScript().
Structure
$.getJSON(url,fn); //url : adresse de requête //fn :
l'application
de fonction de rappelcrée un nouveau fichier test.json, le code est le suivant :
{
"Hélène":{
"sexe": "femme",
"âge":18,
"poids": "50kg",
"hauteur": "165 cm"
},
"Pierre":{
"sexe": "homme",
"âge":28,
"poids": "65kg",
"hauteur": "185 cm"
}
} Créez un nouveau fichier HTML avec le code suivant :
<!-- Méthode $.getJSON() --> <button id="btn4">Cliquez pour charger le fichier JSON</button> <div id="message2"></div>
Lorsque vous cliquez sur le bouton de chargement, aucun effet n'est visible sur la page. Vous pouvez le visualiser sur la console Le code est le suivant :
// Méthode $.getJSON(). $("#btn4") .click(function(){
$.getJSON("test.json", fonction(données){
console.log(data); //La console affiche les données renvoyées})
}) La sortie de la console est comme indiqué dans la figure :
Bien que la fonction ci-dessus charge le fichier JSON (test.json), elle n'indique pas à JavaScript comment traiter les données renvoyées, nous pouvons donc traiter les données renvoyées dans la fonction de rappel.
Habituellement, nous devons parcourir les données que nous obtenons. Bien que nous puissions utiliser la boucle for traditionnelle ici, nous pouvons également les transmettre.
La fonction .each() prend un tableau ou un objet comme premier paramètre et une fonction de rappel comme deuxième paramètre. La fonction de rappel a deux paramètres, le premier. est le membre de l'objet ou l'indice du tableau, le deuxième bit correspond à la variable ou au contenu, le code est le suivant :
// Méthode $.getJSON() $("#btn4").click(function() {
$.getJSON("test.json", fonction(données){
console.log(data); //La console génère les données renvoyées //Traite les données renvoyées var txtHtml = "";
$.each(données, fonction(index, élément){
txtHtml += "<div><h4>"
+ index + ":</h4><ul><li>sexe :"
+ élément["sexe"] + "</li><li>âge："
+ article["âge"] + "</li><li>poids :"
+ article["poids"] + "</li><li>hauteur :"
+ élément["hauteur"] + "</li></div>";
})
$("#message2").html(txtHtml);
})
}) L'effet est comme indiqué sur la figure :
avant le chargement :
Après chargement :
[Apprentissage recommandé : didacticiel vidéo jQuery, vidéo frontale Web]
Ce qui précède vise à parler d'Ajax dans jQuery et à expliquer les détails de ses principales méthodes. Pour en savoir plus, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !
