Ajax und WP-Ajax verstehen – Code Beispiel

Homepage-nach-Preis — Sat, 06 Apr 2024 04:00:17 +0000

AJAX (Asynchronous JavaScript and XML) ist eine Technik, die es ermöglicht, Daten zwischen dem Browser des Benutzers und dem Server auszutauschen, ohne die gesamte Webseite neu zu laden. Dies ermöglicht eine verbesserte Benutzererfahrung, da Inhalte dynamisch aktualisiert werden können, ohne die Seite zu verlassen. Stellen wir uns ein Restaurant vor und einen Kunden, der Kunde erhält seine Bestellung, ohne zum Restaurant fahren zu müssen, also vergleichbar mit einem Lieferanten. AJAX ist die Verbindung zwischen Server und Client, ein praktischer Helfer.

Die grundlegende Arbeitsweise von AJAX besteht darin, dass der Browser mithilfe von JavaScript eine HTTP-Anfrage an den Server sendet. Der Server verarbeitet dann die Anfrage und sendet eine Antwort zurück, die vom JavaScript-Code auf der Client-Seite verarbeitet wird.

In der Regel werden AJAX-Anfragen verwendet, um Daten im Hintergrund zu laden, Benutzeraktionen zu verarbeiten oder mit einem Server zu kommunizieren, ohne dass die Seite neu geladen werden muss. Dies kann beispielsweise bei der Validierung von Formularen, dem Laden von zusätzlichen Inhalten oder der Aktualisierung von Benutzerdaten nützlich sein.

Um AJAX in einer Webseite zu implementieren, wird normalerweise JavaScript verwendet, um die Anfrage zu senden, und auf der Serverseite wird die Anfrage mit einer Programmiersprache wie PHP oder Python verarbeitet.

In WordPress wird AJAX häufig verwendet, um dynamische Inhalte in Themes und Plugins zu laden, ohne die Seite neu zu laden. WordPress bietet spezielle Funktionen und Hooks für die Verarbeitung von AJAX-Anfragen, was die Implementierung erleichtert. Hierzu ein praktisches Beispiel:
WordPress:
Javascript:

document.addEventListener("DOMContentLoaded", function() {
    var hnpAjaxButton = document.getElementById("hnp_ajax_button");
    
    hnpAjaxButton.addEventListener("click", function() {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", ajax_object.ajax_url, true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                alert("Server sagt: " + xhr.responseText);
            }
        };
        xhr.send("action=hnp_ajax_funktion");
    });
});

PHP

add_action('wp_enqueue_scripts', 'hnp_ajax_scripts');
function hnp_ajax_scripts() {
    wp_enqueue_script('hnp-ajax-script', get_stylesheet_directory_uri() . '/js/hnp-ajax-script.js', array(), '1.0', true);
    wp_localize_script('hnp-ajax-script', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php')));
}

add_action('wp_ajax_hnp_ajax_funktion', 'meine_ajax_callback');
add_action('wp_ajax_nopriv_hnp_ajax_funktion', 'meine_ajax_callback');
function meine_ajax_callback() {
    echo 'Hallo von AJAX!';
    die();
}

HTML:

<button id="hnp_ajax_button">Klick mich für eine Begrüßungsnachricht!</button>

ODER Universal:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX Beispiel</title>
</head>
<body>
    <button id="hnp_ajax_button">Klick mich für eine Begrüßungsnachricht!</button>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var hnpAjaxButton = document.getElementById("hnp_ajax_button");
            
            hnpAjaxButton.addEventListener("click", function() {
                var xhr = new XMLHttpRequest();
                xhr.open("POST", "server.php", true); // Hier "server.php" durch die URL des Servers ersetzen, der die AJAX-Anfrage verarbeitet
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        alert("Server sagt: " + xhr.responseText);
                    }
                };
                xhr.send("action=hnp_ajax_funktion");
            });
        });
    </script>
</body>
</html>

Der Beitrag Ajax und WP-Ajax verstehen – Code Beispiel erschien zuerst auf Homepage nach Preis - Webseite erstellen lassen. Geschrieben von Homepage-nach-Preis.

Ajax Archiv - Homepage nach Preis - Webseite erstellen lassen

Ajax und WP-Ajax verstehen – Code Beispiel