JS: Einführung in AJAX (Quickstart) mit JQuery und PHP
Gepostet von Alexander Gräsel in JavaScript, PHP, Programmierung am 20 August, 2012 | 8 Kommentare
Der heutige Artikel behandelt das geniale Thema AJAX. AJAX ist die Abkürzung für „Asynchronous JavaScript and XML“ und bedeutet so viel, dass Daten ohne einen Seiten-Refresh (fullpage-Request) zwischen Client(Browser) und Server ausgetauscht werden können. Geil oder?
Theorie
Die trockene Theorie kann man bei Freund Wikipedia nachlesen. Aber in diesem Blog geht es um die Praxis!
Voraussetzung
AJAX setzt ein breites Wissen voraus. Man sollte Grundkenntnisse in HTML, Javascript und PHP haben. Außerdem brauch man für mein Beispiel einen php-fähigen Server. Also ein Hosting-Paket oder eine lokale XAMPP Installation.
jQuery in HTML einbinden
Eigentlich brauch man kein jQuery für AJAX, aber das clientseitige Framework bringt einem viele Vorteile z.B.: einfacher Zugriff / einfache Syntax, Browserunabhängigkeit (kapselt die Eigenheiten verschiedener Browser & Versionen) und ggf. Fehlerhandling. Google bietet hierfür einen coolen Service der „Google Hosted Libraries„. Dieser Service bietet stets die aktuelle Version von jQuery und ist extrem auf Geschwindigkeit optimiert.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
Daten von jQuery / HTML per AJAX an PHP senden
Das Skript
function clickJStoPHP(event){
// Daten an Server senden
$.ajax({
// pfad zur PHP Datei (ab HTML Datei)
url: "php/getKonsonant.php",
// Daten, die an Server gesendet werden soll in JSON Notation
data: {name: "AxxG", id: event.target.id},
datatype: "json",
// Methode POST oder GET
type: "POST",
// Callback-Funktion, die nach der Antwort des Servers ausgefuehrt wird
success: function(data) { clickJStoPHPResponse(data); }
});
}
function clickJStoPHPResponse(data) {
// Antwort des Server ggf. verarbeiten
var response = $.parseJSON(data);
alert("Mein Ergebnis bei AxxG-AJAX: " + response);
}
Die HTML-Datei
< !DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>AxxG - AJAX Beispiel</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
function clickJStoPHP(event){
$.ajax({
url: "php/getInfo.php",
data: {name: "AxxG", id: event.target.id},
datatype: "json",
type: "POST",
success: function(data) { clickJStoPHPResponse(data); }
});
}
function clickJStoPHPResponse(data) {
// Antwort des Server ggf. verarbeiten
var response = $.parseJSON(data);
alert("Mein Ergebnis bei AxxG-AJAX: " + response);
}
</script>
</head>
<body>
<button type="button" id="myClickBtn" onclick="clickJStoPHP(event)">go!</button>
</body>
</html>
Die PHP-Datei (php/getInfo.php)
< ?php
// Achtung Sicherheitsrisiko!!! man sollte Input-Werte immer validieren!!!! (wird in diesem Beispiel nicht getan)
// Daten empfangen
$id = $_POST["id"];
$name= $_POST["name"];
// Inhalt in eine Datei schreiben
$datei_handle=fopen("log.txt",a);
fwrite($datei_handle, "ID: ".$id."\n");
fwrite($datei_handle, "Name: ".$name."\n");
fclose($datei_handle);
?>
Wechsel
Daten von PHP an jQuery / HTML per AJAX senden
Das Skript
function clickPHPtoJS(event){
// Minimal:-)
$.ajax({
url: "php/sendInfo.php",
type: "POST",
success: function(data) { clickPHPtoJSResponse(data); }
});
}
function clickPHPtoJSResponse(data) {
// Antwort des Server ggf. verarbeiten
var response = $.parseJSON(data);
var nummer = response.nr;
var blog = response.blog;
alert("Mein Ergebnis bei AxxG-AJAX: " + nummer);
alert("Mein Ergebnis bei AxxG-AJAX: " + blog);
}
Die HTML-Datei
< !DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>AxxG - AJAX Beispiel</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
function clickPHPtoJS(event){
// Minimal:-)
$.ajax({
url: "php/sendInfo.php",
type: "POST",
success: function(data) { clickPHPtoJSResponse(data); }
});
}
function clickPHPtoJSResponse(data) {
// Antwort des Server ggf. verarbeiten
var response = $.parseJSON(data);
var nummer = response.nr;
var blog = response.blog;
alert("Mein Ergebnis bei AxxG-AJAX: " + nummer);
alert("Mein Ergebnis bei AxxG-AJAX: " + blog);
}
</script>
</head>
<body>
<button type="button" id="myClickBtn" onclick="clickPHPtoJS(event)">go!</button>
</body>
</html>
Die PHP-Datei (php/sendInfo.php)
< ?php // Antwort zusammensetzen $response = array ( "nr" => 11111122222223333333, "blog" => "axxg"); // codieren der Daten print_r(json_encode($response)); ?>
Oldschool
Wie gesagt funktioniert AJAX auch ohne jQuery. Das wäre ein Beispiel:
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//Antwort verarbeiten
xmlhttp.responseText;
}
}
// Eigentlicher Aufruf
xmlhttp.open("POST","php/getInfo.php",true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send("name=AxxG&id=oldschool");
//alert(xmlhttp.responseText);
}
Ein weiteres Beispiel und eine bessere Erklärung findet man hier: http://www.w3schools.com/ajax/default.asp
Weitere Links
Download
Hast du immer noch Probleme mit AJAX? Hier findest du ein zu 100% funktionierendes Beispiel zum downloaden…
| Inhalt | gepackte XAMPP Version | Größe | 86.801 KB (~87 MB) |
| Plattform | geeignet für Windows 95/98/2000/XP/7/8/… | Endung | *.zip |
Hallo Leser des AxxG Blogs,
ich möchte mich zunächst bei dir bedanken, dass du meinen Beitrag bis zum Ende gelesen hast! Ich hoffe, dass ich dir weiterhelfen konnte^^
Wie du gesehen hast, gebe ich mir sehr viele Mühe bei meinen Beiträgen und beschreibe so gut wie möglich den Sachverhalt. Jedoch kostet das mich sehr viel Zeit und monatlich werden Hosting-Gebühren fällig.
Jetzt aber genug gejammert – Falls dir mein Artikel gefallen hat oder du ein funktionierendes Projekt brauchst, kannst du mich ja auf einen Energy-Drink einladen:)
Als Dankeschön erhältst du exklusiv ein zu 100% funktionierendes Projekt und die dazu passende Video-Erklärung!
Video-Erklärung
Copyright © 2012 AxxG – Alexander Gräsel
Verwandte Beiträge
8 Antworten : “JS: Einführung in AJAX (Quickstart) mit JQuery und PHP”
Kommentar verfassen
Über mich
Willkommen, Welcome, Velkommen, Bienvenue, Benvenuti, Bienvenido! Mein Name ist Alexander Gräsel und ich bin Masterstudent der Fachrichtung Wirtschaftsinformatik. Ich schreibe diesen Blog um einerseits mein Wissen zu dokumentieren und anderseits das Unwissen der Menschheit etwas zu minimieren. Primär beschäftige ich mich mit der Softwareentwicklung in Java, Java EE und C/C++. Zusätzlich befasse ich mich mit (Web)Desgin, Joomla, Wordpress und natürlich Flash/Actionscript 3:-) Folgen
Initiative
Mal wieder ein guter Blogpost!
Arbeite auch gerade mit Ajax: File-Upload wie bei Gmail mit Drag and Drop.
Kannst den Beitrag bei Gelegenheit ja noch für die Java Freunde erweitern 😉
Gruß aus Frankfurt!
Hi Alex,
drei Bemerkungen:
da kann die Menschheit ja froh sein dass du ihr Unwissen minimieren willst (grins),
aber der Artikel war für mich hilfreich (danke),
und mit den Bild wäre ich vorsichtig.
VG, Willy
Hey Willy,
danke für den Kommentar und den Tipp:-)
Ich habe die Rechteinhaber 2 mal angeschrieben und leider keine Antwort bekommen. Sollten sich diese bei mir melden, werde ich umgehend das Bild entfernen.
Du bist mein ganz persönlicher Held des Tages 🙂
Vielen Dank, war extremst hilfreich!
Bitte^^
Super super super 🙂 Gefällt mir. Danke.
I AM NOT SPAM why i can not write comments?? why block me i am good
Hallo Alexander, $.parseJSON ist ab JQuery 3.0 veraltet, stattdessen soll JSON.parse verwendet werden. Wie ändert sich Dein Code in diesem Fall. Danke für eine kurze Rückmeldung