Introduction à AJAX et interaction avec PHP I-A. Remerciements▲ Un grand merci à Denis Cabasson et Guillaume Rossolini pour leurs conseils avisés, leur rapidité et leur patience pendant la relecture. I-B. On parle beaucoup d'AJAX en ce moment dans le buzzword Web 2.0. Ce modèle de fonctionnement est fiable car existant depuis très longtemps mais il pose aussi des problèmes d'interaction homme machine et de performances. D'un point de vue utilisateur, le rafraîchissement de toute la page au moindre clic est synonyme de temps d'attente et de scintillement qui n'est pas toujours du meilleur effet dans une application professionnelle. Du point de vue des performances, à la moindre modification, vous rechargez une page entière avec toutes ses balises HTML, ce qui génère un trafic important. La technologie AJAX n'est pas nouvelle en soi. Les puristes ne vont sûrement pas aimer ce que je vais dire, mais on peut tout à fait faire de l'AJAX au sens large sans forcément faire de l'asynchrone ni du XML. I-C. II-A. L'exemple se trouve ici II-B.
Javascript : réaliser un champ de texte avec auto-suggestions Vous aimeriez pouvoir réaliser une barre de recherche avec des propositions dynamiques à la manière de Google, mais vous ne savez pas comment vous y prendre ? Alors suivez-moi ! Nous allons voir ensemble tout du long de ce tutoriel comment réaliser ce type de champ de texte ! Sommaire Présentation Le principe est simple : nous voulons réaliser un champ de texte qui, lorsque le visiteur saisira une lettre, ira chercher dans une liste de mots clés ceux qui commencent (ou contiennent) ces lettres, pour les afficher au visiteur. Voir la démo (essayez avec "K","k", "B", "S"...) Préparation Bon, nous n'allons pas du tout nous occuper du design du champ de texte dans ce tutoriel, donc je vous donne la structure HTML qu'aura le champ de texte avec les suggestions, et un design que j'ai intégré à partir de ce PSD : le CSS : Afficher le CSS Fermer ce cadre #auto-suggest .suggestions li {height:25px;padding:0 10px;line-height:25px;cursor et les images placées dans un dossier "images" : tick.png noise.png Bien !
Créer une recherche javascript et XML Bonjour à tous ! Alors voilà j'ai pour projet un petit site "assez simple" mais je débute un peu en intégration. Et je bloque sur un truc. J'ai regardé déjà si il n'y avait pas des sujets qui traitent déjà de ça mais j'ai rien trouvé qui me convienne. Alors voila Je veux créer un champ de recherche. Par exemple si quelqu'un écrit : "Que vaut pi ?" Alors je sais pas si c'est clair, mais dans l'ensemble est-ce que c'est pas trop compliqué ? Je vous remercie par avance de votre attention
Tutoriel Ajax en exemples Asynchronous Javascript + XMLLa création de pages web dynamiques coté client Ajax est seulement un nom donné à un ensemble de techniques préexistantes. Il dépend essentiellement de XMLHttpRequest, un objet coté client utilisable en JavaScript, qui est apparu avec Internet Explorer 4.0. XMLHttpRequest a été conçu par Mozilla sur le modèle d'un objet ActiveX nommé XMLHTTP créé par Microsoft. Pourquoi utiliser Ajax? Ajax permet de modifier partiellement la page affichée par le navigateur pour la mettre à jour sans avoir à recharger la page entière. Ajax est une technique qui fait usage des éléments suivants: HTML pour l'interface. Le terme "Asynchronous", asynchrone en français, signifie que l'exécution de JavaScript continue sans attendre la réponse du serveur qui sera traitée quand elle arrivera. Dynamic HTML est aussi un ensemble de techniques, qui comprend: HTML, CSS, JavaScript. Comment cela fonctionne? open: établit une connexion. L'objet XMLHttpRequest Attributs Méthodes Lire un texte
Scriptaculous Ajax.Autocompleter : Mettre en place un champ de saisie avec suggestions dynamiques Vous avez tous déjà développé une application Web contenant un formulaire au sein duquel vous avez inséré une liste de choix, en utilisant la balise HTML <select> . Mais une liste déroulante n’est réellement utilisable que si elle ne contient que peu d’entrées ; pas plus d’une trentaine, dirais-je, au grand maximum. Et une liste <select> force l’utilisateur à choisir une des valeurs que vous lui proposez. Dans certains cas, vous pouvez vouloir : aider votre utilisateur, en lui une liste de choix tout en lui permettant d’effectuer une saisie libre. Par exemple, pensons à la saisie d’une adresse E-Mail lors de la rédaction d’un courier électronique [ 1 ] : l’utilisateur peut commencer à saisir une adresse vous pouvez lui proposer une liste issue de son carnet d’adresses, filtrée par sa saisie il peut : soit sélectionner l’une des adresses proposées, soit en saisir une autre. Script.aculo.us :: Ajax.Autocompleter Cette bibliothèque propose un composant qui vous permettra : un formulaire HTML, <?
Bonjour FLE ! | Ressources et activités pour les enseignants de FLE L'objet XMLHttpRequest, description et utilisation Description basée sur la spécification du W3C avec un mode d'emploi Cet objet s'utilise en JavaScript pour échanger des données avec le serveur au format texte, XML ou JSON. Les fichiers XML sont automatiquement parsés par l'objet et accessibles par les méthodes du DOM. Court historique XMLHttpRequest, a été d'abord implémenté dans Internet Explorer depuis la version 4.0. Description XHR est une classe qui est reconnue par tous les navigateurs actuels et par le langage de programmation fonctionnant coté client JavaScript. Attributs Le rôle des attributs de la classe est de se voir assigner l'état de la connexion, et les données reçues. Méthodes Outre le constructeur, la classe a deux méthodes principales, open pour créer la session et désigner le fichier distant, et send pour tranférer les données sur le serveur. Comment utiliser XMLHttpRequest Voilà le code complet pour ouvrir une session Ajax, en créant un nouvel objet XMLHttpRequest et en chargeant diverses données. par: Le format HTML Demos
Example of a dynamic HTML5 datalist control I've made no secret of being a huge fan of the updates to forms within HTML5. One of the more interesting updates is the datalist control. This control gives you basic autocomplete support for an input field. At its simplest, you create the datalist control options, tie it to a control, and when the user types, they see items that match your initial list. Consider this example. Note that the input field, search, has a list attribute that points to the datalist control below it. So - that's cool I think - but most folks are not going to have a static list of options. For my example, I make use of jQuery, although that is certainly not required. One interesting tidbit. I'm not sure if I like that so for my examples I've simply disabled it. As I mentioned above, if you run this in a browser that doesn't support datalist, it fails nicely. You can try this version by hitting the giant demo button below.
Zoom sur les capsules vidéo Les capsules vidéo s’imposent actuellement comme un véritable phénomène de mode, notamment dans le domaine éducatif. D’une part, l’évolution des pratiques pédagogiques en font un support d’apprentissage idéal. D’autre part, aujourd’hui, de nombreux outils et services permettent la réalisation rapide et la mise en ligne facile de courtes vidéos originales. Capsule, vous avez dit capsule ? Il s’agit d’une séquence vidéo, généralement courte et scénarisée, permettant de développer une idée, une notion ou un thème. Initialement utilisée dans le monde de l’entreprise comme support de présentations dynamiques réalisées à peu de frais, la capsule vidéo fait aujourd’hui son entrée dans les apprentissages. Le terme de “capsule” nous arrive du Québec où il désigne toute “production écrite, orale ou audiovisuelle qui traite, de manière condensée, d’un sujet ou d’un thème donné” [1]. Make your own mind maps with Mindomo. Capsule...pédagogique ! Réussir sa capsule L’originalité est souvent appréciée.
Tout JavaScript.com [Tutoriaux javascript et PHP] - Scripts, Tutoriaux, Forums pour webmasters et développeurs Robloche nous propose ici un tutorial passionnant sur l'utilisation des requêtes serveur en JavaScript. Ce tutorial a été remis à jour en aout 2017 pour tenir compte des évolutions des navigateurs. L'objet XMLHTTPRequest permet de réaliser des appels au serveur depuis la page HTML. Il s'agit d'appels AJAX (Asynchronous JAvascript XML). Aujourd'hui, tous les navigateurs acceptent ce mode de fonctionnement, sans incompatiblité particulière. AJAX a permis l'émergence de véritables applications web et a grandement participé à l'essor du javascript, qui est même devenu un langage serveur avec Node.js ! Présentation Comme leur nom ne l'indique pas, les objets XMLHTTPRequest permettent de récupérer toutes sortes de données, et pas seulement des fichiers XML. > Masquer le code JavaScript var xhr_object = new XMLHttpRequest(); xhr_object.open("GET", location.href, false); xhr_object.send(null); if (xhr_object.readyState == 4) alert("Requête effectuée !") Comment ça marche ? [haut de la page] Méthodes