IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

jquery lecture fichier xml


Sujet :

jQuery

  1. #1
    Membre régulier
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juillet 2014
    Messages
    78
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Moselle (Lorraine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Juillet 2014
    Messages : 78
    Points : 71
    Points
    71
    Par défaut jquery lecture fichier xml
    Bonsoir à tous,

    je viens vers vous car j'ai un problème pour récupérer les données de mon fichier XML local.

    Mon but est de stocker les url de mes images à afficher dans un .xml et de les récupérer avec jquery et les placer dans un tableau.
    voici la structure de mon fichier XML:
    Code xml : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <image id = "0">
    	<src>data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQwQ=</src>
    </image>
    <image id = "1">
    	<src>data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAA</src>
    </image>
    <image id = "2">
    	<src>https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSDSca-dmesioXtWMF0rwuTYuDHHBFZ0dvzJ_JtT5wa6xY7fNG6</src>
    </image>
    <image id = "3">
    	<src>https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRPMgm6bPvQGUryRvF13kQwVe-uS4a_o8LnKvl8b5w1QaCSfFjkRQ</src>
    </image>
    <image id = "4">
    	<src>https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQuzEC8OWj95Qkcaq_ekn-RNXmJ_f4rqnCibnIWtLUAYzQmZbFy</src>
    </image>
    .....

    Pour récupérer les données j'ai utilisé ce code jquery :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    function recupImage(){
    	 $.ajax( {
    		type: "GET",
    		url: "images.xml",
    		dataType: "xml",
    		success: function(xml){
    			$(xml).find('image').each(function(){
    				var id = $(this).attr('id');
    				var src = $(this).find('src').text();
    				tabImages.push(src);
    				//alert(src);
    			});
    		}
    	});	
    }
    le tableau tabImages est déclaré en variable global mais il n'est pas rempli par la ligne : "tabImages.push=src;" alors que la variable src contient bien les données.

    De plus je suis obligé de d'afficher ma page web avec wamp serveur , si je fais "launch in chrome" dans notepadd++ j'obtiens une erreur :

    XMLHttpRequest cannot load file:///C:/wamp/www/JS/.... Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
    je ne comprends pas ou est le probleme car j'ai suivi le tuto pour lire du xml avec jquery...

    Une aide serrait grandement appréciée.

    D'avance merci.

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut
    Il y a longtemps que les restrictions sur l'origine des fichiers sont en vigueur. En local, il faut toujours passer par un serveur, même pour un fichier HTML, j'utilise XAMPP.

    Pour le reste, je ne vois pas de problème dans mon test.

    N'oubliez pas que JS est asynchrone, vous ne pouvez pas utiliser l'array avant de l'avoir rempli.

    Code XML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <?xml version="1.0" encoding="utf-8"?>
    <images>
        <image src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQwQ="/>
        <image src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAA"/>
        <image src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSDSca-dmesioXtWMF0rwuTYuDHHBFZ0dvzJ_JtT5wa6xY7fNG6"/>
        <image src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRPMgm6bPvQGUryRvF13kQwVe-uS4a_o8LnKvl8b5w1QaCSfFjkRQ"/>
        <image src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQuzEC8OWj95Qkcaq_ekn-RNXmJ_f4rqnCibnIWtLUAYzQmZbFy"/>
    </images>

    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    $( function(){ // forme abrégée de $(document).ready(function(){
     
        function recupImage( ){
            var tab = [],
                jqXHR = $.get( "images.xml" );
     
    	jqXHR.done( function( data, textStatus, jqXHR ){
     
                // succès de la transaction, on doit traiter le contenu de data
                //console.log( data, textStatus, jqXHR );
     
                $( data ).find( "image" ).each( function( i, item ){
     
                    // debug, console, touche F12
                    //console.log( i, item, $( item ).attr( "src" ) );
     
                    tab.push(  $( item ).attr( "src" ) );
                });
     
    	});
     
    	jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
     
                // échec de la transaction, gérer la catastrophe
                console.log( jqXHR, textStatus, errorThrown );
     
    	});
     
    	jqXHR.always( function( jqXHR, textStatus ){
     
                // la transaction est terminée
                //console.log( jqXHR, textStatus );
     
                // Utilisation de tab
                if ( tab.length > 0 ) {
                    console.log( tab.join( "\n" ) );
                }
    	});
        }
     
        setTimeout( function(){
            recupImage();
        }, 5000 );
    });

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre régulier
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juillet 2014
    Messages
    78
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Moselle (Lorraine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Juillet 2014
    Messages : 78
    Points : 71
    Points
    71
    Par défaut
    Merci d'avoir répondu danielhagnoul.

    Et merci pour votre code que je vais garder!

    Donc en fait mon problème venait du fait que j’appelais ma fonction qui remplissait le tableau mais je voulais afficher un element de ce tableau avant que la fonction ai fini de le remplir.

    Voici le code que j'avais :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    var tabImages= [];
    $(document).ready(function(){
    	nbrRandom();
    	recupImage();
    	alert(tabImages[0]);
    });
    function recupImage(){
    	$.ajax( {
    		type: "GET",
    		url: "images.xml",
    		dataType: "xml",
    		success: function(xml){
    			$(xml).find('image').each(function(){
    				var id = $(this).attr('id');
    				var src = $(this).find('src').text();
    				tabImages.push(src);
    				//alert(src);
    			});
    		}
    	});	
    }
    --> j'appel ma fonction puis à la ligne suivante je demande l'affichage de l'élément[0] du tableau, hors il n'est pas encore initialisé.
    Je pensais que l’exécution du alert() ce faisait uniquement lorsque l'exécution de la fonction été fini.

    quand je fais comme ça, ca marche :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    var tabImages= [];
    $(document).ready(function(){
    	nbrRandom();
    	recupImage();
    	setTimeout( function(){ alert(tabImages[0]);}, 5000 );
    });
    function recupImage(){
    	$.ajax( {
    		type: "GET",
    		url: "images.xml",
    		dataType: "xml",
    		success: function(xml){
    			$(xml).find('image').each(function(){
    				var id = $(this).attr('id');
    				var src = $(this).find('src').text();
    				tabImages.push(src);
    			});
    		}
    	});	
    }

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut
    Très mauvaise idée (échec ou lenteur de la transaction AJAX), l'utilisation de l'objet différé jqXHR est la méthode recommandée par jQuery. Les autres solutions sont obsolètes depuis plusieurs versions et elles vont disparaître un jour, peut-être dans la branche 3 de jQuery.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  5. #5
    Membre régulier
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juillet 2014
    Messages
    78
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Moselle (Lorraine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Juillet 2014
    Messages : 78
    Points : 71
    Points
    71
    Par défaut
    La solution exposé dans le tuto est donc obsolète ?

    Il faut donc utiliser la méthode jquery.get() ?


    Merci encore pour votre aide.

  6. #6
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut
    Si vous avez un lien vers un tuto ou autre je suis preneur... sans vouloir abuser de votre bonté.
    Voir le lien vers la FAQ dans ma signature.

    jQuery évolue très vite, lorsqu'on a fini d'écrire un tutoriel ou une FAQ on a déjà, au mieux, une version de retard.

    Beaucoup de méthodes obsolètes sont encore présentes pour des raisons de rétrocompatibilité, mais je crois qu'il va y avoir "un grand nettoyage" dans les futures versions 3.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. lecture fichier XML
    Par bhahmed dans le forum C++Builder
    Réponses: 5
    Dernier message: 18/09/2006, 09h40
  2. [C#-XML] - Problème de lecture fichier XML
    Par Gloups dans le forum Windows Forms
    Réponses: 9
    Dernier message: 08/08/2006, 01h40
  3. Lecture fichier xml aux caracteres accentués
    Par LFC dans le forum Modules
    Réponses: 2
    Dernier message: 13/02/2006, 20h45
  4. Réponses: 3
    Dernier message: 09/12/2005, 18h42
  5. [SAX] Problème lecture fichier xml
    Par BernardT dans le forum Format d'échange (XML, JSON...)
    Réponses: 3
    Dernier message: 07/07/2005, 19h11

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo