Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Wenn Website-Inhalte nachgeladen oder verändert werden ohne dass die Website dazu vollständig neu geladen werden muss spricht man von Ajax (Asynchronous JavaScript and XML). Meist wird Ajax mit komplexen Funktionen oder Formularabfragen in Verbindung gebracht, es macht es aber auch in eher einfachen Projekten Sinn nicht direkt benötigte Inhalte per Ajax nachzuladen und somit die Performance zu verbessern. In diesem Beitrag archiviere ich ein kleines jQuery-Snippet mit dessen Hilfe HTML-Inhalte per Klick nachgeladen werden können.

HTML-Aufbau

Das Beispiel ist denkbar simpel aufgebaut. In der Datei ajax.html befindet sich ein div mit der ID target. In diesen Bereich werden später die Inhalte geladen. Zusätzlich wurde ein Button platziert der über onclick="kb_source_2_target()" bereits auf die JavaScript-Funktion kb_source_2_target verweist.

ajax.html

...
<body>
  <h1>Inhalte per Ajax (jQuery) nachladen</h1>
  <div id="target"></div>
  <button onclick="kb_source_2_target()">Hier klicken</button>
</body>
...

Die zweite Datei source.html beinhaltet nur den HTML-Code, der später in den div geladen werden soll. In diesem Beispiel einen einzelnen Satz ohne Markup.

jQuery & Ajax

Nun folgt der jQuery und JavaScript (Ajax)-Code. In der Datei ajax.html wird zunächst jQuery eingebunden. Anschließend schreiben wir die Funktion, um per Klick auf den Button die Inhalte aus der Datei source.html auszulesen und in den div mit der ID target zu laden.


<script src="jquery.js" type="text/javascript"></script> 
<script>
	function kb_source_2_target() {
		$.get('source.html', function(data) {
			$('#target').html(data);	
		})
	}
</script>

Hinweis für lokale Testumgebungen

Aufgrund der Sicherheitseinstellungen von JavaScript funktioniert dieses Beispiel nur auf einem Live-Server. Wenn ihr mehr dazu wisst oder das Beispiel für lokale Umgebungen anpassen könnt bin ich euch sehr dankbar. Ihr könnt euch das Beispiel hier online anschauen.

Demo anschauen

Demo und Download

Der Vollständigkeit halber zeige ich hier noch einmal den kompletten Code inkl. einiger zusätzlicher HTML- und CSS-Angaben. Ihr könnt die Beispieldateien auch herunterladen.

Download Beispieldateien

ajax.html


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Inhalte per Ajax nachladen</title>
<style type="text/css">
div {
	border: 1px solid #ccc;
	padding: 25px;
}
</style>
</head>

<body>
<h1>Inhalte per Ajax (jQuery) nachladen</h1>
<div id="target"> Die Inhalte in diesem Container werden nach dem Klick auf den Button mit den Inhalten aus der Datei <code>source.html</code> überschrieben. </div>
<p>
  <button onclick="kb_source_2_target()">Hier klicken</button>
</p>
<script src="jquery.js" type="text/javascript"></script> 
<script>
	function kb_source_2_target() {
		$.get('source.html', function(data) {
			$('#target').html(data);	
		})
	}
</script>
</body>
</html>

source.html


Inhalte geladen! Rock n Roll!

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 30 Kommentare

  1. Franz Rachbauer
    schrieb am 11.11.2020 um 09:12 Uhr:

    Ich habe die Anzeige beim Nachladen inzwischen ohne pleaseWait() gelöst:
    – Ein anim. Icon das ich per ajaxStart und ajaxStop ein/ausschalte
    – Ein Übergang den ich per jQuery.fadeIn und fadeOut durchführe

    Antworten
  2. Franz
    schrieb am 05.11.2020 um 11:13 Uhr:

    Codeeingabe klappt leider nicht, wie kann ich hier den Code eingeben ohne dass er zerstört wird?

    Antworten
  3. Franz
    schrieb am 05.11.2020 um 11:12 Uhr:

    Noch mal den Code, der wurde irgendwie eliminiert:

    start // funktioniert
    start // funktioniert nicht!!!
    startFunction() {
    $(‚#test‘).pleaseWait();
    }

    Antworten
  4. Franz
    schrieb am 05.11.2020 um 11:11 Uhr:

    Inzwischen habe ich herausgefunden, wann pleaseWait() funktioniert und wann nicht:

    start // funktioniert
    start // funktioniert nicht!!!
    startFunction() {
    $(‚#test‘).pleaseWait();
    }

    Hat jemand eine Idee warum es nicht funktioniert wenn es in einer Funktion steht? Wenn ich es fürs Nachladen per Ajax verwende, geht es leider nur in einer Funktion.

    Antworten
  5. Franz
    schrieb am 04.11.2020 um 14:10 Uhr:

    Ich möchte eine größere Anzahl Fotos in Tranchen anzeigen, das Nachladen soll aber nicht per Button erfolgen, sondern durch Runterscrollen wenn man in die Nähe des Seitenendes kommt.

    Wie könnte man das anstossen?

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 04.11.2020 um 15:38 Uhr:

      Hallo Franz, wie dein Anwendungsfall umgesetzt werden kann, ist abhängig von zahlreichen Rahmenbedingungen – z.B. dem CMS etc. Wir können deine Frage daher nicht pauschal bzw. im Rahmen dieses Blogs beantworten. Sorry.

      Antworten
      • Franz
        schrieb am 05.11.2020 um 07:29 Uhr:

        Hallo Jonas,
        meine Page ist händisch erstellt mit HTML, CSS und JS. Die Datenm werden per PHP aus einer DB geladen. Das autom. Nachladen habe ich inzwischen mit JS+Ajax gelöst:

        window.onscroll = function() {scrollFunction()};
        function scrollFunction() {
        var faktor = 300;
        if ($(window).scrollTop() >= ($(document).height() – $(window).height() – faktor)) {
        $(‚body‘).pleaseWait();
        getMore();
        $(‚body‘).pleaseWait(’stop‘);
        }
        }
        function getMore() {
        $.get(‚getMore4.php‘, function(data) {
        document.getElementById(‚more‘).outerHTML = data;
        })
        }

        Ich hätte aber gerne noch während dem Nachladevorgang eine animierte Anzeige, die ev. auch die Seite dabei blockiert. Dazu habe ich im Netz die Funktion pleaseWait() gefunden, die ich aber nicht zum Laufen bekomme, die Animation wird einfach nicht angezeigt. Weiß jemand wie ich die implementiere?

  6. Stefan B
    schrieb am 15.02.2020 um 19:05 Uhr:

    Hallo,

    gibt es inzwischen eine Lösung für lokale Umgebungen, also wenn es nicht über einen Live-Sever läuft?
    Das wäre toll.
    Oder etwas alternatives?

    Danke für Tips.

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 17.02.2020 um 09:35 Uhr:

      Du kannst lokal z.B. mit MAMP einen Server einrichten und dann lokal testen.

      Antworten
  7. Jojo
    schrieb am 08.11.2019 um 22:49 Uhr:

    Danke für die Anleitung – sehr verständlich und praxixnah :-)

    Ich habe eine Frage, die etwas weiterführt. Im js_skript werden die von source.html kommenden Daten ja in data gespeichert und direkt im div mit der id „target“ gespeichert:
    $(‚#target‘).html(data);

    Ich versuche gerade, data an eine globale Variable zu übergeben und dann außerhalb der Funktion weiterzuverwenden. Damit möchte ich diese Variable von Seitenaufruf zu Seitenaufruf in einer externen Datei zwischenspeichern. Funtioniert leider noch nicht.

    Geht so etwas prinzipiell:
    var globale_variable;
    $.get(’source.html‘, function(data) {
    globale_variable = data;
    })
    // Mache irgendetwas mit globale_variable

    Gruß Jo

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 09.11.2019 um 13:51 Uhr:

      Hallo Jo, das klingt fast als wäre ein Cookie für dich das Mittel der Wahl. Wir haben hier eine Testdatei ableget – allerdings ohne detaillierte Erklärung, da uns dazu im Moment die Zeit fehlt.

      Antworten
  8. Uwe Heizmann
    schrieb am 02.09.2019 um 17:32 Uhr:

    Hallo, danke fürs Veröffentlichen dieser Anleitung und des Scripts. Ich habe versucht, es für mein geplantes Vorhaben etwas umzubauen, bin aber leider zu keiner 100%igen Lösung gekommen. Evtl. können Sie mir weiterhelfen. Ich möchte über verschiedene Links unterschiedliche Anzahlen von nachzuladenden Seiten übermitteln, damit diese dann entsprechend angezeigt werden. Hier das grobe Script dafür:

    Hier Klicken

    function kb_source_2_target(liste) {
    var dieEintrage = liste.split(„,“);
    var zielfelder = [‚#zf1‘, ‚#zf2‘, ‚#zf3‘, ‚#zf4‘, ‚#zf5‘];
    for (var i = 0; i < dieEintrage.length; i++) {
    $.get(dieEintrage[i], function(data) {
    $(zielfelder[i]).html(data);
    });
    }
    }

    Es funktioniert leider nicht. eintrag_1.html bis eintrag_3.html werden nacheinander geladen, aber alle im Zielfeld zf4. Wo liegt der Fehler?

    Schönen Gruß

    Uwe

    Antworten
  9. Uli Krause
    schrieb am 25.02.2019 um 17:36 Uhr:

    Hallo,
    prima Aneitung, genau das was ich gesucht habe.

    In den Absatz 2HTML-Aufbau! hat sich, glaube ich, ein kleiner Fehler eingeschlichen: „In der Datei ajax.html befindet sich ein div mit der ID container. In diesen Bereich werden später die Inhalte geladen. “
    Wenn man sich den darunterstehenden Code anschaut hat das entsprechende div die Bezeichnung „target“ (stat „container“ im zitierten Absatz.).
    Wenn ich alles richtig verstanden habe :-)

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 25.02.2019 um 19:54 Uhr:

      Hallo Uli, vielen Dank für den Hinweis. Der Artikel ist entsprechend geändert.

      Antworten
  10. Daniel
    schrieb am 29.01.2019 um 15:14 Uhr:

    Perfect, genau das habe ich gesucht, um nur einen Teil meiner Seite zu updaten.
    Jedoch habe ich noch ein kleines Problem mit meinem Menü das ich ebenso aktualisieren möchte. Jedoch habe ich noch keine Lösung hierfür gefunden.

    div id=’menu1′>

    Home
    Config

    Die id=’aktuell‘ soll beim Klick auf Config auch auf von Home auf Config wechseln.

    Hat jemand eine Idee?
    Danke

    Antworten
  11. Thomas
    schrieb am 20.10.2017 um 15:19 Uhr:

    Hallo

    gibt es auch eine möglichkeit das mann die nachgeladenen Daten in eine Variable speichert und dann im script verwendet?
    Bräuchte es bei den google charts um die daten nachzuladen…

    ESP8266 Webserver kann die Daten nicht alle auf einmal senden. Muss die Daten dann nach geladener Seite nachladen…

    Mit freundlichen Grüßen
    Thomas

    Antworten
  12. Dietmar
    schrieb am 23.06.2017 um 10:58 Uhr:

    Die Frage wurde weiter oben schon (ähnlich) gestellt (ohne Antwort).
    Ich suche eine Lösung mit mehreren / vielen nachladbaren Seiten, um eine Website ohne PHP zu erstellen. Eine mit CSS gestaltete Seite kann ich bereits nachladen. Die Zieldatei im Script zu wechseln, gelingt mir leider (noch) nicht.
    Danke für den Tipp.
    Dietmar

    Antworten
  13. Ryffel
    schrieb am 16.05.2017 um 00:45 Uhr:

    Ich scheitere gerade am Versuch folgendes zu realisieren:
    Es soll eine Ladeanimation geladen werden und dann sofort dargestellt, um während des darstellen den Rest der Seite zu laden. Wie bekomme ich es nun hin, dass der rest der Seite automatisch und sofort geladen wird?

    Freundliche grüsse aus der CH

    Antworten
  14. Peter Genzel
    schrieb am 05.05.2017 um 12:39 Uhr:

    Danke für das Tutorial,
    einfach und leicht verständlich.
    Viele Grüße Peter

    Antworten
  15. Michael Meixelsberger
    schrieb am 27.01.2017 um 10:29 Uhr:

    Hallo, wie sieht es mit SEO und dem nachladen von Inhalten aus? Hat Google mittlerweile auch Ajax gelernt? Ich habe so etwas gelesen. Welche Voraussetzungen müssen erfüllt sein, das Google den Inhalt indiziert?
    Viele Grüße
    Michael

    Antworten
  16. Patrick
    schrieb am 01.08.2016 um 07:59 Uhr:

    Gibt es auch eine Möglichkeit den Inhalt von google zu indexieren zu lassen, aber die source.html Seite für google nicht indexierbar zu machen?

    Antworten
    • Christian
      schrieb am 07.03.2017 um 16:37 Uhr:

      klar; in der robots.txt das da eintragen:

      User-agent: *
      Disallow: /source.html

      Antworten
  17. Thomas Stutz
    schrieb am 21.05.2016 um 22:39 Uhr:

    Hallo, ich bin zwar in HTML und CSS relativ gut, hab aber leider Defizite in Javascript, trotzdem informiere ich mich zur Zeit über Conditional Loading, zur Performanceverbesserungen meiner Responsiven Webseiten auf dem Handy.

    Mit dem Beschriebenen Skript kann man ja externe HTML-Fetzen sehr gut nachträglich laden. Gibt es auch eine Möglichkeit Scripts und Snippets durch so einen „Nachladelink“ zum laufen bringen?

    Ich benutze ab und an den Layerslider, der bekanntlich relativ groß ist. Nehmen wir mal an ich will den nur aufm Desktop geladen bekommen und aufm Handy nur nach Klick. Geht das auch damit oder brauch ich dafür was anderes?

    Hast du einen Tipp, wie man sowas lösen kann? Ich hab schon einiges ausprobiert ich bin am verzweifeln.

    Antworten
  18. Petra
    schrieb am 30.06.2015 um 09:33 Uhr:

    Hallo,
    funktioniert wunderbar für 1x nachladen.

    Mein Problem:
    Nachladen von z.B. „weiteren“ 9 Fotos (oder anderen Elementen) per „Nachladen“-Button, also manuelle Auslösung. Eine Schleife geht nicht, da diese mit dem Button unterbrochen wird.
    Die Möglichkeit, andere Dateien nachzulagen, funktioniert – aber bei z.B. >1000 Fotos müsste ich bei 9 Fotos pro Nachladung über 100 Seiten programmieren ;-)

    Gibt es da eine Lösung? … so viele Male nachzuladen (mit Button-Klick), wie Fotos da sind?

    Gruß,
    Petra

    Antworten
  19. Michel
    schrieb am 13.02.2015 um 16:52 Uhr:

    Gutes Script, funktioniert so erst mal richtig gut und ist auch für Dummis verständlich.
    Eine Frage hab ich aber doch noch: Wie bekomme ich in dem nachgeladenen Bereich ein Formular zum Laufen?
    Folgender Ansatz: Auf einer WEB-Site „fliegt“ mittel javascript nach einer Zeit „X“ ein Feld ein in welchem der User sich aussuchen kann ob er einen Rückruf möchte (dazu muss er seine Telefonnummer eingeben), eine Mail absenden möchte (typisches Mailformular) oder einfach so anrufen. Das Letzte ist kein Problem, aber für die ersten beiden bedarf es eines Formulars und das wird nicht abgesendet.

    Grüße, Michel

    Antworten
  20. Schibi
    schrieb am 15.10.2014 um 23:03 Uhr:

    Sorry,
    das mit dem SPAN habe ich bereits gelöst, jetzt funktioniert das doch.
    Aber das Problem: wie bekomme ich den Ursprungstext wieder zurück, bleibt noch bestehen.

    lg
    Schibi

    Antworten
  21. Schibi
    schrieb am 15.10.2014 um 22:59 Uhr:

    @jonas Vielen Dank für die Super Anleitung.

    ich konnte damit schon mal einen Teil meines Projektes realisieren, aber zwei Fragen kann ich einfah nicht lösen, vielleicht hast Du eine Idee.
    1. ich habe das onMouseOver Event benutzt um den Inhalt nachzuladen (klappt super). kann ich mit Mouseout oder so ähnlich auch wieder den Ursprungs-Text anzeigen lassen ?
    2. wie kann ich das Script abändern damit ich das „id target“ nicht auf einen Container, sondern auf eine benannte SPAN id=“target“ umlenenken kann.

    Mein Gedanke ist der:
    hier ist der erste Satz (dahinter soll nun eine der Inhalt der „source.html“ nachgeladen werden) am besten mit einem SPAN.
    darunter habe ich noch weitere Sätze/Zeilen, wo ich dann jeweils die Datei source2, source3 usw. nachlade, jewieils wieder mit einer SPAN /allerdings dann mit einer anderen ID (taregt1, target2 ….)

    Über einen Lösungsansatz würde ich mich freuen.

    Antworten
  22. fred wasserstein
    schrieb am 26.07.2014 um 01:01 Uhr:

    Danke für das Script. Genau das nachdem gesucht wurde :)

    Antworten
  23. Mike
    schrieb am 03.05.2014 um 00:24 Uhr:

    Gibt es auch eine Möglichkeit Daten aus einer MySql Datenbank zu laden?

    Antworten
    • Nikolaj
      schrieb am 30.05.2014 um 12:25 Uhr:

      Man kann mit der Funktion auch eine php-Datei aufrufen, die dann etwas aus der Datenbank ausliest und per return zurückgibt.
      Falls nötig kann man beim Aufruf auch parameter übergeben:

      $.post(‚dateiname.php‘, {parameter:value}, function(data){
      //weitere Anweisungen
      });

      Antworten

Schreibe einen Kommentar zu Thomas Stutz Antworten abbrechen

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →