Tester une API

Bonjour,

Si tu avais fait un copier/coller du tuto.. tu n'aurais pas oublié une ligne visiblement :-)

<script src="../js/ajax.js"></script>

Bien entendu.. tu as récupéré le fichier ajax.js que tu as mis dans le répertoire de ton site .... comme indiqué ici :

Copiez le fichierajax.jsissu du chapitre précédent dans le répertoire

J'ai fais les modifications et ça ne fonctionne toujours pas... ça me donne comme avant c'est à dire ça :




Voici le code index.html

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Utiliser des API</title>
</head>

<body>
    <h1>Derniers articles</h1>
    <div id="articles">
    </div>

    <h1>Le Premier Ministre</h1>
    <div id="premMin">
    </div>

    <h1>La météo à Lyon</h1>
    <div id="meteo"></div>

    <<script src="../js/ajax.js"></script>
 <script src="../js/cours.js"></script>
</body>

</html>

Le code cours.js

var premMinElt = document.getElementById("premMin");
// Accès aux informations publiques sur le Premier Ministre
ajaxGet("https://www.data.gouv.fr/api/1/organizations/premier-ministre/", function (reponse) {
    var premierMinistre = JSON.parse(reponse);
    // Ajout de la description et du logo dans la page web
    var descriptionElt = document.createElement("p");
    descriptionElt.textContent = premierMinistre.description;
    var logoElt = document.createElement("img");
    logoElt.src = premierMinistre.logo;
    premMinElt.appendChild(descriptionElt);
    premMinElt.appendChild(logoElt);
});

Et ajax.js

// Exécute un appel AJAX GET
// Prend en paramètres l'URL cible et la fonction callback appelée en cas de succès
function ajaxGet(url, callback) {
    var req = new XMLHttpRequest();
    req.open("GET", url);
    req.addEventListener("load", function () {
        if (req.status >= 200 && req.status < 400) {
            // Appelle la fonction callback en lui passant la réponse de la requête
            callback(req.responseText);
        } else {
            console.error(req.status + " " + req.statusText + " " + url);
        }
    });
    req.addEventListener("error", function () {
        console.error("Erreur réseau avec l'URL " + url);
    });
    req.send(null);
}

Ah oui j'ai oubliée ma cervelle aujourd'hui ça fonctionne merci mais par exemple la sncf publie des API aussi j'aurais voulu essayer mais impossible donc je récupère le code grâce à post man je récupère le code de ce lien "https://api.sncf.com/v1". Ensuite je crée un dossier qui ce trouve sur le bureau je le nomme test2 dans ce dossier je crée un fichier HTML ce nommant test.html

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Utiliser des API</title>
</head>

<body>
    <h1>Derniers articles</h1>
    <div id="articles">
    </div>

    <h1>Le Premier Ministre</h1>
    <div id="premMin">
    </div>

    <h1>La météo à Lyon</h1>
    <div id="meteo"></div>

    <script src="teste.js"></script>

</html>

Et ça ne fonctionne pas :(

Veuillez indiquer présicément votre problème, nous faisons de notre mieux pour y répondre. Je répond à vos question de 19h à 23h la semaine :)

Alors j'ai copiè ce que vous m'avais donner je l'ai placer dans "cours.js" (pour essayer bien-sûr)

cours.js

//url de l'api ciblée
var url_de_api = "https://api.sncf.com/v1";

// Accès aux informations publiques sur le Premier Ministre
var premMinElt = document.getElementById("premMin");

ajaxGet(url_de_api, function (reponse) {
    var repJson = JSON.parse(reponse);

    // Ici .. tu peux mettre le code de traitement que tu veux pour cette reponse...
    // par exemple : affiche dans la CONSOLE du navigateur la réponse   
     console.log(repJson);
  
});

index.html

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Utiliser des API</title>
</head>

<body>
    <h1>Derniers articles</h1>
    <div id="articles">
    </div>

    <h1>Le Premier Ministre</h1>
    <div id="premMin">
    </div>

    <h1>La météo à Lyon</h1>
    <div id="meteo"></div>

    <script src="cours.js"></script>
</html>

Et ça ne fonctionne pas...

La console me dit ça :

Ah non je ne savais pas mais le "ajax.js" je le laisse tel quels ?

Alors j'ai exactement la même erreur que la dernière fois

Voici index.html

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Utiliser des API</title>
</head>

<body>
    <h1>Derniers articles</h1>
    <div id="articles">
    </div>

    <h1>Le Premier Ministre</h1>
    <div id="premMin">
    </div>

    <h1>La météo à Lyon</h1>
    <div id="meteo"></div>

    <script src="cours.js"></script>
	<script src="ajax.js"></script>
</html>

Voici cours.js

var premMinElt = document.getElementById("premMin");
// Accès aux informations publiques sur le Premier Ministre
ajaxGet("https://api.sncf.com/v1", function (reponse) {
    var premierMinistre = JSON.parse(reponse);
    // Ajout de la description et du logo dans la page web
    var descriptionElt = document.createElement("p");
    descriptionElt.textContent = premierMinistre.description;
    var logoElt = document.createElement("img");
    logoElt.src = premierMinistre.logo;
    premMinElt.appendChild(descriptionElt);
    premMinElt.appendChild(logoElt);
});

Et voici ajax.js

// Exécute un appel AJAX GET
// Prend en paramètres l'URL cible et la fonction callback appelée en cas de succès
function ajaxGet(url, callback) {
    var req = new XMLHttpRequest();
    req.open("GET", url);
    req.addEventListener("load", function () {
        if (req.status >= 200 && req.status < 400) {
            // Appelle la fonction callback en lui passant la réponse de la requête
            callback(req.responseText);
        } else {
            console.error(req.status + " " + req.statusText + " " + url);
        }
    });
    req.addEventListener("error", function () {
        console.error("Erreur réseau avec l'URL " + url);
    });
    req.send(null);
}

Ça ne fonctionne toujours pas voici les fichiers :

index.html

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Utiliser des API</title>
</head>

<body>
    <h1>Derniers articles</h1>
    <div id="articles">
    </div>

    <h1>Le Premier Ministre</h1>
    <div id="premMin">
    </div>

    <h1>La météo à Lyon</h1>
    <div id="meteo"></div>

    <script src="ajax.js"></script>
	<script src="cours.js"></script>
</html>

cours.js

//url de l'api ciblée
var url_de_api = "https://api.sncf.com/v1";

// Accès aux informations publiques sur le Premier Ministre
var premMinElt = document.getElementById("premMin");

ajaxGet(url_de_api, function (reponse) {
    var repJson = JSON.parse(reponse);

    // Ici .. tu peux mettre le code de traitement que tu veux pour cette reponse...
    // par exemple : affiche dans la CONSOLE du navigateur la réponse   
     console.log(repJson);
  
});

et ajax.js

// Exécute un appel AJAX GET
// Prend en paramètres l'URL cible et la fonction callback appelée en cas de succès
function ajaxGet(url, callback) {
    var req = new XMLHttpRequest();
    req.open("GET", url);
    req.addEventListener("load", function () {
        if (req.status >= 200 && req.status < 400) {
            // Appelle la fonction callback en lui passant la réponse de la requête
            callback(req.responseText);
        } else {
            console.error(req.status + " " + req.statusText + " " + url);
        }
    });
    req.addEventListener("error", function () {
        console.error("Erreur réseau avec l'URL " + url);
    });
    req.send(null);
}

Alors j'ai toujours la même erreur c'est vraiment bisard et pour la console je fait touche "Ctrl"+flèche haut+"J"


Veuillez indiquer présicément votre problème, nous faisons de notre mieux pour y répondre. Je répond à vos question de 19h à 23h la semaine :)

Ca fonctionne super content !! Merci beaucoup mais je comprend pas quand je met une autre api qui demande un num d'uttilisateur que j'ai bien rentrèe ca fonctionne avec cette API "https://api.sncf.com/v1/coverage/sncf/places?q=Paris" ca ne fonctionne pas je dois bien rentrée ma clé mais je dois la mettre dans le code j'ai ça comme erreur avec cette API qui ne demande pas de code "https://api.sncf.com/v1/coverage/sncf/journeys?from=admin:fr:75056&to=admin:fr:69123&datetime=20170501T232424"