:: Anbieterverzeichnis ::

Globale Branchen

Informieren Sie sich über ausgewählte Unternehmen im Anbieterverzeichnis von SELFPHP

:: SELFPHP Forum ::

Fragen rund um die Themen PHP?
In über 130.000 Beiträgen finden Sie sicher die passende Antwort!

:: Newsletter ::

Abonnieren Sie hier den kostenlosen SELFPHP Newsletter!

Umgang mit AJAX und PHP ohne ein JavaScript Framework

SELFPHP ist Shopware Solution Partner

Shopware ist ein vielfach ausgezeichnetes Onlineshop-System der shopware AG, das auf PHP. Zend Framework und SQL basiert.

SELFPHP unterstützt Sie als Shopware Solution Partner bei der Konzeption, Programmierung und Realisierung Ihres Onlineshops und passt Shopware bei Bedarf an Ihre Unternehmensbedürfnisse an.

Weitere Informationen

Beispielaufgabe

Das folgende Beispiel zeigt den einfachen Umgang mit AJAX und PHP ohne ein JavaScript Framework.

Beschreibung

AJAX ermöglicht es Ihnen schnell und einfach HTTP-Anfragen durchzuführen, während eine HTML-Seite angezeigt wird. Dadurch können Sie die Seite ändern, ohne sie komplett neu zu laden. Unser Beispiel nutzt kein externes JavaScript-Framework, wodurch ist es mit lediglich 482 Byte sehr klein ist.

Folgende Funktionalitäten beinhaltet unser AJAX-Beispiel.

+ Senden von Daten per POST
+ Senden von Daten per GET
+ Callback-Funktion zur Bearbeitung des Request von der PHP-Seite
+ Preloader während der Übermittlung

In unserem Beispiel haben wir bereits einen Preloader integriert. Sie haben jedoch auch die Möglichkeit sich einen eigenen Preloader zu erstellen. Hierfür gibt es im Internet eine wirklich sehr gute Website, die Preloader in verschiedenen Formen erzeugt. Sie finden diese Seite unter http://preloaders.net/.

Auf der PHP-Seite können Sie wie gewohnt per $_GET oder $_POST auf die Werte zugreifen und als Response beliebige Variablen zurückgeben, die Sie dann wieder in der Callback-Funktion mit JavaScript bearbeiten können.

ajaxcall.js


SELFPHP={};



SELFPHP.ajax=function(){

    return{

        call:function(url,values,backfunction){



            var x=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');

            x.onreadystatechange=function(){

                if(x.readyState==4&&x.status==200){

                    if(backfunction){                        

                            var k=new Function(giveAjaxResponse(x.responseText)); k()

                    }

                }

            };

            

            if(values){

                x.open('POST',url,true);

                x.setRequestHeader('Content-type','application/x-www-form-urlencoded');

                x.send(values)                

            }else{

                x.open('GET',url,true);

                x.send(null)

            }

        }

    };

}();

ajaxdata.php


<?php

echo 'Sind angekommen: ' . $_POST['vorname'] . ' - ' . $_POST['nachname'];

?>

ajaxrequest.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="ajaxcall.js"></script>

<title>AJAX Test</title>

</head>



<style>

input, label {

    float:left;

    margin-bottom:10px;

}



label {

display: block;

width: 80px;

clear: left;

}



button{

    float:left;

    clear: left;

    left:80px;    

    border: 1px solid #666;

    background-color:#fff;

    height:20px;

    width:90px;

}



#preloader{

    float:left;

    margin-left:10px;    

}



</style>



<script>



function giveAjaxResponse(response){

    var preloader = document.getElementById("preloader");

    alert(response);    

    preloader.style.display = "none";

}



function galerypicture(){

    

    var preloader = document.getElementById("preloader");

    var value1 = document.getElementById("vorname").value;

    var value2 = document.getElementById("nachname").value;

    

    var parameter = 'vorname=' + value1 + '&nachname=' + value2;

    

    preloader.style.display = "block";

    

    SELFPHP.ajax.call('ajaxdata.php', parameter, 'true');



}



</script>



<body>



<label>Name:</label>

<input name="vorname" id="vorname" type="text" />

<label>Vorname:</label>

<input name="nachname" id="nachname" type="text" />

<button onclick="galerypicture()">Senden</button>

<div id="preloader" style="display:none"><img src="325.gif" width="20" height="20" /></div>



</body>

</html>