Okay Firesymon hier noch einmal für Dich nun.
pack den Code hier in die Load.class.js oder in eine Datei deiner Wahl.
Code:
/**
* Load Object
* um Bilder , Ajax oder XML Datein zu laden
* XML Datein hab ich dann erstmal bleiben lassen also mehr oder weniger
* ungetestet
*/
var Load = {
send:true,
imageFile:function(object) {
var lIF_Values = new Array();
var lIF_onProcess = false;
var lIF_inProgress = null;
var lIF_loaded = null;
var lIF_pS = null;
var lIF_pI = null;
var callback = null;
var returnparams = null;
if(typeof object == 'string')
lIF_Values.push(object);
else
for(var i = 0 ; i < object.length ; i++) lIF_Values.push(object[i]);
function loadSingleImage () {
var imgFile = new Image();
imgFile.onload = function () {
if(lIF_Values.length > 1) {
lIF_Values.shift();
window.setTimeout(loadSingleImage,25);
} else {
if(lIF_pS) Element.unlink(lIF_pS);
if(callback) callback.call(callback,object,(returnparams)?returnparams:null);
}
imgFile.onload = function () {};
}
imgFile.src = lIF_Values[0];
}
this.initLoad = function (preloadlayer,cb,rp) {
returnparams = rp;
callback = cb;
lIF_pS = preloadlayer;
loadSingleImage();
}
},
ajaxContent:function (configFile) {
var config = configFile;
var callback = null;
var lAC_pS = null;
var returnparams = null;
var http_request = null;
function addPostParams(paramsObj) {
var postParams = null;
for(key in paramsObj) {
if(!postParams)
postParams = key+"="+encodeURIComponent(paramsObj[key]);
else
postParams += "&"+key+"="+encodeURIComponent(paramsObj[key]);
}
return (postParams)?postParams:'';
}
function addGetParams (paramsObj) {
var getParams = null;
for(key in paramsObj) {
if(!getParams)
getParams = "?"+key+"="+encodeURIComponent(paramsObj[key]);
else value_param1
getParams += "&"+key+"="+encodeURIComponent(paramsObj[key]);
}
return (getParams)?getParams:'';
}
function getAjaxContent() {
if(window.XMLHttpRequest)
http_request = new XMLHttpRequest();
else
http_request = new ActiveXObject("Microsoft.XMLHTTP");
if(config.method == 'POST') {
http_request.open(config.method,config.path,true);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
http_request.setRequestHeader("accept-charset","UTF-8;");
http_request.send(addPostParams(config.params));
} else {
var getParams = addGetParams(config.params);value_param1
/*
* IE Fix:
* Der Internet Explorer cacht die Datei und lŠd sie neu so das die HTTP XML Request nie
* ausgeführt wird. Somit noch einen Timestamp mit anhŠngen so das die Seite jedesmal
* neu geladenwird
*/
if(navigator.appName == 'Microsoft Internet Explorer') {
var t = new Date();
if(getParams || config.path.match(/\?/gi)) {
getParams += '&'+Element.generateId(10)+'='+t.getTime();
} else {
getParams += '?'+Element.generateId(10)+'='+t.getTime();
}
}
http_request.open('GET',config.path+''+getParams,true);
http_request.send(null);
}
http_request.onreadystatechange = function () {
try {
if(http_request.readyState == 4) {
if(http_request.status == 200) {
var requestVal = http_request.responseText;
/*Preloader entfernen soweit vorhanden */
if(lAC_pS) {
Element.unlink(lAC_pS);
lAC_pS = null;
}
if(callback) {
callback.call(callback,requestVal,returnparams);
}
}
}
} catch (e) {
//sollte der Request abgegbrochen werden über http_request.abort( )
//wirft der FF aktuell eine Exception die wir hier mal gekonnt abfangen
}
}
}
this.cancelRequest = function () {
if(lAC_pS) {
Element.unlink(lAC_pS);
lAC_pS = null;
}
http_request.abort();
http_request = false;
}
this.initLoad = function (preloadlayer,cb,rp) {
callback = cb;
returnparams = rp;
lAC_pS = preloadlayer;
getAjaxContent();
}
},
XMLDocument:function (file,callback) {
try {
var xmlFile = new XMLHttpRequest();
} catch (e) {
try {
var xmlFile = new ActiveXObject("Msxml2.XMLHttp");
} catch (e) {
try {
var xmlFile = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {
var xmlFile = null;
}
}
}
if(xmlFile) {
xmlFile.onreadystatechange = function () {
if(xmlFile.readyState == 4) {
callback.call(null,xmlFile);
}
}
xmlFile.open('GET',file,true);
xmlFile.send(null);
} else {
alert('Ihr Browser kann leider keine XML Datein öffenen');
}
}
}
Nun die HTML Datei
Code:
<html>
<head>
<script type="text/javascript" src="Load.class.js"></script>
<script type="text/javascript">
function setRequest () {
var ajaxConfig = {
method:'GET', // wie senden
path:'index.php', // wohin senden
params:{ // weitere Parameter
section:'displayNames' // $_GET['section'] = 'displayNames'
// weitere Parameter
}
}
var load = new Load.ajaxContent(ajaxConfig); // Configuration mit geben
load.initLoad(null,allDone); // kein Preload Layer
// callback funktion
/**
* fängt Ajax Request auf
*@param String requestvalue
*/
function allDone (requestvalue) {
// hier beliebiger JS Code
//nun rufen wir die funktion setRequest wieder auf
window.setTimeout(setRequest,10000); // und zwar in ca 10 sekunden
}
}
window.onload = function () {
setRequest();
}
</script>
</head>
<body>
<div id="testlayer">
</div>
</body>
</html>
Also mehr kann/will ich da nun auch nicht mehr machen , entweder bau es so ein , änder es ab oder mach etwas anderes damit. Wenn Du Ajax benutzen willst brauchst halt doch ein paar Grundlagen sonst wird das nichts.
Bei mir gehst um nen BrowserGame, dass ich versuche zu basteln, demnach werd ich also wohl JS nehmen, da die PHP-Skripte reagieren sollen, wenn der User was macht...
Ich hab da dann nur noch nen Problem mit der Flexibilität...
So wie ich AJAX verstehe, müsste ich theoretisch für jeden Request nen AJAX-Skrpt bauen...
Ich würde aber lieber nur eine JS-Funktion für den Request benutzen, der je anchdem was ihm gefüttert wird den entsprechenden PHP-Skript ansteuert und die Antwort entsprechend verarbeitet...
Um AJAX an sich zu benutzen brauch man ja nur nen kleinen Code-Schnipsel...
Aber wie mach ich den Flexibel... Sodass ich über diesen EINEN Code, VERSCHIEDENE Request absetzen kann, die VERSCHIEDENE Fensterteile ändern und dementsprechend auch UNTERSCHIEDLICHE PHP-Skripte(*.php-Files) ansprechen?
Naja man kann in JavaScript OOP Programmieren wenngleich sich da die Meinungen scheiden, also Funktionen leiten sich von Object ab , somit sind Funktionen auch Funktionsobjekte.
Mit
var xyz = new Functionname(); machst Du aus der Funktion eine Konstruktorfunktion und speicherst eine Instanz von der Funktion ab. Das ist das gleiche was in meinen Script oben passiert , nur das dieses etwas kompakter ist auch schon älter naja.
Mit new Load.ajaxContent() bilde ich eine Instanz von dem Funktions Objekt ajaxContent() welche im Object Load liegt.
Ich habs nur Load genannt da es mehere Dinge zusammen fasst wie ein Container.
Was das Load.ajaxContent() erwartet ist wieder rum ein Object , dort gebe ich an was wichtig zu wissen ist für den Ajax Request. Wohin soll es gehen (path) , wie soll es gesendet werden (method) , welche Parameter (Object params).
in Form eines Objekts
Code:
var ajaxConf = {
method:'GET',
path:'index.php', // das ginge auch path:'buxtehude.php?name=dieter&xyz=3'
params:{
section:'displayNames',
id:2
}
}
Was dann ankommt kann man sich ungefähr so vorstellen.
index.php?section=displayNames&id=2
Davon kann ich mir nun x beliebig viele erstellen.
Mit Load.ajaxContent().initLoad() starte ich das ganze dann. in der Methode gebe ich noch zusätzlich eine Callback Methode an (da muss man in der Doku mal nach
function.call() suchen ).
Das soll heissen ist mein Ajax Request gesendet und PHP hat mir die notwendigen Daten gesendet , startet er die Callback methode das kann eine Funktion sein die man frei definiert hat und dem übergebe ich dann noch die Rückgabe Werte von PHP.Die Funktion muss auch nicht immer den selben Namen haben. Da kannst sonstwas rüber schubsen.
Somit könntest Du x beliebig viele Instanzen der Funktion haben und jede hätte ihre eigenen Werte.Er würde das dahin schicken wohin du sagst er soll es dort hin schicken sofern es sich auf deinen eigenen Webserver befindet. Andere Server kann man mit Ajax nicht kontaktieren.
Gibt es auch einiges lesenswertes dazu OOP in JavaScript , bei Wikepedia hab ich was gefunden und auf einschlägigen Webseiten. Einfach mal OOP Javascript bei Google reinwerfen.
