Oct.18

[JS] Surcharge de parametres JavaScript

C’est en lisant le code source JS d’Atlas que j’ai decouvert la surcharge de parametres Javascript. Ok cela vous parrez peut être idiot mais comme dirait un certain B.Watterson : L’idiotie est l’essence des hommes et je n’ai d’honte à apprendre 🙂

Alors voila, je lisais le code et un moment donné je vois une fonction du type :

Qui était appellé par une ligne de type :

A ce moment j’ai senti mes petits neuronnes s’exciter dans tous les sens avec la question : Je ne comprends pas, ma fonction attend deux arguments et moi je lui en passe quatre.. Qu’est ce qu’il se passe ? 🙂
Dans le code de la fonction j’ai vu à plusieurs reprises le mot arguments. En fouillant un peu plus, impossible de trouver la déclaration de cette variable. Serait-ce une variable propre à JS ???
J’ai donc créé une page html entierement vide pour faire un alert() dans une fonction de cette fameuse variable arguments. Suspense jusqu’a l’execution de la page : vais-je tomber sur un undefined ?? => Et ben non, une belle alerte avec inscrit [object Object] et mes petits neuronnes reprirent une activité normale 🙂

En effet, tous les parametres passés à une fonction javascript sont contenu dans un tableau (Array) nommé arguments.
Exemple simple :

Vous affichera un beau message :

Et pourtant ma fonction ne prend aucun parametre explicitement 🙂 Genial non ?

Dev

Oct.09

[Atlas] Appeller une fonction JS après un UpdatePanel

J’ai passé ma journée d’hier a chercher comment appeler une fonction JS (coté client donc) après l’update d’un UpdatePanel avec un rendu partiel du ScriptManager (enablepartialrendering= »True »).

J’ai enfin trouvé et en fait c’est vraiment tout bête. Il suffit d’ajouter dans votre Page_Load la ligne :

Exemple :

Et surtout n’oubliez pas le dernier parametre à True dans le cas d’un enablepartialrendering= »True » à votre ScriptManager, car c’est lui que j’avais oublié et qui m’a fait chercher de longues heures 🙂

Dev,Atlas

Mar.16

AJAX, XMLHttp et le cache !!

En developpant le projet dotnet (lire mon post du 26/02/06) en XHTML/JS à la sauce AJAX, je me suis heurté à un problème de cache !
En effet que l’on utilise l’objet XMLHttpRequest pour Firefox & Co ou l’objet de IE (Microsoft.XMLHTTP), on appelle la méthode open et send pour récuperer un fichier XML par le code :

Le problème de cela, c’est qu’une fois le XML téléchargé, le navigateur le met dans son cache ! Si par la suite vous modifiez votre XML, votre application web ne tiendra pas compte des modifications même en rechargant la page (F5) ce qui est un peu embêtant !
Pour remedier à cela, une technique consiste a appeler la methode setRequestHeader pour définir le Cache-Control à no-cache par le code :

Le problème, c’est que ca marche PAS 😀 Enfin du moins sur pas mon Firefox…. ^^

La technique que j’ai implémenté est de passer des parametres uniques dans l’URL de notre fichier XML !
Je m’explique, les adresses URL http://monserveur/monfichier.xml?id=1 et http://monserveur/monfichier.xml?id=2 retourne tous les deux le même fichier à savoir monfichier.xml, ici les parametres n’ont aucune influence coté serveur mais pour le coté client, le navigateur (IE,FF,..) pense que ce sont 2 fichiers differentes car les URL ne sont pas identique et donc on contourne le problème de cache !!
Personnellement, j’utilise pour cela la fonction getTime() de l’objet Javascript Date qui retourne le nombre de millisecondes depuis le 1er Janvier 1970 ! On obtient bien un parametre unique a moins de déregler son horloge au millieme de seconde près ^^.
Le code final:

Elle est pas belle vie ?? ^^ 🙂

Perso,Dev

Feb.26

AJAX

Dans le cadre de mon projet Dotnet, je me suis mis a utiliser AJAX ^^ C’est pourquoi, je vais brievement vous exposer ce qu’est AJAX avec un petit exemple d’utilisation car je sais que tout le monde préfere la pratique que la théorie !!

AJAX késako ??
Non non je ne fais pas le ménage à l’eau de javel ^^ AJAX c’est tout simplement l’avenir du Web (concept Web 2.0) ! AJAX pour Asynchronous JavaScript And XML (en francais : « XML et Javascript asynchrones ») est une méthode de développement des applications Web !
En effet tous les échanges client<>serveur se font en arrière plan dans des fichiers XML pilotés avec des scripts JS !

Sans AJAX : actuellement, quand vous êtes sur une page A d’un site et que vous demandez la page B, votre navigateur web (IE, Firefox, ..) renvoie une requête HTTP demandant la page B, le serveur vous reponds en vous envoyant tout le code HTML (+ JS, images, CSS, …) de cette page !

Deux inconvenients :

  • on renvoie une requete HTTP, c’est long, le navigateur devient tout blanc, faut le temps qu’il charge la nouvelle page !!!
  • et surtout, c’est bête de tout recharger car en général sur un site, la difference entre 2 pages n’est que le contenu; les menus, l’habillage graphique (design) reste identique !!

Avec AJAX : maintenant grâce a AJAX on resoud ces deux problemes :

  • Avec navigateur charge tout le code HTML de la page A (+ images, css, et scripts JS nottament pour gérer l’AJAX)
  • Quand vous demandez la page B, votre navigateur ne bouge pas, c’est un script JS qui derrière va venir telecharger un fichier XML contenant juste le contenu de la novelle page !

Deux avantages :

  • Impression d’instantané, le contenu arrive sans voir le chargement !
  • Impression d’instantané renforcé par le fait que seul le fichier XML contenant le contenu de la nouvelle page transite par le reseau, ce qui reduit enormement les echanges client<>serveur (le design n’est chargé qu’une seule fois pour la 1er page !)

En une phrase, AJAX va donc révolutionner les applications Web 🙂

Pour plus d’info sur AJAX :http://fr.wikipedia.org/wiki/AJAX
Des exemples AJAX: http://fr.wikipedia.org/wiki/AJAX#Liens_externes

Bon passons à la pratique

Pour cet exemple, on nous allons créer une page qui liste les éléves de ma classe 🙂 Pour cela, nous créons un fichier XML contenant les données :

Vous remarquerez que les ID, Sexe et Age sont contenu dans les attributs de la balise studient alors que les noms sont dans la balise ! (ps: désolé pour les autres éléves, je n’ai pas tout mis, ca veux pas dire que je ne vous aimes pas :-)) L’on nommera ce fichier : eleves.xml

Créons maintenant la page HTML de base doctypé en XHTML 1.0 Strict :

Cette page contient une fonction Javascript : update() qui contiendra tout le code JS pour l’ AJAX, une balise DIV nommé contenu où sera affiché la liste des éléves ainsi qu’un bouton nommé update qui appelera notre fonction update().

Il nous reste plus qu’a ecrire le code de notre fonction update() ! Commencons par definir quelques variables que nous initialiserons :

La variable browser nous permet de savoir si l’on utilise IE ou Firefox (and co comme Opera, etc…) ! En fonction du navigateur, l’on utilise soit l’ActiveX Microsoft XMLHTTP et XMLDOM pour IE ou XMLHttpRequest et createDocument pour les amis de Firefox !

Nous allons maintenant télécharger le XML grace a notre objet objXMLHTTP et stocker dans notre objet objXML grace au code :

Il nous reste plus qu’a exploiter le contenu du XML pour l’afficher ! Pour cela nous allons définir une variable out qui contiendra le code HTML a afficher dans notre balise DIV contenu ainsi qu’une variable nbEleves pour contenir le nombre d’eleves afin d’en faire une boucle.

Nous allons maintenant faire une boucle pour le nombre d’eleves de notre fichier XML et remplir notre variable out par le code :

Vous remarquerez que pour récuperer le contenu d’une balise (et non ses attributs) soit ici le nom de l’eleve, cela differt selon le navigateur que l’on utilise. Sous IE nous utilisons la proprieté text alors que sous Firefox & Co c’est la proprieté textContent.

Il nous reste plus qu’a afficher notre variable out dans notre DIV :

J’ai rajouté l’heure, cela est biensur facultatif !!

Vous pouvez vous amusez à modifier le contenu dans notre fichier XML (eleves.xml) et cliquez sur le bouton « Mise a jour AJAX » de notre page pour voir que celle ci se met a jour sans pour autant faire un allé-retour sur le serveur 🙂

Cet exemple est certe très simple mais ouvre les pleins de voie, a vous de faire marcher votre imagination… Moi je dis, vive AJAX 😀

(Page complete : http://sebastien.warin.fr/…/ajax.txt)

Perso,Dev