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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Libérer: 2016-05-16 15:45:14
original
1109 Les gens l'ont consulté

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 的

Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal