Guide simplifié jQuery : Explorer jQuery et Ajax-WordPresse-php.cn

Guide simplifié jQuery : Explorer jQuery et Ajax

PHPz

Libérer： 2023-09-02 21:05:02

original

1310 Les gens l'ont consulté

jQuery 简化指南：探索 jQuery 和 Ajax

La fonction jQuery ajax() est le niveau d'abstraction le plus bas

jQuery ajax() 函数是可用于 XMLHttpRequest（又名 AJAX）的最低抽象级别。所有其他 jQuery AJAX 函数（例如 load()）都利用 ajax() 函数。使用 ajax() 函数为 XMLHttpRequests 提供了最强大的功能。 jQuery 还提供了其他更高级别的抽象来执行非常特定类型的 XMLHttpRequests。这些函数本质上是 ajax() Raccourcis pour les méthodes.

Ces raccourcis sont :

加载()
<code>get()
<code>getJSON()
<code>getScript()
<code>post()

Il est important de noter que même si les raccourcis sont parfois sympas, ils utilisent tous des méthodes ajax() 。而且，当您需要 jQuery 在 AJAX 方面提供的所有功能和自定义功能时，您应该使用 ajax() en coulisses.

Remarque : Par défaut, ajax() 和 load() AJAX 函数均使用 GET Protocole HTTP.

jQuery prend en charge JSONP inter-domaines

JSON with padding (JSONP) est une technologie qui permet à l'expéditeur d'une requête HTTP (qui renvoie JSON) de fournir un nom pour une fonction appelée avec un objet JSON comme argument de fonction. Cette technologie n'utilise pas XHR. Il utilise des éléments de script afin que les données puissent être extraites de n'importe quel site vers n'importe quel site. Le but est de contourner les restrictions de politique de même origine de XMLHttpRequest.

À l'aide des fonctions <code>getJSON() jQuery, vous pouvez charger des données JSON à partir d'un autre domaine lors de l'ajout d'une fonction de rappel JSONP à l'URL. À titre d'exemple, voici à quoi ressemble une demande d'URL utilisant l'API Flickr.

<span class="sgc-100">http://api.flickr.com/services/feeds/photos_public.gne?tags=resig&tagmode=all&format=json&jsoncallback</span>=? La valeur

? est utilisée comme raccourci pour indiquer à jQuery d'appeler la fonction passée en argument à la fonction ? 值用作快捷方式，告诉 jQuery 调用作为 <code>getJSON() 函数的参数传递的函数。如果您不想使用此快捷方式，可以将 ?. Si vous ne souhaitez pas utiliser ce raccourci, vous pouvez remplacer ? par le nom d'une autre fonction.

Ci-dessous, j'utilise l'API Flickr JSONP pour extraire une page Web contenant les dernières photos étiquetées "resig". Notez que j'utilise le raccourci ?, donc jQuery appellera simplement la fonction de rappel de la fonction ? 快捷方式，因此 jQuery 将简单地调用我提供的 <code>getJSON() que j'ai fournie. Le paramètre passé à la fonction de rappel est les données JSON demandées.

<!DOCTYPE html>
<html lang="en">
<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function($){      
      $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=resig&amp;tagmode=all&amp;format=json&amp;jsoncallback=?",
          // Using ? just means call the callback function provided
          function (data) { // Data is the JSON object from Flickr    
              $.each(data.items, function (i, item) { $('<img />').attr("src", item.media.m).appendTo('body'); if (i == 30) return false; });
          });
  })(jQuery); </script>
</body>
</html>

Copier après la connexion

Remarque : Veuillez vous assurer de vérifier l'API du service que vous utilisez afin d'utiliser correctement les rappels. Par exemple, Flickr utilise le nom jsoncallback=?，而 Yahoo!和 Digg 使用名称 callback=?.

Arrêtez la mise en cache des requêtes XHR du navigateur

Lors de l'exécution d'une requête XHR, Internet Explorer mettra en cache la réponse. La mise en cache peut être une bonne chose si la réponse contient du contenu statique avec une longue durée de conservation. Toutefois, si le contenu de la requête est dynamique et peut changer à tout moment, vous devrez vous assurer que le navigateur ne met pas en cache la requête. Une solution possible consiste à ajouter une valeur de chaîne de requête unique à la fin de l'URL. Cela garantira que le navigateur demande une URL unique pour chaque demande.

// Add unique query string at end of the URL
url: 'some?nocache='+(newDate()).getTime()

Copier après la connexion

Une autre solution (plus globale) consiste à définir par défaut toutes les requêtes AJAX pour inclure la logique sans cache dont nous venons de parler. Pour ce faire, utilisez la fonction ajaxSetup pour désactiver la mise en cache globalement.

$.ajaxSetup({
            cache: false // True by default. False means caching is off.
});

Copier après la connexion

Maintenant, afin de remplacer ce paramètre global par une requête XHR distincte, vous pouvez simplement suivre l'exemple de code qui exécute la requête XHR à l'aide de la fonction ajax() 函数时更改缓存选项即可。下面是使用 ajax(), qui remplacera le paramètre global et mettra en cache la requête.

$.ajaxSetup ({   
    cache: false // True by default. False means caching is off.   
});       
jQuery.ajax({ cache: true, url: 'some', type: 'POST' } );

Copier après la connexion

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!