Le jQuery ajax ()
function est le niveau d'abstraction le plus bas disponible pour XMLHttpRequests (ou AJAX). Toutes les autres fonctions jQuery AJAX, telles que charge()
, tirer parti de la ajax ()
une fonction. En utilisant le ajax ()
fonction fournit la plus grande fonctionnalité disponible pour XMLHttpRequests
. jQuery fournit également d’autres abstractions de niveau supérieur permettant de réaliser des types de XMLHttpRequests
. Ces fonctions sont essentiellement des raccourcis pour la ajax ()
méthode.
Ces méthodes de raccourci sont les suivantes:
charge()
obtenir()
getJSON ()
getScript ()
poster()
Le point à retenir est que, bien que les raccourcis soient parfois agréables, ils utilisent tous ajax ()
Dans les coulisses. Et, lorsque vous souhaitez bénéficier de toutes les fonctionnalités et personnalisations offertes par jQuery en ce qui concerne AJAX, vous devez simplement utiliser la ajax ()
méthode.
Remarques: Par défaut, le ajax ()
et charge()
Les fonctions AJAX utilisent toutes les OBTENIR
Protocole HTTP.
JSON avec rembourrage (JSONP) est une technique qui permet à l'expéditeur d'une requête HTTP, où JSON est renvoyé, de donner un nom à une fonction appelée avec l'objet JSON en tant que paramètre de la fonction. Cette technique n'utilise pas XHR. Il utilise l'élément script pour que les données puissent être extraites sur n'importe quel site, à partir de n'importe quel site. Le but est de contourner les limitations de politique de même source de XMLHttpRequest.
En utilisant le getJSON ()
fonction jQuery, vous pouvez charger des données JSON à partir d'un autre domaine lorsqu'une fonction de rappel JSONP est ajoutée à l'URL. À titre d'exemple, voici à quoi ressemblerait une demande d'URL utilisant l'API Flickr.
http://api.flickr.com/services/feeds/photos_public.gne?tags=resig&tagmode=all&format=json&jsoncallback
=?
le ?
La valeur est utilisée comme raccourci qui indique à jQuery d’appeler la fonction transmise en tant que paramètre de getJSON ()
une fonction. Vous pourriez remplacer le ?
avec le nom d'une autre fonction si vous ne souhaitez pas utiliser ce raccourci.
Ci-dessous, je tire dans une page Web, à l'aide de l'API Flickr JSONP, les photos les plus récentes marquées "resig". Notez que j'utilise le ?
raccourci si jQuery appellera simplement la fonction de rappel que j'ai fournie la getJSON ()
une fonction. Le paramètre transmis à la fonction de rappel est les données JSON demandées..
Remarques: Assurez-vous de vérifier l'API du service que vous utilisez pour utiliser correctement le rappel. Par exemple, Flickr utilise le nom jsoncallback =?
alors que Yahoo! et Digg utilise le nom rappel =?
.
Lors de l'exécution d'une demande XHR, Internet Explorer mettra la réponse en cache. Si la réponse contient un contenu statique avec une longue durée de vie, la mise en cache peut être une bonne chose. Toutefois, si le contenu demandé est dynamique et peut être modifié à la seconde, vous devez vous assurer que la demande n'est pas mise en cache par le navigateur. Une solution possible consiste à ajouter une valeur de chaîne de requête unique à la fin de l'URL. Cela garantira que pour chaque demande, le navigateur demande une URL unique..
// Ajoute une chaîne de requête unique à la fin de l'URL URL: 'some? Nocache =' + (newDate ()). GetTime ()
Une autre solution, plus globale, consiste à configurer toutes les demandes AJAX par défaut pour qu'elles contiennent la logique sans cache que nous venons de décrire. Pour ce faire, utilisez le ajaxSetup
fonction pour désactiver globalement la mise en cache.
$ .ajaxSetup (cache: false // True par défaut. False signifie que la mise en cache est désactivée.);
Maintenant, pour écraser ce paramètre global avec des requêtes XHR individuelles, il vous suffit de changer l’option de cache lors de l’utilisation de ajax ()
une fonction. Vous trouverez ci-dessous un exemple codé de requête XHR utilisant le ajax ()
fonction, qui écrasera le paramètre global et mettra en cache la demande.
$ .ajaxSetup (cache: false // True par défaut. False signifie que la mise en cache est désactivée.); jQuery.ajax (cache: true, url: 'certains', tapez: 'POST');