Ajax

[Mashoo]

Hey leute!

Ich fange grade mit Ajax an.
Aus der Vergangenheit weiß ich, dass man oft sehr viel intensiver und erfolgreicher lernen kann wenn man das gelernte gleich reproduziert
deswegen dieses kleine Tutorial.
(copyright liegt bei chaim dönnewald - bei verwendung bitte angeben danke)
Es soll zum einen andern - die sich auch mit Ajax beschäftigen - die möglichkeit geben, einen Einblick u gewinnen und mir selbst abei helfen das gelernte zu verinnerlichen.

Ich habe mir vorgenommen regelmässig ein bisschen Ajax zu lernen (vielleicht schaffe ich es ja täglich) und hier meine fortschritte in tutorialform zu dokumentieren.

WEnn sich außer mir auch jemand mit Ajax beschäftigt, würde ich micht echt freuen wenn ihr eurer wissen hier beisteuret
so und nun los
Lektion 1 8)

1. Was ist Ajax?
Ich hasse ja eigentlich solche Einleitung aber na ja ein bisschn "Theoriewissen" sollte vielleiht auch ab und an sein Ajax ist eine abkürzung für
* Asyncronous
* JavaScript
* and
* XML

Ajax stellt eine Kombination aus länger existierenden Technologien da. JavaScript wird benutzt um im Browser des Client eine Anfrage zum Server zu stellen. Wenn diese Anfrage vom Server bearbeitet wurde, wird eine Funktion beim Client ausgeführt. Die Nachrichten die der Server verschickt, sind hierbei oft in XML codiert. Die Codierung in XML ist jedoch nicht zwingen, es kann auch eine Codierung als simpler Text erfolgen. XML bietet sich aber an um einen standardisierten Mechanismus zum parsen von Daten zu haben.

Wie oben bereits erwähnt, führt der Server etwas aus und sendet eine Antwort als XML Dokument. Die Implementierung auf der Serverseite kann in einer beliebigen Programmier oder Skriptsprache realisiert werden. In diesem Tutorial und den Schaubildern verwende ich jedoch PHP als serverseitige Skriptsprache.

Da die Anforderung vom Browser des Benutzers über JavaScript ausgelöst wird und mit JavaScript auch die Verarbeitung der Antwort erfolgt, ist kein Reload der Webseite notwendig. In modernen Webandwendungen wird diese Technologie gerne benutzt, um ein ähnliche Verhalten der Anwendung wie bei einer herkömlichen Desktopanwendung zu realisieren.

Da ein gewisser Teil des Codes von Ajax Anwendungen immer ähnlich ist, gibt es im Internet einige Frameworks die die Programmierung von Ajax Anwendungen erleichtern wollen.

(Quelle: http://www.admin-wissen.de/tutorials/eig...g-in-ajax/)

Hier habe ich ein ein Beispiel auf englisch gefunden: http://www.sematopia.com/?p=34

Dieses wollte ich nun genauer erklären
(es wird darauf hingewiesen, dass das Beispiel nur im firefox geht... laut drweb.de soll es aber auch im IE geben, wenn man javascript anpasst)

zum testen hab ich das ganze mal hier installiert:
http://www.kayela.de/ajax

Wir ihr seht, sind auf der Seite 2 verschiedene Arten darsgestellt um zwei Zahlen miteinder zu multiplizieren.

Die klassische Methode mit PHP

-> Beide zahlen werden innerhalb einer Funktion miteinander multipliziert und das ergebnis im nebenstehenden feld angezeigt

Die Ajaxmethode:
im prinzip das selbe, der unterschied die webseite muss nicht neu geladen werden !!!

So gehen wir mal den Code durch

Die index.php Datei.

[code=php]
include("ajaxClass.php");

$objSem = new ajax;
$objSem->readURLParameters();
$objSem->staticExample();

echo $objSem->result;
[/code]

Die Klasse ajaxClass.php wird geladen.

(Der Rest der Index.php steht etwas weiter unten)

Nun kommt ein wenig OOP Objekt orientierte Programmierung
Eine neue Instanz der Klasse Ajax wird erzeugt und die beiden funktionen readURLParameters(); und staticExample(); werden bearbeitet. am ende wird das ergebnis ausgegeben.

So die Funktionen findet ihr wo?
Natürlich in der ajaxClass.php

hier der Code:
[code=php]<?php

class ajax {

var $queryParam = array();
var $result = 0;
var $num1 = 0;
var $num2 = 0;

function readURLParameters() {
$qstr = explode("&", $_SERVER['QUERY_STRING']);
foreach ($qstr as $value) {
$paramVal = explode("=",$value);
if (array_key_exists(1,$paramVal)) {
$this->queryParam[$paramVal[0]] = $paramVal[1];
}
}
}

function staticExample() {
if (array_key_exists("num1",$this->queryParam) & array_key_exists("num2",$this->queryParam)) {
$this->result = $this->queryParam["num1"] * $this->queryParam["num2"];
$this->num1 = $this->queryParam["num1"];
$this->num2 = $this->queryParam["num2"];
}
}

}
?>[/code]

Sooo dann gehen wir mal schritt für schritt durch

Also erstmal hier findet ihr die beiden Funktionen die erste liest die Parameter aus der URL aus

--> Bei der Abfragae über das PHP Beispiel werden die eingegebenen Werte in die URL übertragen, diese müssen dann noch vom Skript wieder aus der URL ausgelesen werden um verarbeitet werden zu können! Dies tut diese Funktion!
Ich werde jetzt nicht näher auf diese Funktion eingehen, weil es sich dabei nur um PHP handelt

Funktion 2
staticExample

wie dr Name schon sagt, ist sie für das Standard Beispiel zuständig, also das Beispiel mit PHP
hier brauch ich wohl auch nicht näher drauf eingehen? Im Prinzip multipliziert sie nur auf klassischem wege also zahl1 * zahl2 und speichert das ergebnis in einer neuen Variable

so um nochmal auf die Index.php zurück zu kommen
der restliche code

Code:

<html>
<script src="ajax.js" type="text/javascript"></script>
<body>
<br><br>
<p>AJAX Example:</p>
<form name="form1" action="" onsubmit="return ajax_call()">
    <input type="text" name="num1" id="num1"></input> *
    <input type="text" name="num2" id="num2"></input> =
    <input type="text" name="result" id="result"></input>
    <br><br>
    <input type="submit" name="semajax" value="AJAX"></input>
</form>
<!-- -->
<br><br>
<p>Standard Example:</p>
<form name="form1" action="index.php">
    <input type="text" name="num1" id="num1" value=<? echo $objSem->num1 ?>></input> *
    <input type="text" name="num2" id="num2" value=<? echo $objSem->num2 ?>></input> =
    <input type="text" name="result" id="result" value=<? echo $objSem->result ?>></input>
    <br><br>
    <input type="submit" name="semajax" value="Standard"></input>
</form>
</body>
</html>

Das meiste ist ja üblicher HTMl Code dürfte also nicht so schwer sein
wichtig ist:
Die ajax.js Datei wird geladen
Es werden zwei formulare erstellt (im PHP Formular werden die eingegeben werte - sofern vorhanden - als standardwerte eingetragen)

und:
Das Standardformular schickt die Eingaben an die Seite !
Deswegen wird die Page neu geladen !
Das Ajax Formular hingegen sendet die Eingaben an die Funktion return ajax_call()

Die eigentliche Ajax datei
hier die ajax.js

Code:

var xmlhttp=false;

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  xmlhttp = new XMLHttpRequest();
}

function ajax_call() {
    xmlhttp.open("GET", 'ajaxWork.php?num1=' +
                    document.getElementById('num1').value +
                        '&num2=' + document.getElementById('num2').value , true);
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4) {
            document.getElementById('result').value = xmlhttp.responseText;
        }
    }
    xmlhttp.send(null)
    return false;
}

Ok wahrscheinlich gehts euch so wie mir und das ganze sieht auf den ersten Blick zwar irgendwie vertraut (Die Syntax kennt man ja auch Javascript) aber dennoch verwirrend aus
deswegen eins nach dem anderen

Zuerst wird die Variable var xmlhttp auf false gesetzt
ich hab dann auch gleich mal gegoogled und folgendes ist heraus gekommen 8)
http://de.wikipedia.org/wiki/XMLHttpRequest

Hier wird erklärt worum es geht
ich fasse mal eben zusammen

XMLHttpRequest ermöglicht einem Skript einer Webseite, Daten dynamisch vom Webserver abzurufen, ohne dass dazu die Seite neu geladen werden müsste

Das haben wir ja in unserem Beispiel

Da XMLHttpRequest Anfragen asynchron verarbeiten kann, muss ein Script nicht warten, bis die Anfrage beantwortet ist, sondern kann solange andere Aufgaben abarbeiten.

Da spart man ja richtig Zeit

Trotz der guten Verfügbarkeit der API in neueren Browsern wird an ihr auch Kritik geübt, da es schwierig ist, Webseiten, die XMLHttpRequest einsetzen, auch älteren Browsern in vollem Umfang zugänglich zu machen. (...) Ein weiterer Kritikpunkt ist, dass sich Web-Anwendungen, die auf XMLHttpRequest setzen, nur schwer barrierefrei umsetzen lassen.

Aus meiner Sicht beides nicht unwichtige Kritikpunkte. Bei Punkt eins sage ich mal: Es kommt auf die Zielgruppe an, wenn man Ajax auf einer Tutorialpage o.ä. anwenden will kannman eigentlich davon ausgehen, dass die Besuhcer über neuere Browser etc verfügen...

Code:

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  xmlhttp = new XMLHttpRequest();
}

Wenn also die Variable xmlhttp leer ist und XMLHttpRequest noch nicht definiert wurden:

Wird der Variable xmthttp eine neue instanz der klasse XMLHttPRequest zugeteilt.
Dabei handelt es sich um eine vorgefertigte klasse (müsste so sein oder?)
Wenn ich das richtig verstanden habe ist ja XMLHttpRequest die Anfrage die an das Skript gesendet wurde, also speichert die Variable xmlhttp nun alle eingaben

Code:

function ajax_call() {
    xmlhttp.open("GET", 'ajaxWork.php?num1=' +
                    document.getElementById('num1').value +
                        '&num2=' + document.getElementById('num2').value , true);
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4) {
            document.getElementById('result').value = xmlhttp.responseText;
        }
    }
    xmlhttp.send(null)
    return false;
}

Hier nun endlich das Herzstück der Arbeit
Die Funktion ajax_call

1. Sie öffnet aus der Variablen xmlhttp (die ja die Anfrage speichert) die Werte aus dem Formular die sich in den Feldern num1 und num2 und multipliziert sie miteinander
2. "onreadystatechange"

Dazu:

An dieser Stelle muss man dem HTTP Request-Objekt lediglich mitteilen, welche JavaScript-Funktion die Antwort abarbeiten soll. Dies erreicht man, indem man die onreadystatechange-Eigenschaft des Objektes genauso nennt wie die JavaScript-Funktion, welche man benutzen möchte (...)

(http://developer.mozilla.org/de/docs/AJA...ng_Started)

Dieser teil hier if (xmlhttp.readyState==4) { prüft ob die xmlhttp überhaupt VOLLSTÄNDIG ist (siehe dazu einfach wieder http://developer.mozilla.org/de/docs/AJA...ng_Started )
Wenn alles klappt sendet er danach alles wieder an das Formular dabei ird der wert von "result" auf das ergebnis gesetzt

und vóila


so und das war vielleicht etwas trocken.... deswegen kommt im nächsten beitrag etwas selbst erprobtes




Kommentare, Fragen, Korrekture, Ergänzungen?