background preloader

Tutorial XMLHTTPRequest

Tutorial XMLHTTPRequest
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

Cookies Avec JavaScript, il est possible de programmer les célèbres cookies. Nous allons voir ici à quoi servent les cookies et comment stocker et récupérer des informations grâce à eux. En bas de cette page, vous trouverez des exemples de programmation de cookies. 1 - A quoi servent les cookies ? Les cookies sont très utilisés, par tous les sites commerciaux et par de plus en plus de sites perso. La raison est simple. Le nombre de visites, la date de la dernière visite,... 2 - Comment STOCKER des informations ? Le type d'informations à stocker n'a aucune influence sur le code. La valeur à stocker est associée à un nom de cookie. Donc pour stocker la valeur Arthur dans la variable prenom il suffit d'appeler la fonction comme ceci : 3 - Comment RECUPERER les informations ? Voyons un cookie qui contiendrait les informations suivantes : Si la variable demandée n'est pas contenue dans le cookie, elle est considérée comme valant null. le_prenom=GetCookie("prenom"); Maintenant, vous savez tout.

Tutoriels XHTML, CSS, Accessibilité, JavaScript Proposez votre tutoriel Niveaux : Débutant Confirmé Expert Langages hypertexte (HTML, HTML5), balises, structure des pages web et validation W3C Feuilles de style CSS (Cascading Style Sheet) Accessibilité Accessibilité des sites internet, bonnes pratiques, ergonomie, utilisabilité Javascript Langage de script pour le web dynamique exécuté par le navigateur Développement Langages et technologies du web tels que PHP, MySQL, Ajax Responsive web design Tout pour smartphones et tablettes Design Design et graphisme pour le web Vue & Nuxt Vue.js et Nuxt Formats, encodage, XML Formats variés, XML et microformats, sémantique Web Le monde du web et d'internet en général Dans les cas les plus extrêmes, on se retrouve à chercher une aiguille dans une meute de foin.

Développement Web : 'Zone Grand Débutant' IV-A. Introduction▲ Les trois notions fondamentales : Le fichier est au format JavaScript ; Le document (ou programme) est à destination de l'internaute ; L'outil est un navigateur Web. Le code JavaScript est interprété par le navigateur Web (s'il n'est pas trop préhistorique et si sa configuration ne l'a pas désactivé). Je viens déjà de vous présenter un inconvénient de JS : il peut être désactivé. Incruster du code JS dans une page Web permet à la page de réagir aux actions de l'internaute, par exemple "la souris survole tel bouton" ou encore "le formulaire vient d'être envoyé". ActionScript 3, la dernière version du langage de script pour Flash, utilise une syntaxe quasiment identique à celle de JavaScript. IV-B. Pour développer en JavaScript, il est recommandé d'avoir un éditeur de code plus puissant que ceux recommandés au début de cet article (avoir la documentation du langage à portée de main commence à devenir une condition importante). IV-C. Sélectionnez IV-D. IV-D-1. IV-D-2.

Visual jQuery 1.2.6 Une réintroduction à JavaScript - MDC Introduction Pourquoi une réintroduction ? Parce que JavaScript peut raisonnablement se targuer d'être le langage de programmation le plus incompris au monde. Bien que souvent raillé comme étant un simple jouet, derrière sa simplicité désarmante se cachent certaines fonctionnalités de langage très puissantes. De nombreuses applications JavaScript de premier plan sont apparues, ce qui montre qu'une connaissance approfondie de cette technologie est une compétence importante pour tout développeur Web. Il peut être utile de commencer avec un aperçu de l'histoire de ce langage. Quelques mois plus tard, Microsoft a lancé avec Internet Explorer 3 une version du langage globalement compatible, appelée JScript. Note : Dans la suite de cet article et à des fins de simplicité, nous utiliserons les termes « JavaScript » et « ECMAScript » pour désigner la même chose. Contrairement à la plupart des langages de programmation, JavaScript n'a pas de concept d'entrée ou de sortie. Aperçu Les nombres NaN + 5;

Tutorial : suggestions (auto-complétion) en Ajax avec JQuery et Php Pour ce deuxième tutoriel sur l’ajax, je te propose un formulaire avec auto-complétion. Simplement afficher des suggestions quand l’utilisateur commence à taper dans un champ de texte. Les suggestions sont affichées grâce à Ajax qui permet d’effectuer des requêtes SQL en « arrière-plan » de la page. Toute la partie JavaScript sera faite grâce au framework JQuery. Comme d’hab, j’ai préparé une page de démo du script : disponible ici. Jquery : auto-complétion Donc, pour commencer, on va préparer le code HTML nécessaire : le champ de texte sur lequel les suggestions vont être appliqué et le bloc (caché au début de la page) qui va éventuellement contenir les suggestions : Ensuite, dans le code javascript, on retrouve les deux fonctions nécessaires : lookup qui permet de faire l’appel ajax et fill qui permet, comme son nom l’indique, de remplir le champ avec la valeur suggerée. Enfin, il ne reste plus qu’à développer le php qui sera exécuté grâce à l’appel ajax.

Dynamisez vos sites web avec Javascript ! Bienvenue à toutes et à tous, Qui n'a jamais entendu parler du JavaScript ? Créé dans les années 90 en tant que simple langage de script, JavaScript est désormais un des poids lourds du développement Web ! Bref, JavaScript est partout ! Voici quelques exemples de ce qui est réalisable grâce au JavaScript : Un système de chat, comme celui de Facebook ;Une suggestion lors de la frappe dans un champ de texte, comme lors d'une recherche avec Google ;Un lecteur de vidéos ou de musiques, aussi puissant que celui de Youtube, grâce aux balises <video> et <audio> ;Des jeux exploitants la balise <canvas> comme Torus, un Tetris en 3D ;La modélisation 3D d'une Lamborghini affichée grâce à l'API WebGL et à la bibliothèque Three.js ;Et bien d'autres choses ! Sur ce, bonne lecture !

Pompage.net : le web design puisé à la source Maitrise de la gestion des variables en PHP Tout le monde sait manipuler des variables en PHP. Peut-on en dire autant quand les concepts de "copie" et de "références" entrent en jeu ? Nous allons détailler comment fonctionnent les variables au niveau interne à PHP. Cela nous permettra de comprendre très nettement les mécanismes mis en oeuvre lors de l'utilisation d'objets, de références, de fonctions ou de simples variables globales. Lire l'article. Article lu 2151 fois. Copyright © 2010 Julien Pauli.

How to Develop Web Applications with Ajax, Pt. 1 - WebReference.com - How to Develop Web Applications with Ajax, Pt. 1 Each time the state of the XMLHttpRequest changes, the “onreadystatechange” event is triggered. By using “xmlObj.onreadystatechange = function(){ … }” we build and run a function on-the-fly each time the state of the XMLHttpRequest object changes. There are a total of 5 states, starting with 0 and going through 4. The fifth state (number 4) is when we are certain that data will be available, so we check the xmlObj.readyState for “4” to see if data is available. If it is, we run the updateObj function. Our web page’s P tag has an ID of “xmlData,” that’s the paragraph we’re going to update. The xmlObj.responseXML property is a DOM object – it’s a lot like the “document” object, except it’s for the remote XML file. Note: it returns the XML node, not the data within that node – the data must be extracted by accessing properties of that XML node, which is the next step. xmlObj.open ('GET', file, true); xmlObj.send (''); That’s all there is to it

Basic Flash MX/MySQL chat 1. Introduction Welcome to my first tutorial regarding Flash MX and PHP. Here, we will try to set up a simple Flash chat in order to implement it into your web pages without using any socket connection. To study with this tutorial, you will need: Web server with PHP, MySQL database and Flash MX 2. 2.1 Open your preferred PHP Editor (mine is TextPad) and create a new document. <? // ---------------// flash chat vars// ---------------// how many old messages the firs time enters$first_run = 50;// max users online$max_users = 5;// After how much time user is disconnected (in ms)$active = 20000; // --------------------// pass microtime// --------------------function getmicrotime(){ $time = microtime(); $time = explode(" ",$time); return ($time[1] . substr($time[0],2,3));}? In the last lines, there is a function getmicrotime() which we will use it in the future to receive the actual datetime in microtime format, unix_timestamp. ## Table structure for table `flash_chat`# 3. 3.1 first_access.php <?

Ajax > Ajax : synchrone et asynchrone ? Des exemples ! Ajax : synchrone et asynchrone ? Des exemples ! Quelle difference ? Nous avons vu dans le précédent article sur le sujet qu'AJAX voulait dire "Asynchronous Javascript And Xml". AJAX executé de façon synchrone Reprennons le code de notre précédent article, et ajoutons-y un evenement déclencheur. Rien d'extraordinnaire dans ce bout de code. On voit bien dans cet exemple que le script attend la fin du chargement de la page pour continuer. AJAX executé de façon asynchrone Reprennons le code précédent et passons le simplemet en mode asynchrone (en changer le parametre cité précedement à "true") : Tout s'est executé avant la fin du chargement. Les controles de requetes : Lorsque nous créons une requete vers un fichier, nous créons un objet "XMLHttpRequest", dans notre exemple, il correspond a la variable "xhr_object". // ON APPELLE LA PAGE xhr_object.open("GET", "/misc/ajax_test.php", true); xhr_object.send(null); } </script> <a href="javascript:exemple()">Hop, on essaye !

25 techniques CSS pour être plus efficace (partie 2) Lors d'un précedent article je présentais la première partie des techniques CSS. Voici la suite avec des outils pour générer du code en ligne, valider votre site ou encore pour optimiser le code CSS. Design Une bibliothèque de Modèle CSS open source Vous pouvez utiliser un Générateur en ligne pour créer des modèles CSS. Mais je préfère l'utilisation de ce site car il offre des modèles CSS open source de très bonnes factures que nous pouvons utiliser comme fondations à tous les projets web. Une barre de menu CSS qui se chevauche Une belle réalisation de menu CSS où les onglets se chevauchent les uns les autres. Rendre vos formulaires accesibles Créer des formulaires graphiques et cohérents en même temps. Faire de jolis Boutons en CSS Techniques pour intégrer facilement un graphique en barres horizontales. Positionnement vertical centré Beaucoup de personnes cherchent encore la meilleure façon de centrer verticalement, voici une technique. Un pied de page efficace en CSS Gagner du temps Articles Outils

Petit guide .htaccess | Juste le zeste... De tous les éléments de développement web, .htaccess est certainement le plus intimidant. Après tout, c’est un outil incroyablement puissant, et l’un de ceux qui a le potentiel de détruire votre site si vous ne faites pas attention. Nous allons voir quelques techniques et astuces permettant de bien démarrer avec .htaccess. Ce n’est pas aussi effrayant que cela et si vous étudiez le code quelques minutes, vous saisirez rapidement comment ça fonctionne et pourquoi. Ensuite, nous verrons les points qu’il ne faut pas rater pour ne pas se créer des soucis supplémentaires lors de manipulation de .htaccess. 1 – Créer une page d’erreur personnalisée .htaccess sur Linux/Apache permet facilement de créer des pages d’erreur personnalisées. ErrorDocument 401 /401.php ErrorDocument 403 /403.php ErrorDocument 404 /404.php ErrorDocument 500 /500.php 2 – Bloquer la navigation dans les répertoires Il peut arriver que vous n’incluiez pas de fichier index dans tous les répertoires de votre site.

Related: