Rasmus

Auf dieser Seite:

Ajax leichtgemacht

Das einfachste Ajax

Dieses einfache Ajax-Set von Rasmus habe ich durch Googeln gefunden und etwas angepasst und auskommentiert. Selber machen, spart viel überflüssigen Code, der sonst durch eine Alleskönner-Bibliothek eingebunden würde.

Es sind 4 Dateien involviert:

ajax_rasmus.php: Diese Datei HTML, lädt die Datei ajax_rasmus.js mit der Ajax-Funktionalität, übergibt ihr (per Eventhändler) zwei Parameter. Am Ende wird hier das Resultat in einer div-Box darstellt, ohne dass die Datei neu geladen wurde.
ajax_rasmus.js: Die geladene JavaScript-Datei als Kernstück von Ajax. Sie erstellt das Request-Objekt und die Anfrage an das php-Script ajax_rasmus_server.php auf dem Server. Sie wartet auf die Antwort und schreibt sie in die div-Box.
ajax_rasmus_server.php: Eine PHP-Datei, welche die Anfrage vom JavaScript auf dem Server verarbeitet und die Antwort an das JavaScript mit echo zurück gibt.
ajax_rasmus_info.php: Eine Datei, welche eine Datenbank simuliert und Werte bereithält, die ajax_rasmus_server.php sucht.

Starte den Ajax-Request

Hier hinein kommt das Resultat

1. HTML

2. JS

//-----------------------------------------------------------------------------
// RequestObject
//-----------------------------------------------------------------------------
function createReqObj() {
var robj;
var Client = navigator.appName;
if(Client == "Microsoft Internet Explorer"){
robj = new ActiveXObject("Microsoft.XMLHTTP");
// alert ("IE");
}else{
robj = new XMLHttpRequest();
// alert ("not IE");
}
return robj;
}
// save RequestObject

var robj = createReqObj();

//-----------------------------------------------------------------------------
// sendRequest to ajax_rasmus_server.php
//-----------------------------------------------------------------------------
function sndReqForBox(box,parameter) {
// alert ("Box="+box+" und Parameter="+parameter);
robj.open('get', 'ajax_rasmus_server.php?box='+box+'&parameter='+parameter, true);
robj.onreadystatechange = handleResponz;
robj.send(null);
}

//-----------------------------------------------------------------------------
// handleResponz after ajax_rasmus_server.php
//-----------------------------------------------------------------------------
function handleResponz() {
if(robj.readyState == 4){
var responz = robj.responseText;
// alert ("robj.responseText: " + robj.responseText);
var VollesRohr = new Array();
// Antwort auseinandernehmen
if(responz.indexOf('|' != -1)) {
VollesRohr = responz.split('|');
// Darstellung der Antwort
document.getElementById(VollesRohr[0]).innerHTML = VollesRohr[1];
}
}
}

3. server PHP

<?php
###############################################################################
# request parameters and make variables
###############################################################################
// durch den Aufruf in ajax_rasmus.js wurden Parameter übertragen
// die erste Variable gibt die Box bekannt in der die Antwort ausgegeben wird,
// sie wird eigentlich nur durchgereicht
$box=$_REQUEST['box'];
// die zweite Variable gibt an, was ich suchen muss
$parameter=$_REQUEST['parameter'];

##############################################################################
# prepare the value with the requested parameter
##############################################################################
// was ich durch Ajax ausgeben will, es wird jetzt auf dem Server zusammengeklaubt
// dieser include simuliert z.B. eine Datenbank, die Datei beinhaltet einen Array $var[]
include "ajax_rasmus_info.php";
// durch den Parameter hole ich mir den gesuchten Wert
$vari=$var["$parameter"];

##############################################################################
# prepare and send a string back with echo
##############################################################################
// erstelle einen String aus Teilen, die nachher durch das JavaScript seperat verwertet werden
// trenne die Teile durch einen |
// der erste Teil ist die Angabe der Box
// der zweite Teil ist der gesuchte Wert
// der erste echo-Befehl wird zur Antwort für das Ajax-Object
echo $box."|".$vari; // this is the request answer
// hätte ich nachher noch weitere echos, so wären sie nicht in obiger Antwort enthalten
?>

4. DB

<?php
// Ich mime eine Datenbank
$var[0]='Ich bin der Wert der Variablen $var[0]';
$var[1]='Ich bin der Wert der Variablen $var[1]'; // diese Variable wird gesucht (Parameter 1)
$var[2]='Ich bin der Wert der Variablen $var[2]';
$var[3]='Ich bin der Wert der Variablen $var[3]';
?>

Check den Code.

Asynchron >> << Ajax:

Ich bin hier: > Andere Sprachen Lehrling >>> Rasmus