Ajax se classe assez haut sur les principales raisons d'utiliser jQuery. Non seulement jQuery résout les problèmes entre navigateurs, mais il rend la syntaxe très facile à utiliser et à comprendre.
Dans cette vidéo, nous essayons d'expliquer ce qu'est l'Ajax. Nous examinons un élément de formulaire qui, une fois soumis, envoie une requête GET ou POST (comme déterminé par l'attribut method) à l'URL que vous spécifiez (comme déterminé par l'attribut action). C'est juste du HTML, pas de code backend ou de JavaScript. Mais cette soumission va faire changer la page, se recharger littéralement à la nouvelle URL, tout comme en cliquant sur un lien.
Ajax nous permet de faire cette requête GET ou POST en arrière-plan, sans recharger la page. Au fond, c'est tout l'intérêt d'Ajax. Et c'est très puissant. C'est en grande partie responsable du pourquoi les sites Web modernes fonctionnent et se sentent comme ils le font.
Ajax avait l'habitude de «représenter» JavaScript et XML asynchrones, mais cela est largement ignoré de nos jours car cela ne signifie pas grand-chose. D'où aussi la décapitalisation. Vous pouvez également parfois voir «XHR» qui est l'abréviation de XMLHttpRequest, qui est la technologie de base native d'Ajax.
La différence entre GET et POST est essentiellement: GET est pour obtenir des informations et ne devrait pas être responsable de la modification des données et POST est spécifiquement pour la modification des données. N'hésitez pas à en savoir plus à ce sujet sur ce fil de discussion StackOverflow.
Faire une requête GET dans jQuery est incroyablement simple:
$.get( "URL", function(data) ( // do something with data )); ));L'URL est l'endroit d'où vous espérez obtenir les données. Le deuxième paramètre est la fonction de rappel qui s'exécute lorsque la requête Ajax a réussi. Le paramètre le plus important est le premier, data, qui contient les informations obtenues à partir de la requête.
Les requêtes Ajax peuvent parfois échouer. Une des raisons de cet échec pourrait être le navigateur lui-même et ses politiques de sécurité. Les navigateurs eux-mêmes contiennent des règles sur l'endroit où le contenu peut être demandé. Les demandes peuvent toujours être adressées au même domaine d'où provient la demande. Mais s'il y a un domaine différent impliqué, ce domaine différent devra spécifiquement l'autoriser.
Vous pouvez tout lire à ce sujet sur enable-cors.org. CORS signifie «Cross-Origin Resource Sharing». Nous regardons un exemple où CORS n'est pas activé et la requête Ajax échoue. Un moyen standard et simple de résoudre ce problème, en supposant que le serveur est Apache, consiste à définir un en-tête qui autorise spécifiquement CORS via le fichier .htaccess:
Header set Access-Control-Allow-Origin "*"Dans la vidéo, nous déplaçons simplement la requête Ajax vers CodePen, qui gère bien Ajax par défaut.
Fromage facile:
Voir le Pen fBInl de Chris Coyier (@chriscoyier) sur CodePen