Maison interface Web js tutoriel Explication détaillée de l'utilisation conjointe de jQuery, Ajax et JSONP dans JavaScript_jquery

Explication détaillée de l'utilisation conjointe de jQuery, Ajax et JSONP dans JavaScript_jquery

May 16, 2016 pm 03:45 PM
ajax jquery jsonp

Avec l'aide de XMLHttpRequest, le navigateur peut interagir avec le serveur sans actualiser la page entière. C'est ce qu'on appelle l'Ajax (JavaScript asynchrone et XML). Ajax peut offrir aux utilisateurs une expérience utilisateur plus riche.

Les requêtes Ajax sont pilotées par JavaScript. Une requête est envoyée à l'URL via du code JavaScript. Lorsque le serveur répond, une fonction de rappel sera déclenchée. Les informations renvoyées par le serveur peuvent être traitées dans la fonction de rappel. Étant donné que l'ensemble du processus d'envoi des demandes et des réponses est asynchrone, les autres codes Javascript de la page continueront à s'exécuter pendant cette période sans interruption.

jQuery fournit certainement un bon support pour Ajax, et il élimine également les différences douloureuses dans la prise en charge d'Ajax entre les différents navigateurs. Il fournit non seulement la méthode $.ajax() complète, mais également davantage de fonctions telles que $.get(), $.getScript(), $.getJSON(), $.post() et $().load. (), etc. Pour une méthode simple.

Bien qu'il s'appelle Ajax, de nombreuses applications Ajax n'utilisent pas XML, en particulier les applications jQuery Ajax. La plupart d'entre elles n'utilisent pas XML à la place, elles sont plus couramment utilisées : texte brut, HTML et JSON (JavaScript) Object Notation) ; .

Généralement, en raison des restrictions de la politique de même origine (même protocole, même nom de domaine, même port), Ajax ne peut pas effectuer de requêtes inter-domaines, à moins qu'une solution telle que JSONP (JSON with Padding) ne soit utilisée pour obtenir certaines requêtes concernées. Fonctionnalité inter-domaines limitée.
Quelques concepts importants sur l'Ajax

GET vs POST, ce sont les deux méthodes les plus couramment utilisées pour envoyer des requêtes au serveur. Une bonne compréhension des différences entre ces deux méthodes est très importante pour le développement Ajax.

La méthode GET est généralement utilisée pour effectuer certaines opérations non destructives (c'est-à-dire obtenir uniquement des informations du serveur sans modifier les informations sur le serveur). Par exemple, les services de requêtes de recherche utilisent généralement des requêtes GET. De plus, les requêtes GET peuvent également être mises en cache par le navigateur, ce qui peut entraîner des problèmes imprévisibles. Généralement, les requêtes GET ne peuvent envoyer des données au serveur que via des chaînes de requête.

La méthode POST est généralement utilisée pour effectuer certaines opérations destructrices sur le serveur (c'est-à-dire modifier les données sur le serveur). Par exemple, lorsque vous publiez un article de blog, vous devez utiliser une requête POST. Contrairement aux requêtes GET, les requêtes POST ne présentent pas de problèmes de mise en cache. Dans les requêtes POST, la chaîne de requête faisant partie de l'URL peut également soumettre des données au serveur, mais cette méthode n'est pas recommandée. Toutes les données doivent être envoyées séparément de l'URL.

Type de données, jQuery nécessite généralement de spécifier le type de données renvoyé par le serveur. Dans certains cas, le type de données peut déjà être inclus dans le nom de la méthode, comme $.getJSON(). available Partie de l'objet configuré qui sera éventuellement utilisée comme paramètre de la méthode $.ajax(). Les types de données incluent généralement les éléments suivants :

  • texte : texte brut, utilisé pour transmettre des chaînes simples.
  • html : utilisé pour transmettre un morceau de HTML.
  • script : Ajoutez un script à la page.
  • json : Transmettre un objet JSON formaté, qui peut contenir des chaînes, des tableaux ou des objets.
  • jsonp : utilisé pour transmettre les données JSON renvoyées par d'autres domaines.
  • xml : utilisé pour transmettre des données au format XML personnalisé.

Exécution asynchrone, le A en Ajax fait référence à asynchrone. À ce stade, il peut être difficile pour de nombreux débutants en jQuery de comprendre ce qu'est l'asynchrone, car les requêtes Ajax sont asynchrones par défaut et les informations renvoyées par le serveur ne sont pas immédiatement disponibles. Toutes les informations renvoyées par le serveur ne peuvent être traitées que dans une fonction de rappel. Par exemple, le code suivant est erroné :

var response;
$.get('foo.php', function(r) { response = r; });
console.log(response); // undefined!

Copier après la connexion

L'approche correcte doit être de traiter les données renvoyées par le serveur dans la fonction de rappel. La fonction de rappel n'est exécutée que lorsque la requête Ajax est terminée avec succès. Ce n'est qu'à ce moment que les données du serveur peuvent être obtenues : <🎜. >

$.get('foo.php', function(response) { console.log(response); });

Copier après la connexion

同源策略及 JSONP,前面已经说过,一般情况下 Ajax 的请求会被限制在相同协议(http 或 https)、相同端口、相同域名下才能正确执行,但是 HTML 的

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment utiliser la méthode de requête PUT dans jQuery ? Comment utiliser la méthode de requête PUT dans jQuery ? Feb 28, 2024 pm 03:12 PM

Comment utiliser la méthode de requête PUT dans jQuery ? Dans jQuery, la méthode d'envoi d'une requête PUT est similaire à l'envoi d'autres types de requêtes, mais vous devez faire attention à certains détails et paramètres. Les requêtes PUT sont généralement utilisées pour mettre à jour des ressources, comme la mise à jour de données dans une base de données ou la mise à jour de fichiers sur le serveur. Ce qui suit est un exemple de code spécifique utilisant la méthode de requête PUT dans jQuery. Tout d'abord, assurez-vous d'inclure le fichier de la bibliothèque jQuery, puis vous pourrez envoyer une requête PUT via : $.ajax({u

PHP et Ajax : créer un moteur de suggestions de saisie semi-automatique PHP et Ajax : créer un moteur de suggestions de saisie semi-automatique Jun 02, 2024 pm 08:39 PM

Créez un moteur de suggestions de saisie semi-automatique en utilisant PHP et Ajax : Script côté serveur : gère les requêtes Ajax et renvoie des suggestions (autocomplete.php). Script client : envoyer une requête Ajax et afficher des suggestions (autocomplete.js). Cas pratique : Incluez le script dans la page HTML et spécifiez l'identifiant de l'élément d'entrée de recherche.

Comment obtenir des variables de la méthode PHP en utilisant Ajax ? Comment obtenir des variables de la méthode PHP en utilisant Ajax ? Mar 09, 2024 pm 05:36 PM

L'utilisation d'Ajax pour obtenir des variables à partir de méthodes PHP est un scénario courant dans le développement Web. Grâce à Ajax, la page peut être obtenue dynamiquement sans actualiser les données. Dans cet article, nous présenterons comment utiliser Ajax pour obtenir des variables à partir de méthodes PHP et fournirons des exemples de code spécifiques. Tout d’abord, nous devons écrire un fichier PHP pour gérer la requête Ajax et renvoyer les variables requises. Voici un exemple de code pour un simple fichier PHP getData.php :

Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page Feb 28, 2024 pm 09:06 PM

Titre : jQuery Astuces : Modifier rapidement le texte de toutes les balises a de la page En développement web, nous avons souvent besoin de modifier et d'exploiter des éléments de la page. Lorsque vous utilisez jQuery, vous devez parfois modifier le contenu textuel de toutes les balises de la page en même temps, ce qui peut économiser du temps et de l'énergie. Ce qui suit explique comment utiliser jQuery pour modifier rapidement le texte de toutes les balises a de la page et donne des exemples de code spécifiques. Tout d'abord, nous devons introduire le fichier de la bibliothèque jQuery et nous assurer que le code suivant est introduit dans la page : &lt

Utilisez jQuery pour modifier le contenu textuel de toutes les balises Utilisez jQuery pour modifier le contenu textuel de toutes les balises Feb 28, 2024 pm 05:42 PM

Titre : utilisez jQuery pour modifier le contenu textuel de toutes les balises. jQuery est une bibliothèque JavaScript populaire largement utilisée pour gérer les opérations DOM. En développement web, nous rencontrons souvent le besoin de modifier le contenu textuel de la balise de lien (une balise) sur la page. Cet article expliquera comment utiliser jQuery pour atteindre cet objectif et fournira des exemples de code spécifiques. Tout d’abord, nous devons introduire la bibliothèque jQuery dans la page. Ajoutez le code suivant dans le fichier HTML :

PHP vs Ajax : solutions pour créer du contenu chargé dynamiquement PHP vs Ajax : solutions pour créer du contenu chargé dynamiquement Jun 06, 2024 pm 01:12 PM

Ajax (Asynchronous JavaScript et XML) permet d'ajouter du contenu dynamique sans recharger la page. En utilisant PHP et Ajax, vous pouvez charger dynamiquement une liste de produits : HTML crée une page avec un élément conteneur et la requête Ajax ajoute les données à l'élément après l'avoir chargé. JavaScript utilise Ajax pour envoyer une requête au serveur via XMLHttpRequest afin d'obtenir des données produit au format JSON à partir du serveur. PHP utilise MySQL pour interroger les données produit de la base de données et les encoder au format JSON. JavaScript analyse les données JSON et les affiche dans le conteneur de pages. Cliquer sur le bouton déclenche une requête Ajax pour charger la liste de produits.

Comprendre le rôle et les scénarios d'application de eq dans jQuery Comprendre le rôle et les scénarios d'application de eq dans jQuery Feb 28, 2024 pm 01:15 PM

jQuery est une bibliothèque JavaScript populaire largement utilisée pour gérer la manipulation DOM et la gestion des événements dans les pages Web. Dans jQuery, la méthode eq() est utilisée pour sélectionner des éléments à une position d'index spécifiée. Les scénarios d'utilisation et d'application spécifiques sont les suivants. Dans jQuery, la méthode eq() sélectionne l'élément à une position d'index spécifiée. Les positions d'index commencent à compter à partir de 0, c'est-à-dire que l'index du premier élément est 0, l'index du deuxième élément est 1, et ainsi de suite. La syntaxe de la méthode eq() est la suivante : $("s

Comment savoir si un élément jQuery possède un attribut spécifique ? Comment savoir si un élément jQuery possède un attribut spécifique ? Feb 29, 2024 am 09:03 AM

Comment savoir si un élément jQuery possède un attribut spécifique ? Lorsque vous utilisez jQuery pour exploiter des éléments DOM, vous rencontrez souvent des situations dans lesquelles vous devez déterminer si un élément possède un attribut spécifique. Dans ce cas, nous pouvons facilement implémenter cette fonction à l'aide des méthodes fournies par jQuery. Ce qui suit présentera deux méthodes couramment utilisées pour déterminer si un élément jQuery possède des attributs spécifiques et joindra des exemples de code spécifiques. Méthode 1 : utilisez la méthode attr() et l'opérateur typeof // pour déterminer si l'élément a un attribut spécifique

See all articles