Ce cours est visible gratuitement en ligne. Nous allons donc envoyer une requête de type GET. Les types GET et POST couvriront 99% de nos besoins. Nous allons devoir faire passer nos variables JavaScript à notre script PHP. 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. Commençons à penser à un système en AJAX, pour vous donner une meilleure idée de ce dont il s'agit. L'argument statut est une chaîne de caractère automatiquement générée par jQuery pour vous donner le statut de votre requête. 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. 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. Veuillez utiliser un navigateur internet moderne avec JavaScript activé pour naviguer sur OpenClassrooms.com. Vous pouvez utiliser ça sans problème sur votre site. Sachez que l’appellation « AJAX » est sujette à débat. 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é. Avec un peu de concaténation, on s'en sort très bien. Depuis tout à l'heure nous vous parlons de JavaScript, de jQuery et de PHP... mais il est passé où le XML là-dedans ? 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. Ce paramètre prend en charge une fonction qui sera exécutée. Nous n'avons qu'à le passer en argument de notre fonction de retour, et cela fonctionne ! Notez à ce sujet que le type GET est le type que jQuery prend par défaut. Cette dernière prend un argument : il est automatiquement créé par$.get()et il contient les données reçues du serveur. Les visiteurs d'un site web sont des clients. Un raccourci très sympathique peut être exploité lorsque vous gérez un appel AJAX de type POST impliquant l'utilisation d'un formulaire. Si des fichiers JavaScript sont rattachés à cette page, le serveur les fait parvenir aussi au client. On peut ranger ces ordinateurs dans deux catégories : les clients et les serveurs. 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. Son but est de transformer les champs d'un formulaire en chaîne de caractères avec les variables et leurs contenus concaténés. Vous commencez à comprendre ? Vous savez lancer des requêtes HTTP vers des scripts distants, c'est bien. Ces raccourcis sont les fonctions$.get()et$.post(). Très heureux de voir que nos cours vous plaisent, déjà 5 pages lues aujourd'hui ! Vous savez sûrement comment fonctionne le web : c'est un ensemble d'ordinateurs comme le vôtre fonctionnant en réseau. La fonction$.ajax()est complétée ! 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. Nous évoquerons des scripts PHP appelésmore_come.phpetsend_mail.phpici. Devons-nous envoyer une requête de type POST ou GET ? De là, nous pouvons imaginer tout type de traitement possible pour nos données. La fonction$.ajax()va être incontournable pour nos appels AJAX en jQuery, nous l'employons pour envoyer une requête HTTP. Vous pouvez continuer la lecture de nos cours en devenant un membre de la communauté d'OpenClassrooms. C'est un lien relatif, le fichier PHP se trouve donc dans le même répertoire que le fichier JavaScript, et le fichier HTML auquel il est lié. Vous n'avez pas à vous soucier de comment votre requête HTTP est générée ni comment elle est envoyée au serveur, c'est assez complexe, et nous n'avons pas vraiment besoin de savoir ça pour gérer des appels AJAX. 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 ! Il s'agit de la sérialisation. Un peu de code pour vous montrer ça. Pour notre part, nous vous conseillons vraiment d'utiliser les deux raccourcis pour gérer vos appels AJAX dans votre projet. XmlHttpRequest devient nettement plus facile à instancier avec jQuery. C'est gratuit ! Seulement, on a toujours un petit problème côté client, nous n'avons rien pour traiter le retour ! Un exemple ? Le script PHP appelé fais son travail : envoi de mail, insertion en base de données... et surtout, il renvoie un résultat que jQuery va intercepter. C'est vraiment quelque chose de vaste qu'on va vous aider à dégrossir. Vous pouvez continuer la lecture de nos cours en devenant un membre de la communauté d'OpenClassrooms. En bref, tout cela pour dire que PHP doit vraiment nous renvoyer quelque chose, et c'est ce quelque chose que nous allons devoir utiliser pour rafraîchir la page. Asynchronous JavaScript and XML. Le boulot de jQuery ? C'est pourquoi beaucoup de personnes sont tentées de parler d'AJAJ... gardez ça pour votre culture, mais pour être vraiment honnête avec vous, on s'en moque un peu. Tout est pareil, on a juste basculé sur du POST dans le paramètretype, mais ce n'est pas vraiment suffisant. Vous devinez la suite, pour mettre en place un appel AJAX sur son site, jQuery ne va plus nous suffir. Tout va se mettre en place à ce moment-là ! Il va donc falloir prendre en compte ces navigateurs pour que notre appel AJAX soit mis en œuvre sur ces ceux-ci. Vous l'utiliserez lors de vos rappels AJAX lorsque vous souhaiterez obtenir des données. Un grand nombre de types de requêtes HTTP existent, mais ils ne nous seront pas nécessaires pour traiter nos appels AJAX. 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. Nous considérons ici que le fichier PHP exécuté côté serveur s'appellemore_com.php. Nous allons vouloir y ajouter les commentaires reçus. Nous aimerions vous faire remarquer quelque chose d'autre, souvenez-nous ce que signifie AJAX ? On utilisera donc JSON ici, comme un peu tout le monde. Nous utiliserons PHP lors de ce tutoriel, et c'est pourquoi nous vous incitons à le connaître. AJAX n'impose pas PHP, si vous développez dans d'autres langages cela fonctionnera également. Le paramètre va prendre deux arguments, l'objet resultat dont nous avons parler plus haut ainsi qu'un statut. Très heureux de voir que nos cours vous plaisent, déjà 5 pages lues aujourd'hui ! Il va falloir passer par là pour continuer ; étant donné que nous allons travailler avec le langage PHP, nous devons avoir un environnement de travail digne de ce nom. Il renvoie le tout au client. Bien sûr, vous ne vous rappelez pas du fonctionnement de$.ajax()? Néanmoins, ces connaissances sont très largement suffisantes pour mettre en place votre premier appel AJAX. Nous allons remédier à cela tout de suite, grâce à trois nouveaux paramètres de$.ajax(). Nous allons ici commencer à taper un peu de code ! Vous pourrez aussi suivre votre avancement dans le cours, faire les exercices et discuter avec les autres membres. Des fichiers JavaScript y sont rattachés. Nous ne sérialiserons pas les formulaires dans les prochains exemples de ce tutoriel. Veuillez utiliser un navigateur internet moderne avec JavaScript activé pour naviguer sur OpenClassrooms.com. Notez qu'à partir de maintenant, nous allons devoir travailler plus souvent avec un langage côté serveur. C'est gratuit ! Nous n'avons fait qu'instancier un objet XHR, mais nous n'exploitons encore pas sa puissance. ;). 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. Nous allons désormais avoir très souvent recours à cette fonction, alors commençons par voir ce qu'elle a dans le ventre. Voici un code en JavaScript pur instanciant un objet XHR couvrant les navigateurs utilisant ActiveX et XHR. Un langage côté serveur : nous utiliserons ici le PHP. Maintenant une question doit vous titiller ! Imaginez un système pour recharger des commentaires dès que l'on clique sur un bouton « Plus de commentaires ». ^^. Le premier est un objet XHR renvoyé par jQuery. Bon ! Et l'objet XmlHttpRequest, il est quand même instancié ? N'oubliez pas la devise de jQuery : écrivez moins, faites plus ! Vous pourrez aussi suivre votre avancement dans le cours, faire les exercices et discuter avec les autres membres. Et voilà ! Avec cette fonction, jQuery fait tout implicitement. À vous de vous tenir à jour. La preuve est que la réponse HTTP est bien renvoyée. Lisez la documentation sur jQuery.ajax() ! Le concept d'AJAX existe depuis bien avant XHR : il a été néanmoins grandement popularisé par l'apparition de cette classe. 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 ! Vous devinez la suite, pour mettre en place un appel AJAX sur son site, jQuery ne va plus nous suffir. Le paramètre exécute une fonction si l'appel AJAX a échoué. Imaginons que ce bouton existe dans le DOM, et qu'il dispose de l'identifiant#more_com. L'appel AJAX est ici dédié à la récupération de données, nous ne faisons qu'obtenir les commentaires. La solution à ce problème, c'est la sérialisation du formulaire. Que vous soyez créateur ou déjà aguerri, la vision entrepreneuriale est capitale à la réussite de votre entreprise. Pour le reste, la fonction fonctionne vraiment de la même manière que$.get(). 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é. Imaginez un article sur le web, qui possède son propre fil de commentaire : classique. Les paramètrescomplete,successeterrorvont nous être très utiles ! De là, vous êtes libre d'ajouter tous les effets que vous souhaitez afin de rendre la chose un peu plus animée ! Nous pouvons également envoyer des données grâce à GET. Bien sûr, rien n'est magique. Pour interagir avec une base de données, jQuery va devoir appeler des scripts côté serveur, qui eux sont capables de le faire. Nous poursuivrons ici avec l'exemple du fil de commentaire rechargé par un bouton évoqué dans le chapitre précédent. AJAX repose sur ce fondement même, la communication asynchrone d'un langage côté client, avec un langage côté serveur. 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 ». Vous ne savez pas vraiment ce qu'est HTTP ? Vous le devinez,completeva s'exécuter une fois l'appel AJAX effectué. La fonction exécutée parerrorprend en charges trois arguments : le résultat, le statut, et l'erreur. 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. Nous pouvons potentiellement tout faire... car toute la puissance de PHP est à notre disposition. 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. Cela passe ici par le paramètretype. Vous utilisez un navigateur obsolète, veuillez le mettre à jour. Pour cette raison, le projet a pour slogan « Le framework pour les perfectionnistes avec des deadlines.Développé en 2003 pour le journal local de Lawrence (Kansas), Django a été publié sous licence BSD à partir de juillet 2005. Elle est rendue possible grâce à la méthodeserialize()de jQuery. Nous en avons fini avec les requêtes de type GET ! Nous écoutons l'évènement clic sur le bouton d'envoi. Ces variables contiennent les informations du formulaire, et PHP en a besoin pour agir côté serveur. Ce résultat, c'est ce que jQuery utilisera pour mettra à jour la page ! $.post()fonctionne de la même manière que$.get(): c'est un raccourci pour créer rapidement un appel AJAX de type POST. En guise de TP, nous réaliserons un tchat en AJAX pour clore cette grande partie du tutoriel. Votre machine, comme les nôtres, sont donc des clients. Lorsque vous allez cliquer sur le bouton « Envoyer », nous allons envoyer des données au serveur, pour qu'il les envoie par email, avant de nous retourner un message de succès ou d'erreur. Voilà ce dont on va avoir besoin : Un langage côté client : nous utiliserons bien sûr JavaScript, avec jQuery. Un autre exemple ? 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. C'est comme ça que le fil de commentaire de Facebook fonctionne. Pour obtenir une page web, un client demande donc à un serveur une page web. Si nous souhaitons ajouter un nouveau commentaire, mieux vaut que le retour soit un peu structuré pour le rendre plus facilement exploitable pour nous, XML est alors tout indiqué. Ce code est repris du tutoriel AJAX et l'échange de données en JavaScript du Site du Zéro. Instancier un objet XmlHttpRequest devient extrêmement simple, cela va être rendu possible par la fonctionjQuery.ajax()ou$.ajax(). Client : Hey le serveur, voilà ma requête HTTP : envoie moi la page www.site.com/index.html. Mais quel sens lui donner ? Une seule ligne de code, cela va aller très vite ! 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é. 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. :). Voilà comment ça tourne. Nous devrons ensuite intercepter la réponse HTTP du serveur, et rafraîchir notre page web grâce à cette réponse. Néanmoins, nous allons voir maintenant comment gérer une requête de type POST. Lorsque cet évènement est réalisé, nous envoyons une requête HTTP en POST vers un script PHP depuis jQuery. Voilà comment nous devons procéder pour automatiser cela : Et voilà ! 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. Avouez qu'écrire une fonction$.ajax()pour ensuite définir son type GET/POST dans le paramètre adéquat, c'est lourd. Pour spécifier quelle est la ressource ciblée (notre script PHP) nous allons devoir utiliser le paramètreurlde$.ajax(). Pour cela, il faut ajouter un petit quelque chose dans lesuccess, mais vous devriez savoir le faire tout seul. Imaginons l'envoi d'un email en AJAX avec la fonction$.post(). Si vous savez déjà ce qu'est HTTP, vous pouvez passer directement à la troisième partie de ce chapitre. 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. 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. 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).
Gb Seafood Carrollton, Ga,
Plus Gros Insecte Volant France,
Rent The Portland Spirit,
Rosalia Wallpaper,
Sylvie Ortega Instagram,
Salaire Entraîneur Liga,
Transport Colis Tunisie Allemagne,
Crystal Ballroom Wedding Cost,