Tutoriel jquery (partie 5): ajax tous!

Comme nous approchons de la fin de notre série mini-tutoriel jQuery, il est temps que nous avons pris un examen plus approfondi à l`une des fonctionnalités les plus utilisées de jQuery. AJAX permet un site Web pour communiquer avec un serveur en arrière-plan, sans exiger la page entière pour recharger. Des flux de style statut Facebook infini de soumettre des données de formulaire, il y a un million de différentes situations de la vie réelle dans laquelle cette technique peut être utile.

Si vous avez lu les précédents tutoriels, je vous suggère de le faire avant d`aborder cela comme ils construisent les uns aux autres.

• Introduction: Qu`est-ce que est jQuery et pourquoi devriez-vous prendre soin?
• 1: sélecteurs et les bases
• 2: Méthodes
• 3: En attente de chargement de la page et des fonctions anonymes
• 4: Evénements
• Débogage avec Chrome Developer Tools

Un quoi?

AJAX est un acronyme pour Asynchronous javascript et XML, mais le mot-clé est ici asynchrone. Terme se rapporte au fait que ces demandes se produisent en arrière-plan, ne pas interrompre l`expérience de navigation de l`utilisateur. Vous avez probablement jamais remarqué avant, mais si un site Web est elle-même mise à jour de façon dynamique, il y a une bonne chance qu`il utilise AJAX pour le faire.

Avant AJAX, toute forme d`interaction avec un serveur, que ce soit aller chercher de nouvelles données ou diffuser des informations de retour de l`utilisateur, aurait avoir été fait à l`aide d`une nouvelle charge de page et redirections.

Aujourd`hui, nous allons regarder en utilisant un service tiers, Flickr - dont nous pouvons utiliser AJAX pour chercher des images en utilisant un type de données JSON. Il n`a pas vraiment comment Flickr implémente le côté réception des choses, parce que c`est la beauté de Apis - tout ce que nous devons savoir est une URL API, quel genre de données que nous allons revenir, et comment le manipuler.

Video: jQuery Tutorial #1 - jQuery Tutorial for Beginners

Pour en savoir plus, je l`ai écrit un autre tutoriel il y a un certain temps au sujet la manipulation AJAX dans WordPress pour une soumission de formulaire de contact, de sorte que vous pouvez vérifier cela aussi- il consiste à écrire votre propre gestionnaire de PHP, et de l`intégrer dans le processus WordPress AJAX « officiel ».Un tutoriel sur l`utilisation d`AJAX dans WordPressUn tutoriel sur l`utilisation d`AJAX dans WordPressAJAX est une technologie web remarquable qui nous déplacé au-delà de la simple « cliquez sur le lien, aller vers une autre page » structure de l`Internet 1.0. Il permet aux sites Web de façon dynamique et contenu aller chercher d`affichage sans que l`utilisateur ...Lire la suite

La méthode AJAX

Voici le format de base d`une requête AJAX:

Video: jQuery Tutorial - 101 - AJAX Load

$.ajax({type: "GET ou POST",url: "API ou l`URL de votre gestionnaire de PHP ",Type de données:"JSON",// selon le type de données que vous voulez revenir, mais JSON est le plus commun Les données: { // un ensemble de clé:"valeur" paires }, Succès:fonction(Les données){ // gérer un retour réussi des données}, Erreur:fonction(message){ // gérer l`erreur}}) -

Cela semble assez complexe au premier abord - pas aidé par l`absence de retrait de ce plug-in de code - mais vous verrez combien il est facile quand obtenir un exemple du monde réel.

Flickr API AJAX

Dans cet exemple, nous allons saisir les balises associées au poste de WordPress en cours et chercher des images à ajouter à la fin de l`article. Il y a un exemple similaire dans la documentation jQuery, mais il utilise une méthode de raccourci appelé getJSON () plutôt que d`expliquer un format complet AJAX. Bien que ce soit un moyen valable de faire les choses si vous savez que vous allez seulement pour obtenir des données JSON retour, je sens que l`apprentissage de la méthode AJAX réelle est plus important, donc voilà comment nous le ferons.

Tout d`abord, l`un des single.php et nous allons essayer de faire écho à une liste séparée par des virgules simple, des balises de poste en cours. En règle générale, vous pouvez utiliser the_tags () de le faire, mais ce n`est pas bon que nous voulons éventuellement stocker ceux-ci comme une variable, tandis que the_tags () les échos tout droit préformaté. Au lieu de cela, nous allons utiliser get_the_tags ():

lt;? phptagslist de $ = get_the_tags()-pour chaque(tagslist de $ comme $ tag){écho $ tag-gt;prénom.","-}?gt;

Cela fonctionne bien, nous allons donc sortie cette intérieur d`une requête AJAX à l`URL de l`API Flickr comme suit (note, ceci est une capture d`écran - afin de préserver l`indentation, le code est disponible à ce pastebin).

À ce stade, tout ce qu`il fait à la sortie de la console du navigateur, ou une alerte d`un message d`erreur s`il y a un. Pour ce faire, en fait quelque chose avec les données renvoyées, ajouter quelque part pour les images à placer:

lt;div ça="flickr"gt;divgt;

Et modifier la Succès paramètre de l`appel AJAX à itérer sur la articles qui sont retournés.

$.chaque(Les données.articles, fonction(je,article){si(je==3) revenir faux- // arrêt quand nous avons 3$("#flickr").ajouter("+article.lien+"">