XMLHttpRequest in einer SinglePage

  • JavaScript

Es gibt 12 Antworten in diesem Thema. Der letzte Beitrag () ist von vico255.

    XMLHttpRequest in einer SinglePage

    Ich habe soetwas noch nie gemacht und frage mich ob sowas überhaupt funktioniert, bzw hab ich es bisher noch nicht zum laufen bekommen.
    Ist es möglich in einer HTML mit JS sich die Preise über die API der folgenden Seite zu besorgen?

    Link (coinmarketcap.com)

    JS ist Neuland aber man lernt ja nie aus also bitte nicht so hart ins Gericht gehen :P

    coinmarketcap.com/api/documentation/v1/
    In Arbeit...

    Sicher geht das. Wenn du die Seite runtergeladen hast, kannste mit dem Text machen was du willst.

    JavaScript-Quellcode

    1. <!DOCTYPE html>
    2. <html lang="de">
    3. <head>
    4. <meta charset="utf-8">
    5. <title>XmlHttp</title>
    6. </head>
    7. <body>
    8. <p id="display"></p>
    9. <script>
    10. var request = new XMLHttpRequest();
    11. request.open("GET", "http://worldtimeapi.org/api/timezone/CET.txt", true);
    12. request.send();
    13. request.onreadystatechange = function ()
    14. {
    15. if (request.readyState == 4 && request.status == 200)
    16. {
    17. document.getElementById("display").innerHTML = request.response;
    18. }
    19. };
    20. </script>
    21. </body>
    22. </html>

    Danke erstmal.
    Dein Beispiel funktioniert, allerdings passiert bei mir nichts.

    HTML-Quellcode

    1. var http = new XMLHttpRequest();
    2. var url = 'https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest';
    3. http.setRequestHeader('X-CMC_PRO_API_KEY', 'XXX');
    4. var params = 'start=1&limit=5000&convert=USD';
    5. http.open('GET', url, true);
    6. http.send(params);
    8. //Send the proper header information along with the request
    10. http.onreadystatechange = function () {//Call a function when the state changes.
    11. if (http.readyState == 4 && http.status == 200) {
    12. document.getElementById('contentText').innerText = http.responseText
    13. }
    14. }
    In Arbeit...

    Mach mal einen POST request anstatt eines GET. Zeile 5 in deinem Code.

    Bei der Bedingung in zeile 11, auch mal den http status ausgeben, wenn != 200.

    Könnte ja auch ein anderer Status-code sein. Lass dir auch mal in der Console die readystates/status's ausgeben, musst du alles mal debuggen.

    HTML-Quellcode

    1. <!DOCTYPE html>
    2. <html lang="de">
    3. <head>
    4. <meta charset="utf-8">
    5. <title>XmlHttp</title>
    6. </head>
    7. <body>
    8. <p id="display"></p>
    9. <script>
    10. var request = new XMLHttpRequest();
    11. request.open("POST", "http://localhost/nsaknowsit/test.php", true);
    12. request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    13. request.send("a=arg1&b=arg2")
    14. request.onreadystatechange = function ()
    15. {
    16. console.log("Request-ReadyState: " + request.readyState);
    17. if(request.readyState == 4)
    18. {
    19. console.log("HTML-Status-Code: " + request.status);
    20. if(request.status == 200)
    21. {
    22. document.getElementById("display").innerHTML = request.response;
    23. }
    24. }
    25. };
    26. </script>
    27. </body>
    28. </html>

    Edit @vico255 hab den Code nochmal geändert, wie auch noch einen Hinweis hinzugefügt, wie du das ein wenig debuggen kannst.

    Dieser Beitrag wurde bereits 4 mal editiert, zuletzt von „Takafusa“ ()

    Ich danke dir erstmal für deine Hilfe bisher. Er gibt mir Status 0 aus.
    Aber es müsste soweit alles passen. Müsste...

    PHP-Quellcode

    1. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    2. <head>
    3. <meta charset="utf-8" />
    4. </head>
    5. <body>
    6. <p id="contentText">Test</p>
    7. <script>
    8. var request = new XMLHttpRequest();
    9. request.open("GET", "https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest", true);
    10. request.setRequestHeader('X-CMC_PRO_API_KEY', 'XXX'); // XXX wird natürlich durch den richten Key ersetzt
    11. request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    12. request.setRequestHeader('Accepts', 'application/json')
    13. request.send("start=1&limit=5000&convert=USD")
    15. request.onreadystatechange = function () {
    16. document.getElementById("contentText").innerHTML = request.status;
    17. if (request.readyState == 4) {
    18. //document.getElementById("contentText").innerHTML = request.status;
    19. if (request.status == 200) {
    20. document.getElementById("contentText").innerHTML = request.response;
    21. }
    22. }
    23. };
    24. </script>
    25. </body>
    26. </html>




    Das ist das Beispiel der Doku:
    Spoiler anzeigen

    PHP-Quellcode

    1. [/b]const rp = require('request-promise');
    2. const requestOptions = {
    3. method: 'GET',
    4. uri: 'https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest',
    5. qs: {
    6. 'start': '1',
    7. 'limit': '5000',
    8. 'convert': 'USD'
    9. },
    10. headers: {
    11. 'X-CMC_PRO_API_KEY': 'b54bcf4d-1bca-4e8e-9a24-22ff2c3d462c'
    12. },
    13. json: true,
    14. gzip: true
    15. };
    17. rp(requestOptions).then(response => {
    18. console.log('API call response:', response);
    19. }).catch((err) => {
    20. console.log('API call error:', err.message);
    21. });[b]
    In Arbeit...

    vico255 schrieb:

    request.open("GET", "https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest", true);


    Du machst ja immer noch einen GET-Request anstatt eines POST. Und verwende doch die Console für Ausgaben, F12 beim firefox um die zu öffnen. Probvier es mit POST ich kann das auf dieser Seite nicht testen, hab keinen Key.

    HTML-Quellcode

    1. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    2. <head>
    3. <meta charset="utf-8" />
    4. </head>
    5. <body>
    6. <p id="contentText">Test</p>
    7. <script>
    8. var request = new XMLHttpRequest();
    9. request.open("POST", "https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest", true);
    10. request.setRequestHeader('X-CMC_PRO_API_KEY', 'XXX'); // XXX wird natürlich durch den richten Key ersetzt
    11. request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    12. request.setRequestHeader('Accepts', 'application/json')
    13. request.send("start=1&limit=5000&convert=USD")
    15. request.onreadystatechange = function () {
    16. if (request.readyState == 4) {
    17. if (request.status == 200) {
    18. document.getElementById("contentText").innerHTML = request.response;
    19. }
    20. }
    21. };
    22. </script>
    23. </body>
    24. </html>

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „Takafusa“ ()

    @vico255
    Ich habe mir jetzt einen Key besorgt und getestet, die Seite gestattet es nicht via JS drauf zuzugreifen. Ich bekomme einen CORS Fehler, siehe Anhang. Von daher ist es wichtig die Console zu nutzen welche ich dir empfohlen habe. Wir haben diese Werkzeuge und sollten sie auch nutzen.

    Habe direkt mal geschaut, warum ich den CORS-Fehler bekam und ich wurde fündig.

    coinmarketcap.com/api/faq/

    Q: Why did I receive a Access-Control-Allow-Origin error while trying to use the API?

    A:This CORS error means you are trying to make HTTP requests directly to the
    API from JavaScript in the client-side of your application which is not
    supported. This restriction is to protect your API Key as anyone viewing
    your application could open their browser's Developer Tools to view
    your HTTP requests and steal your API Key. You should prevent your API
    Key from being visible on your client-side by proxying your requests
    through your own backend script.


    In diesem Fall kannst du via PHP den request machen und musst das dann so ausgeben.
    Bilder

    • Unbenannt.png

      5,4 kB, 1.889×33, 73 mal angesehen

    Hängt davon ab wie du das nutzen wolltest, wenn nur als Datei lokal mit Doppelklick im Webbrowser öffnen dann siehts schlecht aus. Das solche Anfragen via JS nicht erlaubt sind, da unsicher wegen deines Keys der drin zu finden ist, ist absolut richtig und OK.

    Machen kann man was, aber hängt davon ab wie das eingesetzt werden soll.

    Haste einen Webserver laufen? Oder brauchste das nur für dich auf'm heimischen Rechner?

    Also wenn Webserver:
    Lade das via PHP, gib das aus. Um Traffic zu sparen, richte einen Cromjob ein, lade das turnusmäßig runter und speicher das inner DB, hau die Daten dann via PHP raus.

    Wenn nur lokal auf'm Rechner:
    Mach dir eine Net-Anwendung.

    Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von „Takafusa“ ()

    Ich wollte mir nur ein Paar Kryptos ausgeben lassen die ich halte. Nein es gibt keinen Webserver und ich wollte deshalb keine Netanwendung draus machen weil ich mir die HTML auch aufs Handy hätte ziehen koennen. Da die Werte eh public sind wäre der Key eh uninteressant. Das war eigentlich schon der Plan des ganzen.

    Ich habe das über die Kraken API bereits geschaft. Allerdings listet die nicht alle die ich habe und da ich gesehen das coinmarketcap auch eine API hat dachte ich das geht hier auch so einfach. :rolleyes:
    Auf den Fehler wäre ich allerdings nicht so schnell gekommen.
    In Arbeit...

Facebook
Telefonspende