Il s'agit de la sérialisation. C'est logique, lorsque l'appel AJAX aura réussi, cette fonction est automatiquement appelée ; c'est elle que l'on utilise pour mettre à jour notre page ! Pour obtenir une page web, un client demande donc à un serveur une page web. Vous utilisez un navigateur obsolète, veuillez le mettre à jour. C'est totalement possible... et c'est même très répandu. Le serveur fouille dans son disque dur à la recherche de la page index.html. Nous allons ici commencer à taper un peu de code ! Nous avons pris tout à l'heure comme exemple un fil de commentaire qui se rechargerait en AJAX dès que l'on cliquerait sur un bouton « plus de commentaires ». Pour notre part, nous vous conseillons vraiment d'utiliser les deux raccourcis pour gérer vos appels AJAX dans votre projet. Un raccourci très sympathique peut être exploité lorsque vous gérez un appel AJAX de type POST impliquant l'utilisation d'un formulaire. De là, vous êtes libre d'ajouter tous les effets que vous souhaitez afin de rendre la chose un peu plus animée ! Les arguments qu'elle prend sont identiques à ceux de sa soeur : Avec POST, il devient obligatoire d'envoyer des variables, c'est la raison d'être même de ce type. Ce chapitre est charnière, assurez-vous de l'avoir compris et s'il le faut, lisez et relisez ces lignes.$.post()et$.get()sont à la base des appels AJAX en jQuery, si vous ne l'avez pas compris vous n'irez nulle part. Vous savez sûrement comment fonctionne le web : c'est un ensemble d'ordinateurs comme le vôtre fonctionnant en réseau. Nous n'étudierons pas ces codes PHP, mais nous vous demandons de nous faire confiance : ils existent, et ils fonctionnent. Les visiteurs d'un site web sont des clients. Si vous avez assimilé cette idée de dialogue entre client et serveur, c'est tout bon. AJAX repose sur ce fondement même, la communication asynchrone d'un langage côté client, avec un langage côté serveur. C'est pareil ! Cela vous aidera sans aucun doute. Beaucoup de choses peuvent vous sembler confuses, tout cela se mettra doucement en place lorsque nous parlerons des évènements AJAX. Maintenant, ce que nous voulons, c'est que les visiteurs puissent commenter notre article et mettre à jour le fil de commentaire sans que la page soit rechargée entièrement. Un peu de code pour vous montrer ça. Notez à ce sujet que le type GET est le type que jQuery prend par défaut. Après avoir fait son boulot, le serveur nous renvoie quelque chose. JavaScript a la particularité d'intégrer en natif une classe appelée XmlHttpRequest (XHR) : vous n'avez rien à télécharger, XmlHttpRequest fait partie intégrante de JavaScript. Si l'appel AJAX a rencontré une erreur, on va avoir de quoi gérer l'erreur de la même manière qu'avecsuccess. Bien sûr, ce code se veut le plus simple et le plus basique possible ; vous pouvez coupler cette fonction avec tous les évènements, effets ou autre que vous voulez. Instancier un objet XmlHttpRequest devient extrêmement simple, cela va être rendu possible par la fonctionjQuery.ajax()ou$.ajax(). Néanmoins on utilise généralement un autre format, le JSON qui est plus simple à traiter et plus léger. Lorsque vous envoyez une requête HTTP, vous demandez quelque chose au serveur. Ce résultat, c'est ce que jQuery utilisera pour mettra à jour la page ! Le boulot de jQuery ? Le protocole utilisé sur le World Wide Web est le protocole HTTP. Dans notre cas de figure, il s'agit simplement du script côté serveur qui va aller chercher les commentaires dans la base de données et nous les retourner. Néanmoins, nous allons voir maintenant comment gérer une requête de type POST. Vous allez nous trouver lourds, mais vraiment, il est plus que recommandé de vous mettre à niveau en PHP si vous ne connaissez pas ce langage. C'est en fait une exception, vous pouvez ici placer une chaîne de caractère à afficher à votre visiteur si l'appel AJAX n'a pas fonctionné. Pour une simple et bonne raison : c'est juste plus simple à taper, à comprendre, et à réécrire. Nous espérons que vous devinez qu'il nous reste quand même deux ou trois choses à régler, sinon, relisez les deux premières parties de ce chapitre ! Pour cela, il faut ajouter un petit quelque chose dans lesuccess, mais vous devriez savoir le faire tout seul. Le serveur cherche dans son disque dur à la recherche de la page demandée, et il la renvoie au client. Notez qu'à partir de maintenant, nous allons devoir travailler plus souvent avec un langage côté serveur. Cet objet XmlHttpRequest va plus loin que ça, car il vous permet vraiment de gérer beaucoup d'aspects de votre requête HTTP, et nous allons décortiquer ça ensemble dans la suite de ce tutoriel. Le paramètre qui va être employé ici seraerror. On voit de plus en plus d'applications réalisées complètement grâce à AJAX, citons Google Maps pour l'exemple ! Vous devriez donc comprendre que jQuery est aussi capable d'interagir avec ce qu'il se passe côté serveur ! ;). Pour le reste, la fonction fonctionne vraiment de la même manière que$.get(). C'est plutôt simple. Veuillez utiliser un navigateur internet moderne avec JavaScript activé pour naviguer sur OpenClassrooms.com. Le navigateur web du client lit ensuite le code HTML et interprète le code JavaScript que le serveur lui a renvoyé, et il affiche la page au visiteur. Vous souhaitez envoyer les variables issues d'un formulaire HTML à un script PHP en AJAX : c'est l'exemple typique de l'utilisation de la fonction$.ajax(). Pour nous donner un petit exemple dans cette petite partie sur les requêtes POST, nous vous demandons d'oublier cinq minutes l'histoire du fil de commentaire. On vient de gagner un temps fou, pas vrai ? Voilà comment ça tourne. Voilà ce dont on va avoir besoin : Un langage côté client : nous utiliserons bien sûr JavaScript, avec jQuery. Des fichiers JavaScript y sont rattachés. Si vous savez déjà ce qu'est HTTP, vous pouvez passer directement à la troisième partie de ce chapitre. Nous allons devoir spécifier le type de la requête. La "demande" que le client fait est ce que l'on appelle une « requête HTTP » ; ce que le serveur répond, c'est la « réponse HTTP ». Comment diable cela se met-il en place dans le code ? ^^. L'un d'eux est le type GET. Voilà ce que pourrait être un échange entre un client et un serveur. Vous pourrez aussi suivre votre avancement dans le cours, faire les exercices et discuter avec les autres membres. Devons-nous envoyer une requête de type POST ou GET ? Comme à son habitude : jQuery va nous simplifier la tâche. Les navigateurs Internet Explorer antérieurs à la version 7 utilisaient une implémentation différente de XHR : ActiveX, développé par Microsoft. Nous n'avons plus qu'à l'ajouter au DOM avec jQuery... et avec une petite animation au passage. Nous allons vouloir y ajouter les commentaires reçus. Ces raccourcis sont les fonctions$.get()et$.post(). Oh que oui. Voici un code en JavaScript pur instanciant un objet XHR couvrant les navigateurs utilisant ActiveX et XHR. Un problème va se poser lorsque vous devrez spécifier vos variables et leurs contenus : vous devrez concaténer dans une chaîne de caractères toutes ces variables, exactement comme on l'a vu... Cela fonctionne, mais ce n'est franchement pas facile à taper. Vous savez lancer des requêtes HTTP vers des scripts distants, c'est bien. Utiliser le type POST est ici complètement insensé, étant donné que nous ne souhaitons pas envoyer d'informations au serveur (nous ne postons pas un formulaire par exemple). Vous commencez à être habitué, n'est-ce pas ? shubs-subdomains.txt - Free ebook download as Text File (.txt), PDF File (.pdf) or read book online for free. Vous pouvez continuer la lecture de nos cours en devenant un membre de la communauté d'OpenClassrooms. En anglais, GET signifie « obtenir ». Ici nous voulons taper plus loin : appeler des scripts PHP et interagir avec notre serveur directement depuis jQuery. Néanmoins, ces connaissances sont très largement suffisantes pour mettre en place votre premier appel AJAX. C'est le cas du Site du Zéro qui utilise quelques serveurs, ou encore le cas de Google, qui en utilise plusieurs millions. Vous commencez à comprendre ? AJAX (Asynchronous JavaScript and XML) n'est pas une technologie, c'est le résultat d'un ensemble de technologies du web qui fonctionnent ensemble pour arriver à un objectif simple : rafraîchir une partie de page web sans recharger la page complète. Il a la particularité d'expliquer AJAX sans l'utilisation de frameworks. Nous n'avons fait qu'instancier un objet XHR, mais nous n'exploitons encore pas sa puissance. ;), C'est forcément un peu déroutant au début, mais comprenez bien que si vous voyez$.ajax()quelque part, c'est qu'un objet XmlHttpRequest est instancié. Nous évoquerons des scripts PHP appelésmore_come.phpetsend_mail.phpici. Nous pouvons potentiellement tout faire... car toute la puissance de PHP est à notre disposition. Vous l'utiliserez lors de vos rappels AJAX lorsque vous souhaiterez obtenir des données. On a voulu simplifier la vie aux développeurs en leur permettant de créer directement une requête GET ou POST. :). JavaScript est donc suffisamment puissant et évolué pour nous permettre d'envoyer des requêtes HTTP. XHR permet d'envoyer des requêtes HTTP depuis JavaScript, cette classe est donc à la base des appels AJAX. Le concept d'AJAX existe depuis bien avant XHR : il a été néanmoins grandement popularisé par l'apparition de cette classe. Nous écoutons l'évènement clic sur le bouton d'envoi. Votre requête HTTP est donc prête, et pour peu que votre script côté serveur soit présent et fonctionnel, elle a toutes les chances de marcher. En instanciant un objet à partir de cette classe, vous pouvez envoyer une requête HTTP vers le serveur grâce à cet objet XHR : c'est comme ça que cela marche ! Et hop, XmlHttpRequest est instancié. L'appel AJAX est ici dédié à la récupération de données, nous ne faisons qu'obtenir les commentaires. C'est plutôt logique non ? XmlHttpRequest devient nettement plus facile à instancier avec jQuery. C'est propre et ça marche. Le paramètre va prendre deux arguments, l'objet resultat dont nous avons parler plus haut ainsi qu'un statut. Cette dernière prend un argument : il est automatiquement créé par$.get()et il contient les données reçues du serveur. Vous devinez la suite, pour mettre en place un appel AJAX sur son site, jQuery ne va plus nous suffir. La fonction$.ajax()de jQuery nous permet d'instancier un objet très rapidement à partir de cette classe, autant dire que cette partie du tutoriel est là pour vous permettre de maîtriser cette fonction ! Nous en avons fini avec les requêtes de type GET ! Voilà ce dont on va avoir besoin : Un langage côté client : nous utiliserons bien sûr JavaScript, avec jQuery. Nous n'avons qu'à le passer en argument de notre fonction de retour, et cela fonctionne ! $.ajax() et ses paramètres . Nous avons parlé d'un fil de commentaire qui se recharge en AJAX plus haut, et nous avons même évoqué l'idée d'une base de données. La solution à ce problème, c'est la sérialisation du formulaire. C'est comme ça que le fil de commentaire de Facebook fonctionne. Lisez ce tutoriel de M@teo21 pour installer les programmes nécessaires afin obtenir un serveur en local sous Windows, Mac et Linux. Une dernière chose notable : la fonction de retour. Imaginons que ce bouton existe dans le DOM, et qu'il dispose de l'identifiant#more_com. C'est très simple, l'argumentdatarevient ici. Oui, à ceci près que nous faisons cette fois-ci réellement passer des variables. Nous allons vous montrer un code mettant en application la fonction$.get(). Et niveau compatibilité, vous êtes SÛR que c'est vraiment au point ? Le paramètre s'appellesuccess, et il ne sera exécuté QUE si l'appel AJAX a abouti. Et l'objet XmlHttpRequest, il est quand même instancié ? Il vous faudra comprendre son rôle, en particulier dans la définition de vos objectifs et de votre stratégie de développement d’entreprise. Tout passe par la fonction$.ajax()et ses paramètres, seulement il existe deux raccourcis bien utiles que nous allons voir ici. C'est gratuit ! Les arguments demandés sont les mêmes : L'argument marqué d'une astérisque désigne les données envoyées. Voici 16 lignes de code, utilisées uniquement pour régler un problème de compatibilité entre les navigateurs... si on demandait à jQuery de faire ça à notre place, ce serait mieux non ? Nous parlons depuis tout à l'heure d'un fil de commentaire qui se recharge en AJAX, mais c'est loin d'être la seule utilisation possible d'AJAX. Alors lisez la suite de ce chapitre. Certaines expressions comme "requête HTTP" vous semblent peut-être obscures, mais ne vous en faites pas, on est là pour apprendre tout ça ensemble. Commençons à penser à un système en AJAX, pour vous donner une meilleure idée de ce dont il s'agit. Veuillez utiliser un navigateur internet moderne avec JavaScript activé pour naviguer sur OpenClassrooms.com. Ce cours est visible gratuitement en ligne. Si vous utilisez un navigateur qui date de Mathusalem et qui ne supporte pas du tout AJAX, ne vous attendez pas à ce qu'un objet soit instancié. Vous devinez la suite, pour mettre en place un appel AJAX sur son site, jQuery ne va plus nous suffir. Autrement dit, nous n'avons encore rien fait ! C'est de simplifier énormément l'appel et le suivi de cette requête HTTP, et, en prime, de faciliter énormément le traitement du retour que fait PHP. Si vous êtes amené à utiliser AJAX avec du JavaScript "nu", ou tout simplement que vous préférez tout faire par vous-même, nous pouvons vous conseiller le tutoriel AJAX. Voyons voir comment on va pouvoir s'y prendre, toujours à l'aide de jQuery et de cette fameuse fonction$.ajax(). Vous ne savez pas vraiment ce qu'est HTTP ? Avec un peu de concaténation, on s'en sort très bien. C'est du classique, la seule différence par rapport à tout à l'heure est la rapidité d'écriture de l'appel AJAX. Si les scriptsmore_come.phpousend_mail.phpfonctionnent aussi, ils réalisent leur boulot côté serveur, avant de nous envoyer une réponse. Vous n'avez pas besoin de le spécifier lorsque vous voulez faire une requête de type GET. Nous devons spécifier maintenant le type de données que nous allons recevoir de PHP. Pour spécifier quelle est la ressource ciblée (notre script PHP) nous allons devoir utiliser le paramètreurlde$.ajax(). Avec cette fonction, jQuery fait tout implicitement. C'est gratuit ! Ce paramètre prend en charge une fonction qui sera exécutée. AJAX repose sur ce fondement même, la communication asynchrone d'un langage côté client, avec un langage côté serveur. jQuery nous simplifie encore la vie, même à tel point que réaliser un appel AJAX grâce à jQuery est presque une promenade de santé. La fonction$.ajax()va être incontournable pour nos appels AJAX en jQuery, nous l'employons pour envoyer une requête HTTP. Ce sont des notions de programmation orientée objet, et si vous n'êtes pas très à l'aise avec ces notions, ce qui est loin d'être dramatique ceci dit, vous pouvez toujours relire ce chapitre du cours JavaScript pour vous remettre dans le bain. Nous considérons ici que le fichier PHP exécuté côté serveur s'appellemore_com.php. Avant de commencer à taper du code, nous estimons bon de rappeler ce qu'est une requête HTTP et de quoi est-elle constituée, ce serait quand même dommage d'essayer d'envoyer quelque chose en JavaScript, alors que nous ne savons même pas ce qu'est ce "quelque chose" ! Les serveurs sont des ordinateurs sur lesquels se trouvent les sites web, ils sont généralement très très puissants et fonctionnent en permanence. Ce code est repris du tutoriel AJAX et l'échange de données en JavaScript du Site du Zéro. Généralement les caractères ?, = et & y sont présents. Si votre requête est de type GET, rien ne vous empêche de faire passer des paramètres avec GET pour les utiliser côté serveur dans l'array$_GET. Nous allons désormais avoir très souvent recours à cette fonction, alors commençons par voir ce qu'elle a dans le ventre. Vous pouvez désormais procéder à l'envoie d'une requête HTTP grâce à cet objet. On utilisera donc JSON ici, comme un peu tout le monde. N'oubliez pas la devise de jQuery : écrivez moins, faites plus ! Les paramètrescomplete,successeterrorvont nous être très utiles ! Asynchronous JavaScript and XML. Vous qui êtes développeur JavaScript, vous savez très certainement qu'utiliser AJAX sur son site peut rapidement devenir une galère sans nom. ^^. Un autre exemple ? La preuve est que la réponse HTTP est bien renvoyée. jQuery reste fidèle à lui-même : ce code fonctionne sur tous les navigateurs qui supportent XmlHttpRequest et ActiveX de Microsoft ! Voilà comment nous devons procéder pour automatiser cela : Et voilà ! Le visiteur tape un message dans un formulaire HTML, et ce message vous est envoyé par email en AJAX. Si vous êtes fan des réseaux sociaux, comme Facebook, vous avez forcément été confronté à l'un de ces fils de commentaire dans votre vie de geek. Il y a quand même un tout petit soucis ici : c'est vraiment long à taper, et nous vous le disions, pas pratique du tout. Nous avons une bonne nouvelle pour vous, votre requête HTTP fonctionne ! Si des fichiers JavaScript sont rattachés à cette page, le serveur les fait parvenir aussi au client. Très heureux de voir que nos cours vous plaisent, déjà 5 pages lues aujourd'hui ! C'est à l'intérieur de ces fonctions que nous allons devoir traiter la suite des évènements : nous voulons maintenant ajouter les commentaires reçus du serveur à notre fil de commentaires sur notre page. Lorsque cet évènement est réalisé, nous envoyons une requête HTTP en POST vers un script PHP depuis jQuery. Un langage côté serveur : nous utiliserons ici le PHP. Nous poursuivrons ici avec l'exemple du fil de commentaire rechargé par un bouton évoqué dans le chapitre précédent. Néanmoins, pour que le web fonctionne, il faut que le client et le serveur parlent la même langue (on parle en fait de « protocole » plutôt que de « langue »). Le but du jeu est donc qu'au moment de la soumissions du formulaire, une logique se mette en route côté jQuery, qui fera que le commentaire sera ajouté en base de données, et qu'il soit automatiquement ajouté au fil, le tout sans recharger la page ! Pour tirer pleinement profit de la puissance de $.ajax(), voyons comment l'on va pouvoir exploiter ses paramètres, qui sont, pour certains, vitaux pour l'envoi de votre requête HTTP. Django est un cadre de développement web open source en Python.Il a pour but de rendre le développement web 2.0 simple et rapide. Pour aborder la question d'un point de vue sensiblement plus technique : nous devons vous avouer que la base de chaque appel AJAX est une requête HTTP. Ces variables contiennent les informations du formulaire, et PHP en a besoin pour agir côté serveur. Et voilà ! On utilisera en principe JSON dans nos projets, mais nous allons utiliser ici du HTML afin de vous montrer que c'est tout à fait utilisable. En jouant avec des conditions, on arrive très bien à instancier un objet de type XHR pour chaque navigateur, c'est pas super pratique, mais on y arrive. Manque de bol, nous n'avons rien pour gérer le retour de$.ajax(). Vous pouvez utiliser ça sans problème sur votre site. C'est même courant, connaissez-vous les URL contenant des variables ? Un grand nombre de types de requêtes HTTP existent, mais ils ne nous seront pas nécessaires pour traiter nos appels AJAX. XML se situe en fait au niveau du retour que PHP fait et que jQuery intercepte. Cela passe ici par le paramètretype. Dès qu'elle est appelée, un objet de type XHR est créé ;$.get()et$.post()font toutes les deux appel à cette fonction, l'objet est donc bel et bien instancié. De là, nous pouvons imaginer tout type de traitement possible pour nos données. Nous allons désormais avoir très souvent recours à cette fonction, alors commençons par voir ce qu'elle a dans le ventre.
Julien Bert Soeur, Estimation Prix Terrain, Chemise Coton Homme Manche Longuesandrine Bonnaire, Aesculap Wikipedia, Benchmark : Définition,
Commentaires récents