Java Training Block 9 – Tag 5 Modern Web, HTML, Javascript, AJAX

Ich nehme derzeit an einer Akademie zum Java Fullstack Software Engineer teil. In den kommenden Wochen möchte ich hier meine Mitschrift, so gut es geht, aufzeichnen und mitteilen. Hier ist das, was ich vom fünften Tag in Block 9 gelernt und behalten habe:

nodejs

Wir installieren node.js (als Vorbereitung für nächste Woche): https://nodejs.org/en/

Weitere Javascript Beispiele

Geoposition:

Übung Simpsons (GET, JSON, AJAX, RestAPI)

Ueb-simpsons-ajax-rst-api
Abfrage auf https://thesimpsonsquoteapi.glitch.me/
curl -X GET https://thesimpsonsquoteapi.glitch.me/quotes
Oder curl --proxy http://HE112113.emea1.cds.t-internal.com:8080 -X GET https://thesimpsonsquoteapi.glitch.me/quotes

AJAX- Request
EventHandling on……..
EinzelSpruch-Abfragen -> Anzeige -> (*) -> Bild
MehrSpruch-Abfragen -> Liste / Tabelle (*)
"Schleife" die euch mehrere nacheinanderfolgende Sprüche (**) -> setinterval , settimeout

Hier das funktionierende html-File:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SImpsons CLient</title>
   <!-- <script type="text/javascript" src="./SimpsonsUtilclass2.js" ></script> -->
    <script type="text/javascript">
        // 1. XHR erzeugen
        let xhr = new XMLHttpRequest(); //ab ECMA--5
       function makeSpruecheObjekt(){
        let anzahl = parseFloat(document.getElementById("Anzahlid").value);
       // let simpsonsclass = new SimpsonsUtilclass2();
        let sprueche = [];
        //2. Init / Config des XHR Objektes
        //let jsonstream = JSON.stringify(kreisclass);  
        //https://thesimpsonsquoteapi.glitch.me/quotes?count=num
        //xhr.open("POST","http://localhost:8099/kreisrechner/kreisobj", true);
        xhr.open("GET","https://thesimpsonsquoteapi.glitch.me/quotes?count="+anzahl, true);
       // xhr.setRequestHeader("Accept","application/json");
           xhr.setRequestHeader("Accept","application/json");
        //Call-Back-Funktion einbinden
       // xhr.onreadystatechange = mycallback;
        xhr.onloadstart =  () => { 
            console.log("xhr.onloadstart"); 
            document.getElementById("butSpruecheObjekt").disabled=true;
            document.getElementById("Anzahlid").disabled=true;
    };
            xhr.onloadend = () => {
                 console.log("xhr.onloadend");
                 document.getElementById("butSpruecheObjekt").disabled=false;
            document.getElementById("Anzahlid").disabled=false;
             };
             let msg = `
                    <span style="color: red"> 
                       Error: Server-Timeout
                     </span>
                `;
         xhr.ontimeout = () => {
            console.log("xhr.timeout");
            document.getElementById("butSpruecheObjekt").disabled=false;
        document.getElementById("Anzahlid").disabled=false;
            document.getElementById("outid").innerHTML=msg;
         }
         xhr.onload = () => { 
             console.log("xhr.onload");
             console.log("xhr.readystate: "+xhr.readystate);

             if (xhr.status===200) {
            let jsonstream = xhr.responseText;
            let sprueche = JSON.parse(jsonstream);
            console.log("Hier ist der Inhalt von sprueche: "+sprueche);
            let msg = "&lt;span style='color: blue'>"
            sprueche.forEach(element => {
                
           
            msg = msg + "Der Spruch kommt von: " +  element.character+ "&lt;br>";
            msg = msg + "Der Spruch lautet: " +  element.quote + "&lt;br>";
            msg = msg +  "&lt;img src="+element.image+">" + "&lt;br>";
            msg = msg + "&lt;/span>";
            document.getElementById("outid").innerHTML=msg;
           // document.getElementById("bild").innerHTML="&lt;img src="+element.image+">";
        }
        
        );
        document.getElementById("stream").innerText=sprueche.toString();
        }
            else {
                document.getElementById("outid").innerHTML=xhr.responseText;  
            }

             }; 
        xhr.onprogress = () => { console.log("xhr.onprogress"); 
    console.log("Rolling,....")};
    
        xhr.onerror = () => {
            console.log("xhr.timeout");
            document.getElementById("butSpruecheObjekt").disabled=false;
        document.getElementById("Anzahlid").disabled=false;
            let msg = "&lt;span style='color: red'> Error: Any Error has occured!";
            document.getElementById("outid").innerHTML=msg;
        }
    //3. Senden
    xhr.send();  // bei GET; Bei POST: xhr.send(data); -> data in den RequestBody
}
</script>

</head>

<body>

<header>

<h1> Simpsons Sprüche holen </h1>

<hr/>

</header>

<section>

<div>

<form>

<label for='Anzahlid' > Eingabe <br/>

<input id="Anzahlid"    name='Anzahl'    type='number'   value="" size='20' required placeholder="Bitte Anzahl der Sprüche eingeben"/><br/>

</label>

<button id ="butSpruecheObjekt" type='button' onclick='makeSpruecheObjekt();'>Sprüche holen (SprücheObjekt)</button>

</form>

</div>

<div id="outid"></div>

<div id="stream"></div>
</section>

</body>

</html>

Alternativ:

Stylesheets. Die Farben überschreiben sich:

Timeout und Intervall:

Clousure:

Lokale Variablen, auf die von außen zugegriffen wird überleben auch außerhalb der Funktion.

Anders: Lokale Variablen werden innherhalb einer Funktion erstellt. Sie sind innerhalb der inneren Funktion sichtbar. Die Referenz der inneren Funktion wird einer äußeren übergeben. Die Variablen bleiben erhalten (Quasi: Zombi Variablen). Das ist die Grundlage für das Design Pattern Factory:

Disclaimer

Alles was ich mitschrieb und verstanden habe ist ohne Gewähr. Die Bilder stammen teilweise aus dem Internet und wir haben keine Urheberansprüche darauf.

Besten Dank an unseren sehr empfehlenswerten

Trainer: Hans-Joachim Blanke blanke@4point.de

In den nächsten Tagen und Wochen geht’s weiter, so: stay tuned!

Gruß, Achim Mertens