JS: Einführung in AJAX (Quickstart) mit JQuery und PHP

AjaxDer 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

dose

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



6 Antworten : “JS: Einführung in AJAX (Quickstart) mit JQuery und PHP”

  1. Pascal sagt:

    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!

  2. Willy sagt:

    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.

  3. inni sagt:

    Du bist mein ganz persönlicher Held des Tages :)

    Vielen Dank, war extremst hilfreich!

  4. Super super super :) Gefällt mir. Danke.

Kommentar verfassen