javascript pour ajax - portailweb.universita.corsica€¦ · dans le cas d'ajax, javascript...

Université de Corse - IUT LPM - M24.1 – AJAX et PHPa

1

AJAX et PHPIUT LPM - M24.1

Capocchi [email protected]://spe.univ-corse.fr/capocchiweb

JavaScript pour AJAX


2

Introduction

La principale fonction des langages de script coté client est de déplacer des fonctionnalités serveur vers le client.

Dans le cas d'AJAX, Javascript est le moyen idéal de demander des données au serveur et de les insérer via DHTML.

JavaScript constitue donc avec (X)HTML une technique essentielle de l'environnement AJAX.


3

Sommaire

JavaScript pour AJAX

Ajout de code JavaScript à une page Web

Tester si JavaScript est activé sur le client

Principales structures de JavaScript

Fonctions, procédure et méthodes

Objets dans JavaScript

Création d'objets

Gestion des exceptions

DOM de la perspective de JavaScript

Appels directs de fonctions à partir de JavaScript

Conclusion

4


Notation directe

<script language=''javascript''></script>

Une balise <script> peut être placée à n'importe quel endroit d'une page HTML.

Les commentaires sont présent au cas où le navigateur est incapable d'interpréter le code (de plus en plus rare!).

Un conteneur <script> peut inclure optionnellement un conteneur <noscript> dans lequel est placer le contenu alternatif à afficher lorsque JavaScript est désactivé.


5


Liaison d'un fichier JavaScript externe

<script language=''javascript'' src=''monJS.js''></script>

Plus efficace que la notion directe:

Permet d'appliquer les mêmes fonctionnalités à plusieurs pages.

Permet une simplification de la gestion du code.

Permet d'obtenir une séparation entre la structure et les fonctionnalités.

Le conteneur <script> doit être toujours vide (sans espace).


6


Référence en ligne

<a href=''javascript:alert('La réponse est 42')''>

Inconvénient: le code devient vite illisible !

Elle se limite souvent aux élément <a> et <area>.

Les références en ligne sont généralement remplacées par des gestionnaires d'événements car ils offrent plus de possibilités qu'un simple clic de l'utilisateur.


7


Teste pour savoir si votre code vas effectivement être exécuté chez le visiteur de votre site:

On exploite le faite que le code ne sera pas exécuté en cas de désactivation.

Exemple: vous implémentez avec JavaScript une redirection vers une autre URL (page d'acceuil), et si elle marche, c'est qu'il est activé. Sinon redirection vers une version non Ajax de votre page !

Les redirections sont également possibles aves HTML sans JavaScript:

<meta http-equiv=''refresh'' content=''delai'';URL=[cible]''>

L'astuce consiste à exécuter la redirection HTML après la redirection JavaScript si cette dernière échoue.

8


Exemple:

<html><head><meta http-equiv=''refresh'' content=''5;URL=sansAJAX.html''></head><script langage=''javascript''></script><body><a href=''sansAJAX.html''> si la redirection ne fonctionne pas, cliquez ici pour accéder à une version du site sans AJAX</a></body></html>


9


La syntaxe de la plupart des structures JavaScript est tirée du langage C.

Javascript est sensible à la casse.

Variables et types de données

Typage faible: à la volée, en même temps que la variable reçoit une valeur.

Peut changer pendant l'exécution du script.

Cependant, il existe des types de données prédéfinis:

Boolean (AJAX=true;)

Number (a=123.455;)

Object (objRequete = new XMLHttpRequest();)

String (a=''Felix'';)


10


Les tableaux

Lorsqu'un navigateur charge une page, il place dans des tableaux accessibles via JavaScript les éléments de même type.

Déclaration:

a = new Array(30);

Remplissage:

a[0]=1;a[1]=1;...a[29]=30;


11


Les instructions

Une instruction JavaScript peut occuper plusieurs lignes dans l'éditeur et se termine toujours par un point-virgule.

Sortes d'instructions:

Les blocs sont délimité par les accolades et contiennent plusieurs instructions

Les expressions: poids=98+3;

Les commentaires possède la même syntaxe qu'en C.

Les instructions conditionnelles: if, if-else et switch-case.

Les boucles: while, do-while et for

Les instructions de saut: break et continue


12

Fonction, procédure et méthodes

Pour appeler une fonction ou méthode Javascript à partir d'une page Web, vous pouvez utiliser:

un gestionnaire d'événements,

Un gestionnaire d'événements propre à JavaScript,

Un Script.

Une fonction ou procédure n'est pas exécutée lors de sont chargement mais uniquement lorsqu'elle est appelée.

Fonctions personnalisées

déclaration

function [nom] ([liste de paramètres]){... instructions}


13

Fonction, procédure et méthodes

Lorsqu'une fonction est censée retourner une valeur, vous devez le spécifier grâce au mot clé return.

JavaSript permet les appels récursifs souvent utilisés dans AJAX.


14

Objets dans JavaScript

Javascript est basé objet (se n'est pas un langage objet !)

On utilise la notation pointée pour se référer à des méthodes et des attributs d'un objet:

objet.nom_méthode(argument)

ex.: objRequete.open('get','lander.php?ou='+i,true);

Création explicite avec constructeur:

var [objet] = new [déclaration d'objet] ([paramètres optionnels])

ex.: objRequete = new ActiveXObject(''MSXML2.XMLHTTP''); objRequete = new XMLHttpRequest(); objDate = new Date();


15


Une exception correspond à une situation qui demande une réaction immédiate;

Saisie d'information inattendues,

Opération de calcul erronée (division par 0),

Échec de création d'objet...

En l'absence d'une réaction adaptée, l'exécution ne peut se poursuivre normalement et doit être interrompue.

Dans JavaScript, les exceptions sont:

Soit gérées automatiquement par l'interpréteur,

Soit créées par le programmeur lorsque c'est nécessaire.


16


Exception sous forme d'objets

Une exception se manifeste dans un script sous la forme d'une erreur d'exécution pouvant être décrite de manière assez standardisée.

ECMAScript Edition 3 (i.e JavaScript 1.5), dispose d'un objet erreur nommée Error.

Des instances de ces objets sont crées en tant qu'exceptions lorsqu'une erreur connue survient:

EvalError,

RangeError,

ReferenceError,

TypeError,

SyntaxeError....


17


Interception d'exceptions

Déclaration

try{[instructions critiques]

}catch ([expression]) {

[mesure à prendre]}

Un bloc try doit être suivi au minimum d'un bloc catch.

Pour permettre une gestion efficace des exceptions, les instructions critiques doivent toujours être exécutées au sein d'une structure try-catch.


18


Fonction universelle de création d'un objet XMLHttpRequest

La gestion des exceptions est essentiel pour pouvoir écrire une fonction de création d'un objet XMLHttpRequest universelle est portable.

La logique est la suivante:

Soit la création de l'objet XMLHttpRequest réussit

Soit elle échoue (navigateur ou analyseur XML incompatible)

Auquel cas cela produit une exception que nous interceptions.


19


Fonction universelle de création d'un objet XMLHttpRequest

Function creeXMLHttpRequestObject(){var objRequete = null;try {

objRequete = new ActiveXObject(''Microsoft.XMLHTTP'');}catch(Error){

try {objRequete = new ActiveXObject(''MSXML2.XMLHTTP'');

}catch(Error){

try {objRequete = new XMLHttpRequest();

}catch(Error){

alert(''Impossible de créer l'objet XMLHttpRequest);}

}}return objRequete;

}


20

Gestion d'objets personnalisés

JavaScript n'est pas un langage orienté objet:

Il ne supporte pas l'écriture de class ni le principe d'héritage.

JavaScript permet de créer dans certaines limites des objets:

Vous devez spécifier une déclaration d'objet,

Vous devez créer une instance de l'objet partir de cette déclaration.

Syntaxe de déclaration et de création d'une instance:

function [nom de la fonction](){.... [description des propriétés]

}var [instance de l'objet] = new [nom de la fonction]


21


Mot clé this

Il permet de désigner l'objet courant.

Lorsque vous déclarez une variable de la forme this.[variable] dans une méthode constructeur, cette notation représente un accès à une propriété de l'objet crée par la méthode:

exemple:

function creeXMLHttpRequestObjet() {this.objRequete = new

ActiveXObject(''Microsoft.XMLHTTP''));}


22


Création d'objet

L'exemple suivant inclut dans la déclaration d'objet CreeObjetAjax() une référence à la fonction creeXMLHttpRequestObject() au moyen de this:

function CreeObjetAjax(){this.creeXMLHttpRequestObject=

creeXMLHttpRequestObect;}

Création d'un objet à partir d'une déclaration d'objet personnalisé er appel d'une méthode:

o = new CreeObjetAjax();objRequete = o.creeXMLHttpRequestObject();


23


La plupart des objets que vous employer forme une bibliothèque d'objets n'appartenant pas à JavaScript mais au modèle DOM.

Lorsqu'un navigateur compatible avec DOM charge une page, il indexe tous les éléments connus et identifiables d'après leur type, leurs propriétés, et leur position dans le document.

Ces éléments (ou objet) sont ensuite accessibles à des scripts par le biais de tableaux spéciaux appelés collections ou par leur nom s'ils possède un attribut name.

Exemple: Accès au troisième formulaires d'une page Web:

window.document.forms[2];


24


Les éléments d'un formulaire sont accessibles:

window.document.forms[2].elements[0];

Dans la cas d'objet évidents, la notation pointée peut être abrégée:

Au lieu d'écrire window.prompt() ou window.alert(), on emploi simplement prompt() ou alert()

document au lieu de window.document


25


Quelques objets disponibles dans JavaScript:

document: représente une page Web.

event: généré par des événements cotés client.

form: contient une référence à un objet de type formulaire.

frame: contient une référence à une frame.

history: contient des informations sur les URL visitées.

image: contient une référence à une image.

link: contient une référence à un hyperlien.

location: permet d'accéder à la barre d'adresse.

window: contient les informations d'état de la fenêtre.

navigator: contient des informations sur le navigateur.


26


Collections disponibles dans JavaScript

anchors: contient des références aux ancres d'une page.

applets: contient des références aux applets Java.

elements: contient des références aux éléments d'un formulaire:

Ces éléments sont représenté par:

Button, CheckBox, FileUpload, Hidden, Password, Radio, Reset, Select, Submit, Text, Textarea.

forms: contient des références aux formulaires.

images: contient des références aux images.

options: contient des références aux options d'un élément de formulaire de type Select.

plugins: contient des références aux plugins installés.


27


Techniques JavaScript importantes

Accès à un formulaire

L'interaction se déroule au travers d'un formulaire obtenu par:window.document.forms[numéro formulaire]

ouwindow.document.forms[name_formulaire]

outhis.form

1er forme avantageuse au milieu d'une boucle ou lorsque le formulaire ne possède pas de paramètre name.

2ième forme plus lisible et tolérante aux changements de structure de la page.

Attention: Vous ne pouvez pas accéder à un formulaire au moyen de JavaScript tant que le navigateur n'a pas traité la structure HTML et crée les objets (position des instructions JS)


28


Soumission et réinitialisation d'un formulaire

Submit(): fonction permettant à un objet formulaire d'envoyer ces informations au serveur.

Elle est appelée lorsque l'utilisateur valide le formulaire par:

Un hyperlien, un bouton, autre gestionnaire d'événement...

Exemple:<html><body><form action= '' '' method='' get '' ><input name=''a''><br><input type=''button'' value=''OK''

onClick=''window.document.forms[0].submit()''></form></body></html>


29

Appels directs de fonctions à partir de JS

Invocation explicite d'un gestionnaire d'événements

Le codage de l'appel du gestionnaire d'événement se fait à partir d'un script (plus dans une balise HTML).

Le gestionnaire est libéré du contexte HTML et est directement lié à JavaScript.

Exemple:<html><script language=''JavaScript''>

function mFunction() {alerte(''Bienvenue'' );

}</script><body><form name=''mF''><input type=''button'' name=''mB'' value=''OK''></form><script language=''JavaScript''>

document.mF.mB.onclick=mFonction</script></body></html>

mFonction devient

une propriété d'objet:

sans parenthèses


30



L'objet event

L'objet event contient des informations sur un événement qui s'est produit quelque par dans la page.

Les conséquences de ce mécanisme sont les suivantes:

La surveillance d'événement est programmée directement dans un script (lien avec HTML rompu).

Il est possible d'implémenter une gestion d'événement globale.

Exemple: Un utilisateur clique dans une zone de la page. L'objet event produit contient alors les information:

La touche de la souris activée;

La touche éventuellement pressée: Ctrl, Alt, Alt Gr, Maj

Les coordonnées du pointeur de la souris


31



Réaction à un objet event

Lorsqu'un objet event est créé, il est répercuté tout au long de la hiérarchie d'objets en amont du document.

Exemple: Si vous cliquez sur ''Cliquez'': une fenêtre 'span' s'affiche, puis une fenêtre 'h1'... jusqu'à la fenêtre 'body'.<html><body onclick=''alert('body')''><div onclick=''alert('div')''><h1 onclick=''alert('h1')''><span onclick=''alert('span')''>Cliquez</span></h1></div></body></html>

Si vous cliquez dans une autre zone de la page, vous ne recevez que la notification pour body.


32



Enregistrement d'un listener

Il s'agit de l'emploi d'un « écouteur » dont l'affectation est possible pour certains objets spécifiques:

Un événement survient au niveau d'un objet (source de l'événement).

L'objet événement est toujours transmis à une cible (d'après le DOM) par le processus de remonté.

Si un listener a été associé sur une cible, il est déclenché.

La gestion de l'événement et la réaction à déclencher sont décidées au niveau du listener.


33



Enregistrement d'un listener

Dans la version 2 du modèle d'événements DOM:Element.addEventListener(''type_événement'',fonct

ion,capture)

''type_événement'' = click ou mouseover par exemple.

Le paramètre fonction est une référence à la fonction à appeler.

Capture est une va leur booléenne qui indiquesi la fonction agit comme capteur.


34

Bibliographie

AJAX et PHP, Ralph Steyer, CampusPress, Pearson Education.

javascript pour ajax - portailweb.universita.corsica€¦ · dans le cas d'ajax, javascript...

Documents