AJAX für spontane Aktualisierung einzelner Elemente

Oft muss nach einer Anfrage des Benutzers nur ein Teil der Webseite aktualisiert werden. Dann wird nicht nicht gesamte Seite neu geladen, sondern nur ein Element dieser Seite.

Ein Beispiel:

  • onClick="aktualisiere();"

<html>

<script>
    function aktualisiere() {
        req = new XMLHttpRequest();
        req.onreadystatechange = function() {
            if (req.readyState==4) {
                document.getElementById('anzeige').innerHTML = req.responseText;
            }
        }
        req.open("GET", 'http://localhost/ajax/antwort.txt', true);
        req.send(null);
    }
</script>

<style type="text/css">
    div {
        width:200px;
        height:40px;
        background-color: lightgray;
        border:dashed 1px;
        overflow:hidden;
    }
</style>

<body>
    Hier wird neueste Information bereit gestellt, ohne die gesamte Seite neu zu laden.
    <input type="button" onClick="aktualisiere();" value="Aktualisiere"/>
    <div id="anzeige"></div>
</body>

</html>