jquery lecture fichier xml

Version imprimable

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:

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:

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 :

Citation:

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.

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:

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:

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 );
});

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:

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:

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); }); } }); }

21/12/2014, 22h31
danielhagnoul

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.
21/12/2014, 22h57
Pifon

La solution exposé dans le tuto est donc obsolète ?

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

Merci encore pour votre aide.
22/12/2014, 11h37
danielhagnoul

Citation:

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. :aie:

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.