xmlHttpRequest für Hausaufgabe

[hmm]

hi leute,

ich soll mittels httpReqtest get ein json abfragen. mit ajax hat das ganze funktioniert nur leider klappts mt dem httpRequest nicht. die json soll dann anderen funktionen übergeben werden. hier mein code:

        var mydata = [];
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function(data) {
            if (this.readyState == 4 && this.status == 200) {
                
                blogEntries = data.responseText;
                console.log(data.responseText);
                templateContent = createAllBlogEntries(null, blogEntries);
                // templateContent = document.getElementById("BlogTemplate").content;
                jumboTronH2.textContent = "Max's Kurznachrichten-Blog";
        
                var blogModalTemplate = document.getElementById("BlogModalTemplate").content;
                var addArticleButton = blogModalTemplate.querySelector("button");
                jumboTron.appendChild(document.importNode(addArticleButton, true));
        
                //Füge bei der ersten Verwendung das die unsichtbare EingabeMaske dem Body hinzu
                var addArticleMaske = blogModalTemplate.querySelector("#newArticleModal");
                document.body.appendChild(document.importNode(addArticleMaske, true));
            }
        };
        
        //blogEntries = document.getElementById("data");
        xhttp.open("GET", "Daten.json", true);
        xhttp.send();
        var data_var = document.getElementById("data");

console.log(data.responseText) ist leider leer, in data stehen einige dinge, aber das json hab ich da nicht gefunden,

per ajax konnte ich das so machen:

var mydata = [];
        $.ajax({
          url: 'Daten.json',
          async: false,
          dataType: 'json',
          success: function (json) {
            mydata = json;
            console.log("test");
          }
        });

        blogEntries = mydata;

die blogentries variable muss als json an funktionen übergeben werden (siehe beispiel mit http...), wie krieg ich es hin, dass das ganze auch mit httpRequest geht?

[j4nk3y]

Hallo,

Erstmal ist die Jquery Ajax Methode nichts anderes als ein XMLHttpRequest (Jedenfalls wenn ich mich nicht vollkommen Täusche).

Zum zweiten, könnte es sein, dass sich das recht einfach lösen sollte, wenn du dein xhttp.open(...) vor dein xhttp.onreadystatechange stellst, dazu gern nochmal hier nachlesen.

Gruß
Jo

[hmm]

danke, wenn ich das wie folgt mache bekomme ich den inhalt des json als text, wie kann ich daraus wieder ein json machen auf effiziente weise? bzw wie krieg ich das response als json statt als string?

        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "Daten.json", true);
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                
                blogEntries = xhttp.responseText;
                console.log(xhttp.responseText);
                templateContent = createAllBlogEntries(null, blogEntries);
                // templateContent = document.getElementById("BlogTemplate").content;
                jumboTronH2.textContent = "Max's Kurznachrichten-Blog";
        
                var blogModalTemplate = document.getElementById("BlogModalTemplate").content;
                var addArticleButton = blogModalTemplate.querySelector("button");
                jumboTron.appendChild(document.importNode(addArticleButton, true));
        
                //Füge bei der ersten Verwendung das die unsichtbare EingabeMaske dem Body hinzu
                var addArticleMaske = blogModalTemplate.querySelector("#newArticleModal");
                document.body.appendChild(document.importNode(addArticleMaske, true));
            }
        };
        
        //blogEntries = document.getElementById("data");
        xhttp.send();

[j4nk3y]

Hey,

Top. Das sollte mit json.parse(xhttp.responseText) funktionieren.

Gruß
Jo

[hmm]

danke, es ging auch über type=json

    xhttp.responseType = 'json';

[j4nk3y]

Hey,

Stimmt, dass ist noch besser!

Gruß
Jo

[pl]

danke, es ging auch über type=json

    xhttp.responseType = 'json';

Bedenke jedoch, dass dann sämtliche serverseitigen Fehlermeldungen, auch Exceptions, als JSON verpackt gesendet werden müssen.

Besser ist also der Default, weil Text:

  xhr.open...;
  xhr.onload = function(){
    if( this.status != 200) return alert( this.response );
  };

MfG

[FrankMe]

Hallo Jo, danke für den Link und den Tipp. Leider hilft die Umstellung der Reihenfolge auch nicht das Problem zu lösen. Grüße, Frank