jQuery AJAX – Ein Javascript-Zusammenspiel

08.11.2016 06:30 Uhr

AJAX ist nicht nur ein Fußballverein in den Niederlanden, sondern steht in der Programmierung für „Asynchronous JavaScript and XML“. Dabei bezeichnet AJAX eigentlich das Zusammenspiel vieler Javascript-Komponenten. Genau dieses Zusammenspiel ermöglicht es, Dateien nachzuladen, wenn die eigentliche Webseite schon geladen ist. Die Idee eines „HTML-Bildes“ wird mit AJAX endgültig zerstört. Da die Anwendung von AJAX mit reinem Javascript kompliziert ist, bedient der Programmierer sich im Regelfall jQuery AJAX, welches das Handling enorm vereinfacht. 

jQuery AJAX nicht von überall

Um der Kursstunde live zu folgen, benötigen Sie in dieser Sitzung zwingend einen Webserver! Ohne Webserver wird es Ihnen im Regelfall nicht gelingen, Dateien nachzuladen, da der Browser dies aus Sicherheitsgründen unterbindet. Sie werden also zwingend Ihre Dateien über den Webserver aufrufen müssen.

Legen Sie zwei Dateien in Ihr Webserververzeichnis. Die eine Datei ist eine klassische HTML-Datei, die weder mobil noch responsive sein muss, zumindest nicht für heute. Allerdings sollten Sie jQuery einbinden. Die zweite Datei ist eine normale Textdatei mit der Endung „txt“, die wir nachladen wollen. Beide Dateien sollten zurzeit im gleichen Verzeichnis in Ihrem Webserver liegen.

Die HTML-Datei sollte minimal wie folgt ausschauen:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mobile Webentwicklung</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>

    <script>

        $(document).ready(function(){

            alert('hallo');

        });

    </script>

</body>
</html>

Wichtig ist das Einbinden von jQuery im Head-Bereich, die können die Datei natürlich auch lokal einbinden. Ebenfalls wichtig ist das in der letzten Sitzung besprochene document-ready-Konstrukt. „Hallo“ wird erst ausgegeben, wenn alle Komponenten der Seite fertig geladen sind. Sind diese Voraussetzungen alle erfüllt, können wir mit dem eigentlichen AJAX in der Kursstunde starten.

jQuery Ajax wird eingebunden

Um nun Inhalte aus einer anderen Datei nachzuladen, nutzen wir den jQuery-Befehl „ajax“. Dazu müssen wir eine Menge Parameter mitgeben, die wir als Liste mitsenden. Sobald das Nachladen der Datei abgeschlossen ist, geschieht das event „done“ an dem Befehl „ajax“. Auch dieses Event verlangt wieder eine anonyme Funktion. Diese hat aber einen Parameter, der unseren nachgeladenen Dateiinhalt enthält.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mobile Webentwicklung</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>

    <input type="text" id="meintext" value=""><br /><br />

    <button id="btn" type="button">Absenden</button>

    <script>

        $(document).ready(function(){

            $('#btn').click(function() {

                $.ajax({
                    url: 'nachladen.txt',
                    method: 'GET',
                    dataType: 'text'
                }).done(function(data){

                    $('#meintext').val( data );

                });

            });

        });

    </script>

</body>
</html>
Schlagwörter: ,