:: Anbieterverzeichnis :: Globale Branchen
:: 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>
|
325.gif - 
Download des Beispiels

|
|
|
|
|


:: Anbieterverzeichnis ::
Webhosting/Serverlösungen
Suchen Sie den für Sie passenden IT-Dienstleister für Ihr Webhosting-Paket oder Ihre Serverlösung?
Sie sind nur ein paar Klicks davon entfernt! 
Ausgewählter Tipp im Bereich PHP-Skripte
Tage eines Monats ermitteln
Weitere interessante Beispiele aus dem SELFPHP Kochbuch finden Sie im Bereich PHP-Skripte
SELFPHP Code Snippet
AJAX-Request erkennen
Weitere interessante Code Snippets finden Sie auf SELFPHP im Bereich PHP Code Snippets
|