Skip to content

AJAX Klausuraufgaben

ocean90 edited this page Feb 1, 2013 · 33 revisions

##Autoren

Aufgaben

Leicht

  • Was bedeutet die Abkürzung "AJAX"?

    • Lösung: Asynchronous Javascript and XML
  • Was ist das Hauptmerkmal von AJAX?

    [_] synchrone Datenübertragung zwischen Browser und Server
    
    [_] asynchrone Datenübertragung zwischen Browser und Server
    
    [_] vorrauschauendes Laden
    
    [_] Anpassung für mobile Endgeräte
    
    • Lösung: Die asynchrone Datenübertragung zwischen Browser und Server.
  • Worin liegt der Unterschied zu dem normalen Verfahren? Ergänzen sie den Text richtig mit Wörtern aus der folgenden Auswahl: HTTP-Anfrage, Neuladen, asynchrone Datenübertragung, Neustarten

    Der Unterschied liegt darin daß mit AJAX eine ......... im Hintergrund ausgeführt werden    kann. Bei dem normalen Verfahren würde eine HTTP-Anfrage ein ......... der Seite erforden.
    
    • Lösung: Der Unterschied liegt darin daß mit AJAX eine HTTP-Anfrage im Hintergrund ausgeführt werden kann. Bei dem normalen Verfahren würde eine HTTP-Anfrage ein Neuladen der Seite erforden.

Mittel

  • Ordnen sie den readyStates die richtigen Ziffern zu (0, 1, 2, 3, 4)

    : Der Request wurde „gesetzt“, ist aber noch nicht gesendet worden d.h. bevor XMLHttpRequest.send aufgerufen wurde.

    : Der Request wurde gesendet und wird „bearbeitet“.

    : Der Request wurde noch nicht initialisiert d.h. bevor XMLHttpRequest.open aufgerufen wurde.

    : Der Response (Anwort) ist abgeschlossen d.h. es stehen alle Daten zur Verfügung.

    : Der Request wird noch bearbeitet, allerdings stehen schon einige Daten zur Verfügung. Es kann darauf bereits mit XMLHttpRequest.responseText zugegriffen werden.

  • Lösung:

    0: Der Request wurde noch nicht initialisiert d.h. bevor XMLHttpRequest.open aufgerufen wurde.

    1: Der Request wurde „gesetzt“, ist aber noch nicht gesendet worden d.h. bevor XMLHttpRequest.send aufgerufen wurde.

    2: Der Request wurde gesendet und wird „bearbeitet“.

    3: Der Request wird noch bearbeitet, allerdings stehen schon einige Daten zur Verfügung. Es kann darauf bereits mit XMLHttpRequest.responseText zugegriffen werden.

    4: Der Response (Anwort) ist abgeschlossen d.h. es stehen alle Daten zur Verfügung.

  • Ergänzen sie die Vor- & Nachteile von AJAX mit Wörtern aus der folgenden Auswahl: neu geladen, XML, entlastet, Javascript, HTML, Polling, Latenz, Cache, Arbeitsspeicher, vorrausschauendes, Seitenaufbau, Browser-Plugin, visuelles, XMLHttpRequest

    Vorteile

    • Webseiten müssen dank Ajax nicht komplett ......... werden. Somit ist es möglich schneller auf Benutzereingaben zu reagieren. Der Bedienkomfort erhöht sich da der Benutzer nicht "ständig" auf einen neuen ....... warten muss. Die Anwendung ist flüssiger zu bedienen.

    • Der Webserver wird durch Ajax ....... da statische Daten nicht fortwährend übertragen werden müssen.

    • Die Ajax-Technologie ist frei zugänglich und plattform-unabhängig. Es wird kein ........ benötigt um Ajax zu nutzen.

    Nachteile

    • Um Ajax nutzen zu können muss der genutzte Webbrowser ........ unterstützen.

    • Der Webserver kann ohne Anforderungen keine asynchronen Events an den Ajax-Client durchleiten (.......-Problem). Deswegen muss der Ajax-Client ständig Anfragen senden. So entsteht eine hohe ......... des Servers. Um die Auslastung zu senken kann die Anfragen immer in zeitlichen Abständen gesendet werden (z.B. alle 5 sekunden).

    • Die Lesezeichen-Funktion und "Zurück"-Funktion eines Webbrowsers funktionieren in Zusammenhang mit Ajax nicht richtig, da im ...... des Webbrowsers immer nur statische Seiten gespeichert werden.

    • Durch eine hohe Latenz kann es länger dauern die Daten vom Webserver zu laden. Durch ......... Laden kann man die Ladezeit verkürzen. Es werden also Inhalte geladen die der Nutzer als Nächstes anklicken könnte. Außerdem sollte man dem Benutzer ein ........ Feedback geben um zu verdeutlichen dass die Anwendung nicht abgestürzt ist sondern Daten lädt. Dies kann durch eine Sanduhr oder eine andere Animation geschehen.

  • Lösung:

    Vorteile

    • Webseiten müssen dank Ajax nicht komplett neu geladen werden. Somit ist es möglich schneller auf Benutzereingaben zu reagieren. Der Bedienkomfort erhöht sich da der Benutzer nicht "ständig" auf einen neuen Seitenaufbau warten muss. Die Anwendung ist flüssiger zu bedienen.

    • Der Webserver wird durch Ajax entlastet da statische Daten nicht fortwährend übertragen werden müssen.

    • Die Ajax-Technologie ist frei zugänglich und plattform-unabhängig. Es wird kein Browser-Plugin benötigt um Ajax zu nutzen.

    Nachteile

    • Um Ajax nutzen zu können muss der genutzte Webbrowser Javascript unterstützen.

    • Der Webserver kann ohne Anforderungen keine asynchronen Events an den Ajax-Client durchleiten (Polling-Problem). Deswegen muss der Ajax-Client ständig Anfragen senden. So entsteht eine hohe Auslastung des Servers. Um die Auslastung zu senken kann die Anfragen immer in zeitlichen Abständen gesendet werden (z.B. alle 5 sekunden).

    • Die Lesezeichen-Funktion und "Zurück"-Funktion eines Webbrowsers funktionieren in Zusammenhang mit Ajax nicht richtig, da im Cache des Webbrowsers immer nur statische Seiten gespeichert werden.

    • Durch eine hohe Latenz kann es länger dauern die Daten vom Webserver zu laden. Durch vorausschauendes Laden kann man die Ladezeit verkürzen. Es werden also Inhalte geladen die der Nutzer als Nächstes anklicken könnte. Außerdem sollte man dem Benutzer ein visuelles Feedback geben um zu verdeutlichen dass die Anwendung nicht abgestürzt ist sondern Daten lädt. Dies kann durch eine Sanduhr oder eine andere Animation geschehen.

Schwer

  • Wie heißt das Javascript-Objekt mit welchem man eine AJAX Verbindung aufbauen kann?

    [_] XMLHttpResponse-Objekt

    [_] XMLHttpRequest-Objekt

    [_] JSONHttpResponse-Objekt

    [_] Request-Objekt

    Lösung: XMLHttpRequest-Objekt

  • Öffnen und Senden Sie eine asynchrone GET-Anfrage an den fiktiven Server "http://my.domain.com"!

    [________________________________________________]

    [________________________________________________]

    [________________________________________________]

    [________________________________________________]

    Lösung:

    request = new XMLHttpRequest();
    request.open('GET', 'http://my.domain.com', true);
    request.send(null);
    
  • Laden Sie mit Hilfe von jQuery und der ajax()-Methode die Datei "json.data" (Datentyp: jsonp)

        $._____({
            ________:"json.data",
            dataType:"______",
            ________: function(data){
                alert(data);
            }
        });
    

    Lösung:

        $.ajax({
            url: "json.data",
            dataType: "jsonp",
            success:function(data){
                alert(data);
            }
        });
    
Clone this wiki locally