livre Ajax - Micro Application

Ajax, qu’est-ce que c’est ?

Ajax, de l’Iliade à l’évier

Apparition du sigle

Ajax sur le Web aujourd’hui

Plus qu’un langage une philosophie

Les règles d’une application Ajax

Zoom sur Google Calendar

Communication avec l’utilisateur

Gestion de la navigation

Gestion du cache local

Schéma introductif

Créer sa premièrepage avec Ajax

Le fichier de données

Son utilité

Son emplacement

Ses données

Créer un premier fichier de données

L’appel Ajax en Javascript

La fameuse fonction XMLHttpRequest !

Inclure le code Javascript dans sa page

Syntaxe de l’appel Ajax sous Internet Explorer

Syntaxe de l’appel Ajax sous Firefox

Ce qui se cache derrière l’appel Ajax

Traitement des données récupérées

Accéder aux données récupérées

Montrer les données du fichier

Afficher les données du fichier sur sa page

Mettre en place un centre météo à domicile

Check-list

Mieux comprendre le langage Javascript

Aperçu des fonctionnalités de Javascript

Javascript, à quoi sert-il ?

L’intégration de Javascript au langage HTML

Comment Javascript peut changer le style d’une page ?

Manipuler les éléments HTML avec Javascript

Les objets de base en Javascript

L’objet window

L’objet document

L’objet Math

L’objet Date

Les chaînes de caractères

Les tableaux

L’objet Array

Modifier un tableau

Quelques fonctions intéressantes des tableaux

Les autres fonctionnalités de Javascript

Try catch

switch case

Les symboles et les mots réservés &&, ||, !, if, else, for, ==, ===, !=, !==

Gérer des événements

Gérer l’historisation des données météo !

Check-list

Les objets Javascript primitifs

Les fonctions spéciales de Javascript

Les attributs et les fonctions des éléments HTML

HTML, le vilain canard de la famille SGML

SGML : le langage impossible

HTML : le langage clé du développement du Web

XML : un métalangage modèle de données en document

XHTML: le mariage impossible ?

JSON : le dernier-né et déjà tout d’un grand

Comparaison des formats

Le format TXT

Le format HTML

Le format XHTML

Le format XML 

Le format JSON

Définir son propre format XML (définition)

Manipulation et sélection

Xpath

XQuery

Présenter ses données grâce à XSL (transformation)

Associer la feuille de styles au fichier de données

Appliquer une feuille de styles

XML en action

Des problèmes de sécurité

Récupérer un flux XML

Convertir le flux XML en JSON sur le client

Conclusion

Cas pratique : afficher et trier ses contacts

Check-list

Rendre son site Ajax compatible avec tous les navigateurs

Javascript au cœur de la guerre des navigateurs

Un peu d’histoire

Le point de vue des géants d’Internet

Astuces pour tester la compatibilité de ses pages

Détecter la plate-forme, le navigateur et sa version

Browser, un objet qui connaît bien le navigateur

L’objet navigator

Prêt pour utiliser Browser

Zoom sur les fonctionnalités non compatibles

Les dimensions de la fenêtre

La souris

Le clavier

Rendre ses feuilles de styles compatibles

Définir la taille et la position des éléments HTML

Intégrer des images PNG dans ses pages

Ce qu’on peut mettre dans ses feuilles de styles

L’objet XMLHttpRequest sur les différents navigateurs

Instancier un objet XMLHttpRequest

Savoir gérer les différents états de l’objet XMLHttpRequest

Intégrer l’objet au Browser

Check-list

Les langages serveurs

Présentation des langages serveurs

Mettre en place un environnement serveur

Communiquer avec le serveur : les méthodes GET et POST

La méthode GET

La méthode POST

Les codes de réponse ou les codes de statut

Une extension Firefox pour tout voir !

Les variables de session, d’application, les cookies

Les cookies

Les variables de session

Les variables d’application

Stocker ces variables

Réinitialiser ces variables

Cas pratiques : plus d’interactivité avec un serveur

Le service météo

Récupérer un service météo

Le contrôle de formulaire

Check-list

Vous avez dit Ajax : comment tirer partie du mode asynchrone ?

Quand utiliser le mode asynchrone ?

Présentation du mode asynchrone

Javascript et le mode asynchrone

Conjuguer la simplicité du mode synchrone à la souplesse du mode asynchrone

Maîtriser les erreurs serveur

Zoom sur status, readyState et onreadystatechange

Mettre en place la gestion du retour serveur

Quand le serveur est trop long : le temps de réponse

Les requêtes concurrentes : file d’attente et priorité

L’encapsulation des requêtes Ajax dans un objet Javascript

La notion de priorité et de file d’attente

Mettre en place une horloge serveur

Définition du système

Mettre en œuvre une solution sans Ajax

Une solution avec des requêtes synchrones

La solution optimale : Ajax !

Check-list

Aller plus loin avec le Javascript orienté objet

Première classe personnelle en Javascript

Qu’est-ce qu’une classe en Javascript

Attention aux objets natifs Javascript !

Première classe perso

Les notions « orienté objet » et « prototypage »

L’intérêt de programmer en orienté objet

Le prototype en Javascript

De la souplesse de l’orienté objet prototypé

Ajax : plus simple avec les objets !

L’objet Browser

La station météo orientée objet

Vers la conception d’un Framework

HTML, DOM et les objets Javascript

Séparer le fond et la forme

Objets DOM et objets Javascript : une cohabitation difficile

Et si on prototypait les DOM

Fonctions avancées : la gestion des erreurs et le débogage

Optimiser la gestion des erreurs

La console de Firebug

Une console personnelle

Check-list

Découverte d’un Framework Ajax : Script.aculo.us

Qu’est-ce qu’un framework

Définition

Tirer partie d'un framework

Notre propre framework

Présentation de Script.aculo.us

Carte d'identité du framework

"Drag and drop"

Auto complétion

Utiliser le framework dans ses pages

Personnaliser les fonctionnalités du framework

Rendre systématiques les requêtes vers un serveur tiers

Jouer sur les effets visuels

Check-list

Vous en rêviez : votre portail web Ajax en 20 minutes !

Présentation du projet

Pourquoi ce projet ?

Les thèmes abordés

Construire la maquette du portail

Mettre en place le squelette HTML, CSS et Javascript

Créer des éléments HTML

Ajouter des styles de base

Utiliser un modèle objet et intégrer un Framework

Intégrer le Framework prototype

Définir une classe pour l’application

Créer un titre éditable en ligne

Utiliser des cookies

Créer le prototype de Date pour faciliter le travail

Lire et écrire dans un cookie avec une date d’expiration

Construire la fenêtre Ajouter du contenu

Créer une nouvelle classe pour la fenêtre pop-up

Créer la maquette HTML de la fenêtre pop-up dans un fichier séparé

Ouvrir, déplacer et fermer la fenêtre pop-up

Définir un patron pour les blocs de contenu

Mettre en forme le bloc

Gérer l’événement au clic sur la croix

Définir une requête Ajax pour connecter le bloc à un service web

Implémenter un bloc spécifique : le flux RSS du Monde.fr

Créer une sous-classe de la classe Bloc

Ajouter le bloc à partir de la fenêtre pop-up

Créer deux blocs supplémentaires

Comment prévoir la création de blocs futurs ?

Analyser les flux XML

Check-list

Découvrir les design patterns

Qu’est-ce qu’un design pattern ?

Définition

Vue d’ensemble

En pratique : AJAX et les design patterns

Le design pattern Observateur

En théorie

Résolution du problème en code procédural

Création des classes pour le patron Observateur

Encapsulation du code procédural dans la méthode d’un objet

Exemple du patron Observateur implémenté

Le design pattern Composite

Définition

Mise en œuvre : dosage de médicaments

Passage par les objets

Implémentation du patron Composite en Javascript

Doser les médicaments avec le Composite

State : un design pattern plutôt abstrait !

Définition

Gestion de deux modes d’affichage

Implémentation du patron State

Connexion des pièces

Check-list

Annexes

Webographie

Glossaire

Index