Listing du fichier tutajax.php
00001 <?php
Pour ne pas voir les numéros de ligne, ajoutez &nl=non à la suite du nom du fichier. |
Retour à la page principale de
(gH)
Listing du fichier tutajax.php
00001 <?php
00002 # (gH) -_- tutajax.php ; TimeStamp (unix) : 30 Décembre 2009 vers 12:31
00003 include("../std7.php") ;
00004 $tg = "Tuteur AJAX / AJAX Tutorial" ;
00005 debutPage($tg,"","","tutajax.js","ghlb.ico") ;
00006 debutSection() ;
00007 ############################################################
00008
00009 h1($tg) ;
00010
00011 p("align_right") ;
00012 gvert("gilles.hunault@univ-angers.fr") ;
00013 finp() ;
00014
00015
00016 $tdm = array() ;
00017 $nbchap = 0 ;
00018 $nbchap++ ; $tdm[$nbchap] = "Qu'est-ce qu'AJAX ?" ;
00019 $nbchap++ ; $tdm[$nbchap] = "Visions et Révisions : XML" ;
00020 $nbchap++ ; $tdm[$nbchap] = "Visions et Révisions côté client : Javascript" ;
00021 $nbchap++ ; $tdm[$nbchap] = "Visions et Révisions côté serveur : fichiers et Php" ;
00022 $nbchap++ ; $tdm[$nbchap] = "Mise en oeuvre et exemples \"à la main\"" ;
00023 $nbchap++ ; $tdm[$nbchap] = "Exemples avec des bibliothèques standard" ;
00024
00025 h1("Table des matières") ;
00026 ol() ;
00027 for ($idc=1;$idc<=$nbchap;$idc++) {
00028 debutli() ;
00029 p() ;
00030 echo href("#chap_$idc",$tdm[$idc]) ;
00031 finp() ;
00032 finli() ;
00033 } ; # fin pour idc
00034 finol() ;
00035 $nbchap = 0 ;
00036
00037 ############################################################
00038 #
00039 # 1. Qu'est-ce qu'AJAX ?
00040 #
00041 ############################################################
00042
00043 $nbchap++ ; h2(aname("$nbchap. ".$tdm[$nbchap],"chap_$nbchap")) ;
00044
00045 p("texte") ;
00046 echo "AJAX est un ensemble de technologies dont le but est de fournir une plus grande réactivité " ;
00047 echo " au niveau des pages Web. Consultez par exemple les deux formulaires " ;
00048 echo href("tutajax1.php","démo 1") ;
00049 echo " et " ;
00050 echo href("tutajax3.php","démo 2") ;
00051 echo ". " ;
00052 echo " Le formulaire 1 utilise deux pages distinctes : une pour la question et une pour la réponse. " ;
00053 echo " Le formulaire 2 utilise une seule page, la même qui sert à la fois pour la question et pour la réponse. " ;
00054 echo " Ce deuxième formulaire passe par Javascript et CSS pour afficher la réponse. N'hésitez pas à " ;
00055 echo " consulter le " ;
00056 finp() ;
00057
00058 ul() ;
00059
00060 debutli() ;
00061 p() ;
00062 echo " le ".href("montresource.php?nomfic=tutajax1.php","code-source")." du ".href("tutajax1.php","formulaire 1").", " ;
00063 finp() ;
00064 finli() ;
00065
00066 debutli() ;
00067 p() ;
00068 echo " le ".href("montresource.php?nomfic=tutajax3.php","code-source")." du ".href("tutajax3.php","formulaire 2").", " ;
00069 finp() ;
00070 finli() ;
00071
00072 debutli() ;
00073 p() ;
00074 echo " le ".href("montresource.php?nomfic=tutajax2.php","code-source")." de la réponse au formulaire 1, " ;
00075 finp() ;
00076 finli() ;
00077
00078 debutli() ;
00079 p() ;
00080 echo " le ".href("montresource.php?nomfic=tutajax3.js","code-source")." du code javascript pour la réponse au formulaire 2." ;
00081 finp() ;
00082 finli() ;
00083
00084 finul() ;
00085
00086 p("texte") ;
00087 echo " Le mot ".b("AJAX")." correspond à la technique utilisée pour le formulaire 2 : pas de rechargement de la page et un " ;
00088 echo " traitement des éléments de la page en Javascript, d'où les deux lettres ".b("JA")."." ;
00089 echo " Le ".b("A")." en début signifie ".em("Asynchrone")." (ce qui sera expliqué dans la section 5) et " ;
00090 echo " le ".b("X")." en fin est mis soit pour ".em("XML")." car au niveau le plus technique, les éléments traités viennent soit d'un document XML " ;
00091 echo " général soit d'un document HTML suffisamment bien formé, c'est-à-dire d'un document XHTML " ;
00092 echo " qui est un document XML particulier, soit pour ".em("XMLHttpRequest")." car c'est l'objet Javascript utilisé." ;
00093 finp() ;
00094
00095 p("texte") ;
00096 echo "Voici deux autres démonstrations d'AJAX (n'hésitez pas à consulter le code-source des pages) : " ;
00097 finp() ;
00098
00099 ul() ;
00100
00101 debutli() ;
00102 p("texte") ;
00103 echo " une " ;
00104 echo href("http://dcabasson.developpez.com/articles/javascript/ajax/ajax-autocompletion-pas-a-pas/fichiers/autocomplete-1.html","liste de suggestions") ;
00105 echo " de mots français issus des 1500 mots de français maîtrisés par les élèves de CE2 ; " ;
00106 finp() ;
00107 finli() ;
00108
00109 debutli() ;
00110 p("texte") ;
00111 echo " un exemple de " ;
00112 # source et détail : http://www.salix.gr/ajax_linked_selectboxes
00113 #echo href("http://www.salix.gr/demos/lsb_demo/example.php","listes liées dynamiquement") ;
00114 #echo " (on voit bien apparaitre \"wait\" dans les listes le temps d'obtenir les informations)." ;
00115 echo href("https://www.devbridge.com/sourcery/components/jquery-autocomplete/","choix de pays").". " ;
00116 finp() ;
00117 finli() ;
00118
00119 finul() ;
00120
00121
00122 p("texte") ;
00123 echo " Le site (en français et qu'on peut télécharger officiellement et gratuitement) " ;
00124 echo href("../selfhtml_fr/","SELFHTML") ;
00125 #echo " dont le contenu détaillé peut être consulté " ;
00126 #echo href("http://www.univ-orleans.fr/webada/html/selfhtml_fr/navigation/contenu.htm","ici") ;
00127 echo " nous semble être une bonne référence pour réviser tous les domaines traités dans cette page (XHTML, DOM, Javascript, Xml...) " ;
00128 echo " avant d'aborder AJAX." ;
00129 finp() ;
00130
00131
00132 ############################################################
00133 #
00134 # 2. Visions et Révisions : XML
00135 #
00136 ############################################################
00137
00138 $nbchap++ ; h2(aname("$nbchap. ".$tdm[$nbchap],"chap_$nbchap")) ;
00139
00140 p("texte") ;
00141 echo "XML n'est pas strictement obligatoire mais lorsqu'on doit gérer un volume important d'informations structurées, ce format s'impose :" ;
00142 echo " d'une part la structure en arbre permet d'accéder rapidement et facilement aux informations ; " ;
00143 echo " d'autre part, XML est un méta-langage en format texte, ce qui se prête bien à une transmission sur le Web." ;
00144 echo " A défaut de lire notre " ;
00145 echo href("tutxml.htm","tuteur XML") ;
00146 echo " nous fournissons ici un bref rappel des propriétés de XML." ;
00147 finp() ;
00148
00149 p("texte") ;
00150 echo " XML n'est pas un langage mais un méta-langage, qui permet de codifier toute information structurée en un fichier " ;
00151 echo " texte facilement lisible sans support extérieur, contrairement aux formats propriétaires. Sa structuration hiérarchique " ;
00152 echo " en arbre lui permet d'inclure des contenus homogènes et hétérogènes, d'intégrer les bases de données aussi bien relationnelles " ;
00153 echo " que hiérarchiques... Par exemple :" ;
00154 finp() ;
00155
00156 pre_fichier("bd.xml","cadre") ;
00157
00158 p("texte") ;
00159 echo "Un fichier XML est un arbre enraciné au sens informatique du terme : il contient un " ;
00160 grouge("élément") ;
00161 echo " racine qui contient d'autres " ;
00162 grouge("éléments") ;
00163 echo " pouvant à leur tour contenir d'autres éléments qui eux-mêmes.... Ces éléments sont " ;
00164 echo " repérés par des balises ouvrantes et fermantes (mais on peut aussi utiliser des éléments auto-fermants). " ;
00165 echo " A chaque élément on peut, si besoin est, associer un ou plusieurs " ;
00166 grouge("attributs") ;
00167 echo " selon le modèle " ;
00168 gvert("variable=valeur") ;
00169 echo ". " ;
00170 echo " Le nom des éléments et le choix de leurs attributs est libre et chacun peut " ;
00171 grouge("inventer sa propre grammaire ") ;
00172 echo " pour " ;
00173 echo " en définir : " ;
00174 finp() ;
00175
00176 ul() ;
00177
00178 debutli() ;
00179 p() ;
00180 echo " le vocabulaire (nom des éléments, noms des attributs, valeurs des attributs...) " ;
00181 finp() ;
00182 finli() ;
00183
00184 debutli() ;
00185 p() ;
00186 echo " la syntaxe (ordre et imbrication des éléments, cardinalité et dépendances fonctionnelles...) " ;
00187 finp() ;
00188 finli() ;
00189
00190 debutli() ;
00191 p() ;
00192 echo " la sémantique (signification des éléments, signification des attributs...) " ;
00193 finp() ;
00194 finli() ;
00195
00196 finul() ;
00197
00198 p("texte") ;
00199 echo " Les règles de construction d'un fichier XML " ;
00200 gbleuf("\"bien formé\"") ;
00201 echo " sont simples et peu nombreuses car il n'y a " ;
00202 grouge(" que des éléments et des attributs ") ;
00203 echo " : " ;
00204 finp() ;
00205
00206 ul() ;
00207
00208 debutli() ;
00209 p() ;
00210 echo " tout élément ouvert doit être fermé ;";
00211 finp() ;
00212 finli() ;
00213
00214 debutli() ;
00215 p() ;
00216 echo " aucun chevauchement entre éléments n'est autorisé (seulement des imbrications) ; " ;
00217 finp() ;
00218 finli() ;
00219
00220 debutli() ;
00221 p() ;
00222 echo " toute valeur d'attribut (même numérique) doit être fournie entre guillemets." ;
00223 finp() ;
00224 finli() ;
00225
00226 finul() ;
00227
00228 p("texte") ;
00229 echo " A cette " ;
00230 gvert("simplicité") ;
00231 echo " d'écriture, il faut ajouter la possibilité de " ;
00232 grouge("vérifier") ;
00233 echo " la structure (" ;
00234 echo "on dit que le fichier est " ;
00235 grouge("valide") ;
00236 echo " s'il est conforme à sa grammaire)," ;
00237 echo " de l'" ;
00238 gbleuf("analyser") ;
00239 echo ", le " ;
00240 gbleuf("parcourir ") ;
00241 echo " et de " ;
00242 gbleuf("transformer") ;
00243 echo " tout ".b("élément").", tout ".b("attribut").", tout ".b("sous-arbre")." via des actions écrites en " ;
00244 echo href("tutxmlpre.htm#xslt","XSL").". De plus, " ;
00245 echo " ces actions ".href("../selfhtml_fr/xml/representation/elementsxslt.htm","XSL")." (qui s'écrivent d'ailleurs en XML), " ;
00246 echo " disposent de toute la richesse des " ;
00247 echo href("../selfhtml_fr/xml/representation/fonctionsxpath.htm","\"fonctions informatiques modernes\"") ;
00248 echo " : itérateurs de structure, expressions régulières, parcours d'arbres paramétrés... " ;
00249 echo " qui s'appliquent sur des " ;
00250 #echo href("http://www.univ-orleans.fr/webada/html/selfhtml_fr/xml/representation/syntaxexpath.htm#position_conditions","axes et des ensembles de noeuds de l'arbre")."." ;
00251 echo b("axes et des ensembles de noeuds de l'arbre")."." ;
00252 echo " Enfin, pour terminer, il faut signaler que tout navigateur sait ouvrir un fichier XML comme " ;
00253 echo href("bd.xml","bd.xml")." et que chaque langage de programmation dispose de fonctions, bibliothèques et sous-programmes ";
00254 echo " pour gérer toutes ces fonctionnnalités de XML." ;
00255 finp() ;
00256
00257
00258 ############################################################
00259 #
00260 # 3. Visions et Révisions client : Javascript
00261 #
00262 ############################################################
00263
00264 $nbchap++ ; h2(aname("$nbchap. ".$tdm[$nbchap],"chap_$nbchap")) ;
00265
00266 p("texte") ;
00267 echo "Pour utiliser AJAX, il faut bien connaitre Javascript car c'est via ce langage qu'on gère les " ;
00268 echo " informations et les éléments de la page, ce qui nécessite de savoir manipuler " ;
00269 echo href("http://www.howtocreate.co.uk/tutorials/javascript/dombasics","DOM")." et de bien connaitre " ;
00270 echo " CSS. On pourra relire au passage la section 6 de notre " ;
00271 echo href("tutjs.htm#sEc6.","tuteur Javascript")." pour réviser l'accès aux noeuds et à la gestion dynamique d'un document." ;
00272 finp() ;
00273
00274 p("texte") ;
00275 echo " Pour profiter pleinement d'AJAX, il faut donc savoir récupèrer l'information à distance sur les serveurs, " ;
00276 echo " la parcourir, l'analyser, la restructurer et l'insérer dynamiquement. Il convient donc de maitriser " ;
00277 echo " les chaines de caractères et les fonctions associées ainsi que les tableaux et les expressions régulières. " ;
00278 echo " En particulier, il est bon se savoir appeler correctement les fonctions suivantes " ;
00279 echo " et de connaitre les propriétés listées : " ;
00280 finp() ;
00281
00282 pre_fichier("tutajax_lstjs.txt","cadre") ;
00283
00284 #void var typeof(var)
00285 /*
00286 p("texte") ;
00287 echo "Quelques fonctions à connaitre : p. 78 the Function constructor " ;
00288 finp() ;
00289
00290 p("texte") ;
00291 echo "Evénements p. 85, objets, timeOut " ;
00292 finp() ;
00293 */
00294
00295 p("texte") ;
00296 echo "On pourra également profiter de la page " ;
00297 echo href("https://developer.mozilla.org/fr/une_r%C3%A9introduction_%C3%A0_javascript","réintroduction") ;
00298 echo " pour découvrir des aspects cachés de Javascript." ;
00299 finp() ;
00300
00301 ############################################################
00302 #
00303 # 4. Visions et Révisions coté serveur fichiers et code Php
00304 #
00305 ############################################################
00306
00307 $nbchap++ ; h2(aname("$nbchap. ".$tdm[$nbchap],"chap_$nbchap")) ;
00308
00309 p("texte") ;
00310 echo "Avec AJAX, on traite tout ce qu'un serveur peut envoyer, soit directement, comme du texte \"brut\", un " ;
00311 echo " fichier HTML ou un fichier XML, un fichier contenant du code JSON, soit transmis par PHP, Ruby ou tout autre script CGI " ;
00312 echo " ou application serveur. Voici quelques exemples de liens pouvant être appelés en AJAX :" ;
00313 finp() ;
00314
00315 ul() ;
00316
00317 debutli() ;
00318 p() ;
00319 echo " du texte brut " ;
00320 echo " comme ".href("tutajax_send1a.txt","send1a.txt")." " ;
00321 echo " ou ".href("tutajax_send1b.txt","send1b.txt").", " ;
00322 finp() ;
00323 finli() ;
00324
00325 debutli() ;
00326 p() ;
00327 echo " du ".href("tutajax_send2.txt","texte à analyser").", " ;
00328 finp() ;
00329 finli() ;
00330
00331 debutli() ;
00332 p() ;
00333 echo " du code XHTML à insérer " ;
00334 echo " comme ".href("montresource.php?nomfic=tutajax_send3a.html","send3a.html")." " ;
00335 echo " ou ".href("montresource.php?nomfic=tutajax_send3b.html","send3b.html").". " ;
00336 finp() ;
00337 finli() ;
00338
00339 debutli() ;
00340 p() ;
00341 echo " du code XML à gérer " ;
00342 echo " comme ".href("montresource.php?nomfic=tutajax_send4a.xml","send4a.xml")." (que des éléments) " ;
00343 echo " ou ".href("montresource.php?nomfic=tutajax_send4b.xml","send4b.xml")." (des éléments et des atributs), " ;
00344 finp() ;
00345 finli() ;
00346
00347 debutli() ;
00348 p() ;
00349 echo " du ".href("tutajax_send5.txt","code JSON fixe à interpréter").". " ;
00350 finp() ;
00351 finli() ;
00352
00353 debutli() ;
00354 p() ;
00355 echo " du ".href("tutajax_send6.php","code JSON généré à la volée en PHP")." " ;
00356 echo " par ".href("montresource.php?nomfic=tutajax_send6.php","ce programme").". " ;
00357 finp() ;
00358 finli() ;
00359
00360 finul() ;
00361
00362 p("texte") ;
00363 echo "La section suivante montre comment traiter tous ces exemples. " ;
00364 finp() ;
00365
00366 ############################################################
00367 #
00368 # 5. Mise en oeuvre et Exemples "à la main"
00369 #
00370 ############################################################
00371
00372 $nbchap++ ; h2(aname("$nbchap. ".$tdm[$nbchap],"chap_$nbchap")) ;
00373
00374 ## -----------------------------------------------------------------------------------------
00375
00376 p("texte") ;
00377 echo "Le principe d'AJAX est simple : on vient charger les contenus ".b("externes")." dont on a besoin au fur et à mesure. " ;
00378 echo " Contrairement à un chargement ".b("synchrone")." de la page où toute la page est chargée " ;
00379 echo " dès le départ, on charge à la demande (en mode ".b("asynchrone")." d'où le premier ".b("A")." de ".b("AJAX").")" ;
00380 echo " le contenu. Le terme asynchrone est sans doute mal choisi car le chargement est en fait à la fois " ;
00381 echo " asynchrone avec le chargement de la page et synchrone " ;
00382 echo " avec les évènements-utilisateurs. Dire \"à la volée\" ou \"à la demande\" serait donc sans doute plus exact." ;
00383 echo " Comme les différentes versions de Javascript des divers navigateurs (IE, FF...) n'implèmentent les " ;
00384 echo " mêmes fonctions associées, il faut recourir à une technique d'interception des ".b("\"exceptions\"") ;
00385 echo " avec " ;
00386 gvert("try/catch") ;
00387 echo " avant d'accèder aux informations que l'on récupère via des propriétés " ;
00388 gvert(" responseText, responseXML") ;
00389 echo " d'un flux correctement attendu, ouvert et envoyé (fonctions " ;
00390 gvert(" open, send, onreadystatechange") ;
00391 echo "... " ;
00392 echo " propriétés " ;
00393 gvert(" readyState, status") ;
00394 echo "...). " ;
00395 echo " Une fois l'information récupérée, il faut l'insérer, la substituer, l'afficher... à l'aide des " ;
00396 echo href("../refcards/javascript_cheat_sheet.pdf","fonctions DOM") ;
00397 echo " qui permettent de manipuler le document." ;
00398 echo " On se méfiera du traitement des noeuds (éléments) d'un document XML qui est différent d'un " ;
00399 echo " navigateur à l'autre. La démonstration est " ;
00400 echo href("tutajaxml.php","ici")."." ;
00401 finp() ;
00402
00403 p("texte") ;
00404 echo "On lira avec attention le fichier " ;
00405 echo href("montresource.php?nomfic=tutajax.js","tutajax.js") ;
00406 echo " qui contient l'ensemble des fonctions utilisées pour les exemples qui suivent " ;
00407 echo " et qui détaillent cette technique." ;
00408 echo " Pour ceux et celles qui préfèrent un exposé plus \"linéaire\", on pourra consulter " ;
00409 echo " les liens suivants : " ;
00410 finp() ;
00411
00412 ul() ;
00413
00414 debutli() ;
00415 p() ;
00416 echo href("http://www.xul.fr/xml-ajax.html","Tutoriel AJAX ")." (xul.fr)," ;
00417 finp() ;
00418 finli() ;
00419
00420 debutli() ;
00421 p() ;
00422 echo href("http://dcabasson.developpez.com/articles/javascript/ajax/ajax-autocompletion-pas-a-pas/","Autocomplétion en AJAX ")." (developpez.com)," ;
00423 finp() ;
00424 finli() ;
00425
00426 debutli() ;
00427 p() ;
00428 echo href("http://www.toutjavascript.com/savoir/xmlhttprequest.php3","XMLHTTPRequest en français ")." (toutjavascript.com)," ;
00429 finp() ;
00430 finli() ;
00431
00432 debutli() ;
00433 p() ;
00434 #echo href("http://www.salix.gr/ajax_linked_selectboxes","Listes dépendantes")." avec AjAX, PHP, MYSQL en anglais (salix.gr)," ;
00435 echo href("https://makitweb.com/jquery-ui-autocomplete-with-php-and-ajax/","autocomplétion BD")." avec AjAX, PHP, MYSQL en anglais," ;
00436 finp() ;
00437 finli() ;
00438
00439 # source et détail : http://www.salix.gr/ajax_linked_selectboxes
00440
00441 debutli() ;
00442 p() ;
00443 echo href("http://www.ibm.com/developerworks/xml/library/x-ffox3/","JavaScript meets XML in Firefox") ;
00444 echo " XSLT via Javascript, en anglais (www.ibm.com/developerworks)." ;
00445 finp() ;
00446 finli() ;
00447
00448 finul() ;
00449
00450 ## -----------------------------------------------------------------------------------------
00451
00452 p("texte") ;
00453 echo "Commençons par insérer du texte brut. Choisissez le personnage dans la liste " ;
00454 echo " suivante et regardez le texte qui apparait dans le cadre grisé : " ;
00455 finp() ;
00456
00457 pvide() ;
00458
00459 form("tutajax4.php","get","onsubmit='ajaxv1(this.personnage) ; return false'") ;
00460 p("centre") ;
00461 echo s_span("Personnage : ","cadre tajaunec") ;
00462 nbsp(3) ;
00463 input_radio("personnage","JC","Jules César","","checked") ;
00464 input_radio("personnage","FP","François Premier") ;
00465 nbsp(3) ;
00466 input_submit("go1") ;
00467 finp() ;
00468 finform() ;
00469
00470 pvide() ;
00471
00472 pre("cadre","ajax1") ;
00473 echo "(au départ, ce cadre ne contient rien...)" ;
00474 finpre() ;
00475
00476 ## -----------------------------------------------------------------------------------------
00477
00478 p("texte") ;
00479 echo "Passons maintenant à la gestion d'une liste de sélection. Choisissez la date dans la liste " ;
00480 echo " suivante et regardez le texte associé : " ;
00481 finp() ;
00482
00483 form("tutajax4.php","get","onsubmit='ajaxv2(this.datehist) ; return false'") ;
00484 p("centre") ;
00485 echo "Date : " ;
00486 nbsp(3) ;
00487 input_select("datehist") ;
00488 input_option("800") ;
00489 input_option("1492") ;
00490 input_option("1515") ;
00491 input_option("1754") ;
00492 input_option("1989") ;
00493 finselect() ;
00494 nbsp(3) ;
00495 input_submit("go2") ;
00496 nbsp(3) ;
00497 input_text("ajax2","description","50","tarose") ;
00498 finp() ;
00499 finform() ;
00500
00501 ## -----------------------------------------------------------------------------------------
00502
00503 p("texte") ;
00504 echo "L'exemple suivant vient remplir le paragraphe suivant dans le document : " ;
00505 finp() ;
00506
00507 form("tutajax4.php","get","onsubmit='ajaxv3(this.abon) ; return false'") ;
00508 p("centre") ;
00509 echo "Je suis : " ;
00510 nbsp(3) ;
00511 input_radio("abon","oui","abonné","","checked") ;
00512 input_radio("abon","non","non abonné") ;
00513 nbsp(3) ;
00514 input_submit("go3") ;
00515 finp() ;
00516 finform() ;
00517
00518 p("texte","ajax3") ;
00519 gbleuf("Ceci est le paragraphe original.") ;
00520 finp() ;
00521
00522 ## -----------------------------------------------------------------------------------------
00523
00524 p("texte") ;
00525 echo "Nous allons maintenant lire le fichier XML \"tout élément \" nommé ".href("tutajax_send4a.xml") ;
00526 echo " pour trouver le prix de l'article choisi : " ;
00527 finp() ;
00528
00529 form("tutajax4.php","get","onsubmit='ajaxv4(this.article) ; return false'") ;
00530 p("centre") ;
00531 echo "Articles : " ;
00532 nbsp(3) ;
00533 input_select("article") ;
00534 input_option("montre") ;
00535 input_option("téléphone") ;
00536 finselect() ;
00537 nbsp(3) ;
00538 input_submit("go4") ;
00539 nbsp(3) ;
00540 input_text("ajax4","prix","50","tarose") ;
00541 finp() ;
00542 finform() ;
00543
00544 ## -----------------------------------------------------------------------------------------
00545
00546 p("texte") ;
00547 echo "La version éléments/attributs de la lecture du fichier XML ".href("tutajax_send4b.xml")." n'est pas plus difficile : " ;
00548 finp() ;
00549
00550 form("tutajax4.php","get","onsubmit='ajaxv5(this.objet) ; return false'") ;
00551 p("centre") ;
00552 echo "Articles : " ;
00553 nbsp(3) ;
00554 input_select("objet") ;
00555 input_option("montre") ;
00556 input_option("téléphone") ;
00557 finselect() ;
00558 nbsp(3) ;
00559 input_submit("go5") ;
00560 nbsp(3) ;
00561 input_text("ajax5","prix","50","tarose") ;
00562 finp() ;
00563 finform() ;
00564
00565 ## -----------------------------------------------------------------------------------------
00566
00567 p("texte") ;
00568 echo "Le texte JSON s'exécute directement (ou plutôt il est facilement évalué) : " ;
00569 finp() ;
00570
00571 form("tutajax4.php","get","onsubmit='ajaxv6(this.jour) ; return false'") ;
00572 p("centre") ;
00573 echo "Rendez-vous : " ;
00574 nbsp(3) ;
00575 input_radio("jour","lundi","lundi","","checked") ;
00576 input_radio("jour","mardi","mardi") ;
00577 input_radio("jour","samedi","samedi") ;
00578 nbsp(3) ;
00579 input_submit("go6") ;
00580 finp() ;
00581 finform() ;
00582
00583 pre("cadre","ajax6") ;
00584 echo "(date non choisie) " ;
00585 finpre() ;
00586
00587 ## -----------------------------------------------------------------------------------------
00588
00589 p("texte") ;
00590 echo "Lorsqu'on essaie de débugger du javascript et de l'AJAX, à part la technique d'une zone d'informations via " ;
00591 echo " un élément <pre> (comme dans la page " ;
00592 echo href("tutajaxml.php") ;
00593 echo " dont le code-source php est " ;
00594 echo href("montresource.php?nomfic=tutajaxml.php","ici") ;
00595 echo " avec son " ;
00596 echo href("montresource.php?nomfic=litdemoxml.js","code javascript") ;
00597 echo " et dont le code xhtml généré est " ;
00598 echo href("montresource.php?nomfic=tutajaxml.txt","là") ;
00599 echo ")" ;
00600 echo " on peut se servir, " ;
00601 grouge("sous Firefox") ;
00602 echo ", de la \"Console d'erreurs\" via le menu \"Outils\", " ;
00603 echo " ou utiliser " ;
00604 echo href("https://addons.mozilla.org/fr/firefox/addon/1843","Firebug") ;
00605 echo ". Signalons au passage qu'une fois activé, Firebug, dans son panneau \"Réseau\", montre " ;
00606 echo " les appels comme on peut le voir sur l'image ci-dessous : " ;
00607 finp() ;
00608
00609 p("centre") ;
00610 echo href("firebug.png",img("firebug.png","firebug",400)) ;
00611 finp() ;
00612
00613 p("texte") ;
00614 echo "Depuis la version 9.5, Opera fournit un outil similaire, nommé ".b("Dragonfly")." qui s'active " ;
00615 echo " via Outils / Avancé / Outils de développeur : " ;
00616 finp() ;
00617
00618 p("centre") ;
00619 echo href("dragonfly.png",img("dragonfly.png","dragonfly",400)) ;
00620 finp() ;
00621
00622 p("texte") ;
00623 echo "Pour les autres navigateurs, on pourra utiliser " ;
00624 echo href("http://getfirebug.com/lite.html","Firebug Lite") ;
00625 echo " que vous pouvez activer sur cette page en cliquant sur le bouton suivant (il faut compter quelques secondes pour " ;
00626 echo " le chargement et le lancement) : " ;
00627 finp() ;
00628
00629 pvide() ;
00630
00631 p("centre") ;
00632 echo ancre(".","activer !","bouton_rectangulaire_sur_fond_bleu","btnhref") ;
00633 finp() ;
00634
00635 # on met la bonne URL pour Firebug Lite meme si elle est non valide au sens de xhtml
00636
00637 jsf("firebuglitebtn.js") ;
00638
00639 pvide() ;
00640
00641 ############################################################
00642 #
00643 # 6. Exemples avec des bibliothèques standard
00644 #
00645 ############################################################
00646
00647 $nbchap++ ; h2(aname("$nbchap. ".$tdm[$nbchap],"chap_$nbchap")) ;
00648
00649 p("texte") ;
00650 echo "Il existe différentes bibliothèques pour faire de l'AJAX (et plus généralement pour développer en Javascript), dont : " ;
00651 echo href("http://www.dojotoolkit.org/","Dojo").", " ;
00652 echo href("http://jquery.com/","JQuery").", " ;
00653 echo href("http://www.prototypejs.org/","Prototype")." et " ;
00654 echo href("http://mochikit.com/","Mochikit")."." ;
00655 finp() ;
00656
00657 p("texte") ;
00658 echo "Ces bibliothèques ou " ;
00659 echo href("http://fr.wikipedia.org/wiki/".urlencode("Cadre_d'application_AJAX"),"\"frameworks\"") ;
00660 echo " fournissent du code Javascript prêt à l'emploi qui sait gérer les divers " ;
00661 echo " navigateurs et fournit des fonctions de \"haut niveau\" " ;
00662 echo "(comme la " ;
00663 echo href("http://dcabasson.developpez.com/articles/javascript/ajax/documentation-prototype-1.4.0/#L1","fonction \$") ;
00664 echo " de Prototype" ;
00665 echo " ou ".href("http://docs.jquery.com/How_jQuery_Works#Launching_Code_on_Document_Ready","celle")." de jQuery" ;
00666 echo ")" ;
00667 echo " pour simplifier les " ;
00668 echo " requêtes, mises en forme, actions... de façon à offir, via un navigateur, " ;
00669 echo " de vraies applications." ;
00670 echo " En plus des ".href("http://www.info.univ-angers.fr/pub/richer/ensl3iwe.php","pages AJAX") ;
00671 echo " de notre collègue J. M. RICHER " ;
00672 echo " (dont le ".href("http://www.info.univ-angers.fr/pub/richer/ens/l3info/web/examples/dom5/index.html","fameux exemple des CD").")," ;
00673 echo " on pourra consulter, pour avoir une idée " ;
00674 echo " des possibilités offertes, les liens qui suivent : " ;
00675 finp() ;
00676
00677 ul() ;
00678
00679 debutli() ;
00680 p() ;
00681 echo "la page des ".href("http://demos.dojotoolkit.org/demos/","démonstrations")." de Dojo," ;
00682 echo " dont ".href("http://dojocampus.org/explorer/","Feature Explorer"). " avec une mention spéciale " ;
00683 echo " pour ".href("http://dojocampus.org/explorer/#Dijit_Menu_Popup%201","Dijit/Menu").", " ;
00684 echo " les pages ".href("http://dojocampus.org/explorer/#Dijit_Tree","Dijit/Tree")." et " ;
00685 echo href("http://demos.dojotoolkit.org/demos/flashCards/","Dojo.schools()")."." ;
00686 finp() ;
00687 finli() ;
00688
00689 debutli() ;
00690 p() ;
00691 echo " avec jQuery : une ".href("http://docs.jquery.com/UI/Progressbar","barre de progressions") ;
00692 echo ", un ".href("http://docs.jquery.com/UI/Accordion","accordéon")." (il faut peut-êre cliquer " ;
00693 echo " sur View Source avant de cliquer sur Demo), la liste des UI (" ;
00694 echo href("http://jqueryui.com/demos/","User Interfaces").") dont ".href("http://jqueryui.com/demos/droppable/","droppable")."." ;
00695 finp() ;
00696 finli() ;
00697
00698 debutli() ;
00699 p() ;
00700 echo href("http://prototypejs.org/learn/introduction-to-ajax","Ajax")." via Prototype " ;
00701 echo " à l'aide des objets ". href("http://prototypejs.org/api/ajax/request","Ajax.Request")."," ;
00702 echo " et ".href("http://prototypejs.org/api/ajax/updater","Ajax.Updater")."." ;
00703 finp() ;
00704 finli() ;
00705
00706 debutli() ;
00707 p() ;
00708 echo " les ".href("http://mochikit.com/demos.html","exemples")." de MochiKit dont une solution à la fonction ".b("alert")." : " ;
00709 echo " le panneau de \"log\" ou ".href("https://mochi.github.io/mochikit/doc/html/MochiKit/LoggingPane.html","Logging Pane")." en anglais " ;
00710 echo " (cliquer sur le lien ".b("Inline LoggingPane")." puis sur les différentes ".b("Logging Actions").")." ;
00711 finp() ;
00712 finli() ;
00713
00714 finul() ;
00715
00716 p("texte") ;
00717 echo "Pour conclure, on remarquera que malheureusement tous ces ensembles de fonctions ne produisent pas systématiquement " ;
00718 echo " du code XHTML valide, que ce soit pour la grammaire transitionnelle ou stricte, ce qui peut être dommageable " ;
00719 echo " à un site qui se veut exemplaire en termes d'accessibilité, de respect des standards W3C... " ;
00720 echo " De même, la notion de contenu dynamique fourni à la demande est antinomique avec le référencement de contenu." ;
00721 echo " Là encore, on voit bien que le développement Web va encore changer dans les prochaines années..." ;
00722 finp() ;
00723
00724 #####################################################
00725
00726 pvide() ;
00727
00728 p() ;
00729 echo href("montresource.php?nomfic=tutajax.php","Code-source PHP de cette page","orange_stim nou")." ; " ;
00730 echo href("montresource.php?nomfic=tutajax.js"," code Javascript utilisé","bleu nou")."." ;
00731 finp() ;
00732
00733 ############################################################
00734
00735 finSection() ;
00736 finPage() ;
00737 ?>
Pour ne pas voir les numéros de ligne, ajoutez &nl=non à la suite du nom du fichier.