background preloader

Web 2.0, allez plus loin avec AJAX et XMLHttpRequest

Web 2.0, allez plus loin avec AJAX et XMLHttpRequest
Qu'est ce qu'AJAX ? Vous trouverez certainement plusieurs définitions différentes à cet acronyme. En voici une : Asynchronous JavaScript And XML. AJAX n'est donc pas une technologie mais plutôt un concept qui permet donc de faire des appels asynchrones au serveur depuis le client. Lors de ces appels, le serveur retournera du XML qui sera "récupéré" par javascript et traité. Nous verrons que nous pouvons tout aussi bien faire transiter du texte et faire des appels synchrone si l'on veut. Vous saisissez une adresse dans votre navigateur. Donc, quand vous cliquez sur un lien, vous recommencez ce processus en entier avec une nouvelle page. Ajouter des éléments a la page Modifier le contenu d'un "bout de la page" Insérer des données dans une base. Les applications sont donc très nombreuses : Champs qui s'auto-complètent (comme google suggest). Mais comment faire pour l'utiliser ? AJAX se base sur l'utilisation d'un composant embarqué dans presque tous les navigateurs récents. Sélectionnez <? Related:  cours dnr2isite Web

Création d'une petite ontologie Vous devez d'abord installer Protégé [Ce document suppose l'installation de Protégé 4.3] Pour simplifier, nous indiquons déjà les mots qui désigneront une classe avec cette police et avec sa première lettre en majuscule; les propriétés, elles, auront cette police avec sa première lettre en minuscule et en «bossesDeChameau» pour les mots différents. Ces choix devraient en principe être faits suite à une analyse complète des besoins, mais nous les imposons ici pour les besoins de cet exercice. Lancer Protégé et vous devriez obtenir une figure semblable à la figure plus bas. Définir l'Ontology IRI pour un URI qui vous ressemble. Dans le menu File/Save, indiquer le format de sauvegarde de l'ontologie, je suggère RDF/XML et l'endroit sur votre disque où sera conservée l'ontologie. En principe, votre écran devrait ressembler à celui-ci: Définition des classes simples La partie droite de l'écran permet de voir des informations sur les classes et d'en changer les caractéristiques. Pour l'énoncé VI

Tutorial sur les requêtes serveur en JavaScript Une question revient souvent sur les forums dédiés au JavaScript : Peut-on réaliser une requête sur le serveur sans (re)charger une page et sans utiliser d'astuces telles qu'une frame invisible ou une fenêtre popup ? Jusqu'à peu, je pensais que la réponse était aussi claire que négative. Et puis j'ai découvert XMLHTTPRequest et la réponse est devenue : « Oui ! » Mais les documentations sur ce sujet ne se bousculent pas sur le net, notamment en français. D'où cette petite introduction aux objets XMLHTTPRequest (que nous appellerons ainsi même si le nom diffère d'un navigateur à l'autre). Tout ce qui se trouve sur cette page fonctionne avec Internet Explorer 6+, Firefox 1.0+ et Opera 9+. 1. 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. > Voir le code JavaScript Comment ça marche ? Note : Ces fonctions sont détaillées en section 6. [haut de la page] 2. 3. > Voir le contenu de foo.txt 4. 5. 6. 7.

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

RDF pour les nuls Préambule du 27 août 2007 : à la suite d'un bon billet de David sur RDF, je voulais ajouter en commentaire la référence vers ce billet que j'avais écrit le 8 septembre 2006 ; je me suis alors aperçu qu'il n'avait pas été récupéré lors de l'import de mon ancien blog. Comme j'avais un peu la flemme de rechercher dans mes archives persos, mon sauveur se nomme Internet Archive dont le crawler salutaire avait indexé cette page. Qu'il en soit remercié. Le voici donc republié en l'état, en espérant que les commentateurs de l'époque m'excuseront le fait que je ne récupère pas leur prose ;-). Pour vous faire apprécier pleinement toute la substantifique moelle du prochain billet, je me suis dit qu'il serait peut-être utile de réexpliquer le principe général de RDF1. RDF n'est pas un langage de programmation, ni même un langage à balises permettant de structurer une information. Évidemment, il n'est pas possible d'exprimer toutes les informations avec des phrases simples.

Request Headers in the HTTP protocol These header lines are sent by the client in a HTTP protocol transaction. All lines are RFC822 format headers. The list of headers is terminated by an empty line. From: In Internet mail format, this gives the name of the requesting user. The Internet mail address in this field does not have to correspond to the internet host which issued the request. The mail address should, if possible, be a valid mail address, whether or not it is in fact an internet mail address or the internet mail representation of an address on some other mail system. Accept: This field contains a semicolon-separated list of representation schemes ( Content-Type metainformation values) which will be accepted in the response to this request. The set given may of course vary from request to request from the same user. This field may be wrapped onto several lines according to RCFC822, and also more than one occurence of the field is allowed with the signifiance being the same as if all the entries has been in one field.

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

Related: