Bonjour à tous les zéros,

Pour les chanceux qui sont déjà en vacances (et les autres) je vous informe que l'équipe du forum javascript de developpez.com lance un concours du 2 juin jusqu'au 30 juin.

Franchement, le thème est très sympa. Si vous avez le temps lancez vous, ça sera très instructif (j'espère pouvoir participer, mais j'ai des exams tout le mois de juin…)

Citation : Concours JS

(…)

Sujet
Le but de ce défi est de réaliser un parseur / afficheur de flux RSS 2.0.

Vous devrez donc fournir deux fonctions distinctes.

* La première devra récupérer, parser et organiser différents flux RSS fournis. Nous vous en proposons trois pour le défi, mais votre script devra pouvoir en gérer un nombre indéterminé, votre solution pourra bien évidemment utiliser plus de flux.
Par exemple, si vous souhaitez intégrer un flux qui impose des difficultés techniques que vous avez intégrées et que vous voulez l'intégrer, cela sera pris en considération !
* La seconde devra, à partir des données récupérées dans la première, afficher les résultats dans une page XHTML.

(…)

Have fun !

Ca sent le netvibes-like ça

Ca n'a rien de fondamentalement difficile. C'est chargement via XMLHttpRequest puis traitement dom et affichage. Par contre, ce qui est chiant c'est que ce soit cross-domain sans autorisations d'accès (donc exit XHR² et XDR). Il faut donc avoir une page PHP qui se chargera de récupérer de flux et de le refiler à JS.

Le défi s'adresse-t-il aux débutants, amateurs, professionnels ou gourous ?

Un flux RSS c'est du XML, non ?
Peut-on traiter le XML avec le JS sans passer par les Regex (citation de Thunderseb "traitement dom" voir plus haut) ?

L'affichage, rien de plus simple, c'est de l'esthétique.

Merci pour l'info.

Bah le XML est explorable via le DOM. Tu peux donc obtenir les types de noeuds, tagnames, etc.

En fonction de ça, tu dois créer du HTML pour mettre en page.

1. Le Xhr marche pas sur des urls distantes, si?
2. Ils foutent ça en période de Bac eux -_-

1. Si, mais pas compatible pour tous les navigateurs (juste Firefox 3.5 et IE8 (oui oui, IE8)), mais les flux RSS ne disposent pas des autorisations nécessaires. Mais on peut récupérer les flux avec du PHP, PHP appelé via XHR (oopas).


Je vais essayer de faire ce concours. Je suis en train de me demander ce qui serait le plus ridicule à mettre, ou tout de moins le plus ésotérique. J'ai même pensé à récupérer le flux avec PHP et le transformer en JSON et le lire avec la méthode du Dynamic Script Loading .


J'ai d'autres idées de ce genre que je vais tenter de mettre en œuvre pour faire un truc à la dois débile et intéressant, et surtout original. M'en fous de gagner, j'ai juste envie de pondre un truc pas banal pour les correcteurs .

T'es sur que FX 3.5 accepte ?

En tout cas il accepte pas les urls du genre http://rps.tiller.fr:5899/
Meme en étant sur le domaine rps.tiller.fr =D

Qu'est ce que sont des URLS distantes ?
Si je fais une requête ajax pour aller chercher http://www.google.fr/ je pense pouvoir le récupérer (ou alors j'ai rien compris ).

tit_toinou, tu penses mal =)

Sauf sur IE8 et FX3.5(?) tu peux pas récupérer les urls distantes.
"/truc/machin.php" => OK
"../machin.truc" => OK
"http://machin.truc/chose.bidul" => Pas OK

@Tiller : il faut que le fichier que tu essaies de lire soit "autorisé à être lu", via un Access-Control, http://www.w3.org/TR/access-control/ .

Ton exemple en réponse à tit_toinou est mauvais, ce ne sont pas des URL distantes mais des URl relatives.

Tous mes espérances d'application du JavaScript à des tâches vraiment intéréssantes envolées !

On pourrait pas appeler une page PHP genre redirection.php?http://www.google.fr après on prend $_SERVER['QUERY_STRING'] (ou un truc du genre, me souvient plus comment ça s'appelle) et on fait header('Location: '+$_SERVER['QUERY_STRING']); et bim bam boum problème réglé ?
Non, ça serait trop beau pour être vrai ..

Au pire on faire un require / include tout ça, mais ça bouffe des ressources serveurs.

C'est caca include et require pour faire ça. Autant utiliser readfile, car readfile se contente d'afficher la page sans chercher à interpréter un code PHP qui n'existe pas -> gain de perfs. Mais globalement, ça reste un système lourd, mais viable.

Et (espoir) le coup d'une simple redirection marcherait-il ?

Le concours m'a l'air sympa mais je risque de ne pas pouvoir participer à cause d'un projet en cours (zUploader) et le Bac. Cependant, je pense pouvoir apporter ma pierre à l'édifice de ceux qui voudront se lancer dans l'aventure.

Il y a quelques jours j'ai codé un petit script pour zUploader permettant de remplacer la fonction GM_xmlhttpRequest(). Elle permet donc de récupérer des informations sur une page web et ce de façon cross-domain, il s'agit de Dynamic Script Loading.

Voilà le code complet :

/*
  Réalisé par Johann Pardanaud (Nesquik69).
  Site web : http://www.plune.fr
*/

var DSLRequest = {
  id: 0,
  functionsStorage: [],
  timers: [],
  
  call: function(userParams) {
    // Initialisation des paramètres.
      this.id++;
      
      params = {
        url: 0,
        onload: function() {},
        delay: 5000,
        onerror: function() {
          alert('Le serveur ne semble pas répondre, veuillez réessayer ultérieurement.');
        }
      };
      
      for(var i in userParams) {
        params[i] = userParams[i];
      }
    
    // Appel à l'url souhaitée à l'aide d'une balise <script />.
      if(typeof params.url == 'string' && params.url.length > 0) {
        var script = document.createElement('script');
          script.id = 'DSL_id_'+ this.id;
          script.type = 'text/javascript';
          
          // Ci-dessous on passe l'id de la requête dans une variable globale GET.
            script.src = params.url + ((params.url.indexOf('?') == -1) ? '?' : '&') + 'dsl_id='+ this.id;
            
        document.getElementsByTagName('body')[0].appendChild(script);
      } else { return false; }
    
    // Enregistrement de la fonction de callback.
      if(typeof params.onload == 'function') {
        this.functionsStorage[this.id] = params.onload;
      }
    
    // Mise en place du temps limite de l'appel à l'url souhaité.
      if(typeof params.delay == 'number' && params.delay >= 1000) {
        var objRef = this;
        
        this.timers[this.id] = setTimeout((function(id, onerror) {
          return function (){
            objRef.callback(false, id);
            onerror();
          };
        })(this.id, params.onerror), params.delay);
      }
    
    return true;
  },
  
  callback: function(response, id) {
    // Suppression du timer.
      if(typeof this.timers[id] != 'undefined') {
        clearTimeout(this.timers[id]);
        delete this.timers[id];
      }
    
    // Suppression de la fonction de callback.
      if(typeof this.functionsStorage[id] != 'undefined' && response) {
        this.functionsStorage[id](response);
        delete this.functionsStorage[id];
      }
    
    // Suppression de la balise script.
      var script = document.getElementById('DSL_id_'+ id);
      script.parentNode.removeChild(script);
  }
};

Son fonctionnement est assez simple, il vous suffit de faire un appel à la page souhaitée comme pour un appel XMLHttpRequest avec la méthode GET, voici un exemple :

DSLRequest.call({
  url: 'http://www.adresse_web.com/fichier.php', // L'url de la page à appeler.
  delay: 10000, // Le délai en ms avant que l'appel ne soit abandonné et que la fonction onerror ne soit appelée.
  onload: function(response) { // Fonction exécutée lorsque le chargement est terminé. Elle reçoit en paramètre la réponse du serveur.
    alert(response);
  },
  onerror: function() { // Fonction appelée lorsque le délai d'appel est écoulé.
    alert("Le serveur n'a pas pu être contacté");
  }
});

Du côté PHP, la page recevra un identifiant à renvoyer en deuxième argument dans la fonction de callback. Le premier argument est la réponse du serveur (ça peut-être n'importe quoi... fonction, objet, chaîne de caractères, etc...) :

DSLRequest.callback("La réponse trop lol §", <?php echo $_GET['dsl_id']; ?>);

Any questions ?

Perso j'ai déjà du mal à récupérer/afficher le flux RSS via PHP (foutu encodages) mais je vais quand même essayer de participer...

cerium, j'avais fait ça un jour, je sais que c'est moche, et je sais plus si sa marche:

<?php
function animeParse($string)
{
	$a = array('à','á','â','ã','ä','ç','è','é','ê','ë','ì','í','î','ï','ñ','ò','ó','ô','õ','ö','ù','ú','û','ü','ý','ÿ','À','Á','Â','Ã','Ä','Ç','È','É','Ê','Ë','Ì','Í','Î','Ï','Ñ','Ò','Ó','Ô','Õ','Ö','Ù','Ú','Û','Ü','Ý');
	
	foreach ($a as $v) {
		$c[] = utf8_encode($v);
		$d[] = utf8_decode($v);
	}
	
	$string = str_replace($d, $a, $string);
	$string = str_replace($c, $a, $string);
	return $string;
}
?>

En fait j'ai quasiment réussi à base d'utf8_encode et remplacement de l'encoding (du flux) avec une régex, par contre j'ai un problème sur ce caractère là : ` (l'accent du 7 par le normal qui ne passe pas correctement :s).

Mais bon je vais tenter avec ton code

petit up

J'ai quasi fini. Il me reste un truc a régler sous IE6/7 et ce sera bon . Ah non, et faut que je commente le code :/ .

A peine commencé que je suis bloqué. J'ai réussi à charger le xml par ajax (ouaaah ), je fais pour tester si ça marche objet.title = xml.getElementsByTagName('title')[0].nodeValue; et ça foire .
Je suis en train de googler comment parcourir un document XML mais je trouve rien. Je suis dans une impasse .

xml.documentElement.getElementsByTagName('title')[0].nodeValue; ?

xml.getElementsByTagName('title')[0].innerHTML? =o

innerHTML sur du XML ?

déjà essayé documentElement et ça marche pas .

Autre truc que je comprends pas, Bovino dit

Citation : Bovino sur le Concours JS/AJAX

La première devra récupérer, parser et organiser différents flux RSS fournis.

Nos deux fonctions qu'on devra créer seront juste pour un flux à la fois, après c'est notre page web qui doit faire en sorte qu'on puisse organiser (supprimer, ajouter, actualiser etc..) plusieurs flux ?
Merci !

Citation : Golmote

xml.documentElement.getElementsByTagName('title')[0].nodeValue; ?

xml.documentElement.getElementsByTagName('title')[0].firstChild.data;

Ouais ça marche (même sans documentElement !), pourrais-tu me dire pourquoi doit-on utiliser firstChild.data ?

Autre question sur le concours, j'imagine qu'il est interdit d'utiliser un convertisseur XML -> JSON ?

Si tu le fais toi même y'a pas de pb je pense

Non sans blagues
J'ai fini le principal, reste plus qu'a trouver un design attrayant (ça fait parti du concours ça aussi non ?) et à essayer sur le max de flux RSS voir s'il n'y a pas de bogues.