Discussion :

[kkt8]

Bonjour,

J'ai suivi le Tuto https://marcautran.developpez.com/tu...vascript/json/
pour comprendre comment ça fonctionne tout ça.

cela ne marche pas, j'ai rien suite au open()
je met une alert("1") avant c'est ok
mais apres plus rien.

J'ai peut-etre un contexte particulier : mon html est lu par Eclipse (welcome page de mon appli eclipse)
J'ai un problème de cross-domain quand je debug via Chrome mais est-ce pas l'effet chrome justement qui ne s'attends pas à avoir tout en local ?
Mais tout est en local : mon html et mon json

Y aurait-il un moyen d'avoir le code d'erreur de retour de open() ou quelque chose du genre ?
Merci

[Doksuri]

le cross domain est l'erreur "type" quand on commence a faire de l'ajax
tu ne peux pas requeter un autres domaine (pour des raisons de securite) sauf si le domaine en question l'autorise

sinon, comme d'hab.... sans code on ne peut pas faire grand chose

[kkt8]

Hello,

J'ai testé le même code avec un ulr sur un serveur extern et c'est ok, donc je pense que c'est le fait que mon json soit en local ...
ce qui est balo !
Une idée de comment faire avec un json local ?

Voici mon code:

Code HTML :

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<section class="main__title-second"><h2>What's new</h2></section>
 
	<script type="text/javascript" src="test.js"></script>
	<script type="text/javascript">
            // pointeur sur la position de l'article courant dans le catalogue
            var index = 0;
            // initialisation du catalogue
            var catalogue = [];
 
            function executerRequete(callback) {
 
                // on vérifie si le catalogue a déjà été chargé pour n'exécuter la requête AJAX
                // qu'une seule fois
                if (catalogue.length === 0) {
                        
                    // on récupère un objet XMLHttpRequest
                    var xhr = getXMLHttpRequest();
                    
                    // on réagit à l'événement onreadystatechange
                    xhr.onreadystatechange = function() {
                    
                        // test du statut de retour de la requête AJAX
                        if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                            // on désérialise le catalogue et on le sauvegarde dans une variable
                            catalogue = JSON.parse(xhr.responseType);
                            // on lance la fonction de callback avec le catalogue récupéré
                            callback();
                        }
                    }
                    
                    // la requête AJAX : lecture de data.json
                    xhr.open("GET", "test.json", true);
                    xhr.send();
                } else {
                    // on lance la fonction de callback avec le catalogue déjà récupéré précédemment
                    callback();
                }
            }
 
            function lireSuivant() {
                
                // connaitre le nombre d'articles dans le catalogue
                var longueur = catalogue.length;
                alert(longueur);
                // manipulation du DOM pour afficher les caractéristiques de l'article
                document.getElementById("nom").innerHTML = catalogue[index].nom;
                document.getElementById("desc").innerHTML = catalogue[index].desc;
                document.getElementById("qte").innerHTML = catalogue[index].qte;
                document.getElementById("prix").innerHTML = catalogue[index].prix;
                if (index < longueur - 1) {
                    index++;
                }
            }
            
            function lirePrecedent() {
                document.getElementById("nom").innerHTML = catalogue[index].nom;
                document.getElementById("desc").innerHTML = catalogue[index].desc;
                document.getElementById("qte").innerHTML = catalogue[index].qte;
                document.getElementById("prix").innerHTML = catalogue[index].prix;
                if (index > 0) {
                    index--;
                }
            }
 
            // on initialise la lecture au premier élément
            executerRequete(lireSuivant);
        </script>
		<section  class="container">
            <article name="données" class="well form-inline pull-left col-lg-5">
                <legend>Outils au catalogue</legend>
                <label>Nom</label> : <label id = "nom"></label><br>
                <label>Description</label> : <label id = "desc"></label><br>
                <label>Quantité</label> : <label id = "qte"></label><br>
                <label>Prix</label> : <label id = "prix"></label><br>
                <button class="btn btn-primary" type="submit" onclick="executerRequete(lireSuivant)"><span class="glyphicon glyphicon-play"> </span> Lecture avant</button>
                <button class="btn btn-primary" type="submit" onclick="executerRequete(lirePrecedent)"><span class="glyphicon glyphicon-step-backward"> </span> Lecture arrière</button>
            </article>
        </section>

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
function getXMLHttpRequest() {
    var xhr = null;
    if (window.XMLHttpRequest || window.ActiveXObject) {
        if (window.ActiveXObject) {
 
            try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch(e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        } else {
 
            xhr = new XMLHttpRequest(); 
 
        }
    } else {
        alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
        return null;
    }
    return xhr;
}

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
22
23
24
25
26
27
28
29
30
31
32
[
    {
        "nom": "marteau",
        "desc": "pour enfoncer des clous",
        "qte": 87,
        "prix": 9
    },
    {
        "nom": "cle de 12",
        "desc": "pour les boulons du camion",
        "qte": 25,
        "prix": 12
    },
    {
        "nom" : "tournevis" , 
        "desc" : "pour demonter la table" , 
        "qte" : 26 , 
        "prix" : 6
    },
    {
        "nom": "pinces multiples",
        "desc": "pour bricoler le dimanche",
        "qte": 2,
        "prix": 17
    },
    {
        "nom" : "scie a metaux" , 
        "desc" : "pour couper la barriere" , 
        "qte" : 78 , 
        "prix" : 41
    }
]

C'est vraiment copier/coller du tuto... mais c'était sensé être la première étape.
J'ai essayé de mettre le path en entier mais ko aussi.


cela ne marche que si le json est sur un serveur.
Merci
Chris

[Doksuri]

cela ne marche que si le json est sur un serveur.

pour des questions de securite, on ne peu pas recup un fichier local

apres, je t'invites a utiliser le fetch() plutot que le XMLHttpRequest https://developer.mozilla.org/fr/doc...PI/Using_Fetch (qui est une methode plus moderne )

[kkt8]

et ça marcherait avec un fichier local ?

[NoSmoking]

Bonjour,

Mais tout est en local : mon html et mon json

donc pas de soucis avec le « cross domain » mais les navigateur ne te laisserons faire que si tu passes par un serveur local comme WAMP.

getXMLHttpRequest()

Comme dit ta fonction date un peu et pourrait largement être simplifiée ou remplacé par la méthode fetch() si tu peux te passer d'IE.

Une idée de comment faire avec un json local ?

Comme dit le plus simple est de passer par un serveur local, cependant tu peux le réaliser en modifiant les paramètres du navigateur ou via la ligne de commande.

Pour Firefox,

• ouvrir la page de configuration en tapant dans la barre d'adresse : « about:config » ;
• mettre le paramètre privacy.file_unique_origin à false.

Pour Chrome :

• lancer Chrome avec le flag --allow-file-access-from-files, par exemple : « "C:\Program\Chrome\Application\chrome.exe" --allow-file-access-from-files », le chemin est à adapter bien sûr, voir clic droit -> Propriétés sur l'icône du bureau si tu es sous Window.

Le mieux restant le serveur local qui te sera toujours utile