Hi Leute,

ich kämpfe immer noch mit JavaScript, aber bin nicht mehr ganz so verzweifelt.

Aktuelle möchte ich ein Ajax Request dynamisch gestalten.
Es wird bei Request an PHP der Name einer Klasse übergeben und der Name einer Funktion aus der Klasse, welche dann den Request abarbeiten.

Das klappt auch schon ganz gut.

Aber ich möchte dem Request auch übergeben welche JavaScript Function auf zu rufen ist, wenn ein Response kommt.

So hab ich mir das gedacht:

Soll eine Ajax Anfrage auslösen:

Code :

1 2 3 4 5 6 7 8 9 10 11

function doRequest()     {// wird gestartet wenn ein Button geklickt wird                 var resFunc = new function()         {// soll bei einem Response aufgerufen werden             onAjaxResponse();         }           // startet die Ajax Anfrage         startAjaxRequest("test=1&muster=2", false, resFunc);     }

und die hier soll dann ausgeführt werden wenn ein Response ausgelöst wurde

Code :

1 2 3 4 5 6 7 8

function onAjaxResponse()     {// soll ausgeführt werden wenn von PHP ein Response geliefert wurde.         var doResponse = new function()         {             // nun soll die Ausgabe der reponseText oder das responseXML sein             alert( "xxx" );         }     }

Initiierit den XmlRequest:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

var gAjaxResponseClassPath = "clsAjaxResponse.php";         function initiateAjaxRequest(aReturnFunction)     {//*** creates an AjaxObject which is valid for all browsers                 var XmlRequest=null;         var mReturnFunction = aReturnFunction;         try         {// most browsers, also newer IE-browsers             XmlRequest = new XMLHttpRequest();         }         catch (e)         {             try             {// older brwowsers                     XmlRequest = new ActiveXObject("Msxml2.XMLHTTP");               }             catch (e)             {                 try                 {// older IE-browsers                     XmlRequest = new ActiveXObject("Microsoft.XMLHTTP");                 }                 catch (failed)                 {//*** if all where failing, return nothing                     XmlRequest = null;                 }             }           }                 // attach a ready-state event to the xmlRequest         XmlRequest.onreadystatechange = function(mReturnFunction)         {                       switch(XmlRequest.readyState)             {                 case 4:                     if(XmlRequest.status!=200)//*** on error states                         XmlRequest.responseText = "ERROR #"+XmlRequest.status+" detected! Could not get a response from Server!";                     if(XmlRequest.status==200)//*** on good states                     {                         aReturnFunction.doResponse;                     }                     break;             }         };                 return XmlRequest;     }

Startet den Request

Code :

1 2 3 4 5 6 7

function startAjaxRequest(aRequestArguments, aIsAsyncrom, aX)     {         var XmlRequest = initiateAjaxRequest(aX);         XmlRequest.open("post", gAjaxResponseClassPath, aIsAsyncrom); //*** request is syncron******         XmlRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");         XmlRequest.send(aRequestArguments);     }

Ich bekomme zwar meine Ausgabe, in dem Fall nur "xxx" aber der Request wird erst nachher ausgelöst, anstatt wie ich nun erwartet hätte, das der Request initiiert wird und dann im Response Fall mein Objekt aufruft.

Was mach ich hier falsch? Oder ist der Weg vollkommener Schwachsinn?

LG deAndro

Hi,

wenn du es schon kapseln möchtest, solltest du es auch so realisieren, dass die Methoden open, send und setRequestHeader ebenfalls in der Pseudo-Klasse umgesetzt sind.

Im Anschluss zeige ich dir einen Ansatz, den ich verfolgen würde. Dabei handelt es sich jedoch nur um ein Basiskonstrukt ohne weitere Prüfung der Parameter und Optionen.

Die Erklärungen finden sich im Quellcode in den entsprechenden Kommentaren.

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120

<html> <head> <title>www.tutorials.de</title> <meta name="author" content="Quaese"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"> <!-- var gAjaxResponseClassPath = "xmlhttp_request_dummy.php";   /*  * Erstellt eine Pseude-Ajax-Klasse, die über ein Optionsobjekt konfiguriert werden kann  *  * Optionen:  * - url    : (string) URL, default: ""  * - method : (string) Requestmethode (post, get ...), default: post  * - async  : (bool) asynchroner (true) oder synchroner (false) Request, default: true  * - data   : (string) Datenstring, der übergeben werden soll (Form: [?]para1=val1&para2=val2&...&para_n=val_n), default: ""  * - success: (function) callback-Funktion, die bei erfolgreichem Request mit dem XHR-Objekt als Parameter aufgerufen wird, default: undefined  *  * Angestossen wird der Request mit der Methode request  * Bsp.: initiateAjaxRequest({url: 'request.php', data: 'test=1'}).request();  */ function initiateAjaxRequest(options){   var ajax = {     url: "",     method: "post",     async: true,     data: "",     success: undefined //funcition(xhr){}   };     // Optionen erweitern   for(var key in options)     ajax[key] = options[key];     ajax.request = function(){     var _this = ajax;       try{// most browsers, also newer IE-browsers         _this.xhr = new XMLHttpRequest();     }catch(e){       try{// older brwowsers           _this.xhr = new ActiveXObject("Msxml2.XMLHTTP");       }catch(e){         try{// older IE-browsers             _this.xhr = new ActiveXObject("Microsoft.XMLHTTP");         }catch(failed){//*** if all where failing, return nothing             _this.xhr = null;         }       }     }       // Methodenstring normieren     _this.method = _this.method.toUpperCase();       // String für send-Methode generieren     _this.sendData = (_this.method == "GET")? ((/*@cc_on ! @*/false)? null : true) : _this.data;       // URL anpassen     _this.url = (_this.method=="POST" || _this.data=="")                 ? _this.url                 : ((_this.url.search(/\?/)==-1)                    ? _this.url + "?" + encodeURI(_this.data)                    : _this.url + "&" + encodeURI(_this.data)                   );       _this.xhr.open(_this.method, _this.url, _this.async);       // Falls es sich um einen POST-Request handelt -> senden der bei POST erforderlichen Request-Header     if(_this.method == "POST"){       _this.xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");       _this.xhr.setRequestHeader("Content-length", _this.sendData.length);       _this.xhr.setRequestHeader("Connection", "close");     }       if(_this.success!==undefined){       _this.xhr.onreadystatechange = function(){         if((_this.xhr.readyState==4) && (_this.xhr.status==200)){             // Übergebene callback-Funktion mit XHR-Objekt aufrufen           _this.success(_this.xhr);         }       }     }       _this.xhr.send(_this.sendData);     } // END - ajax.request     return ajax; }   /* Initiert den Ajax-Request  * Parameter:  * - aRequestArguments: (string) Datenstring, der übergeben werden soll (Form: [?]para1=val1&para2=val2&...&para_n=val_n)  * - aMethod : (string) Requestmethode (post, get ...)  * - aIsAsyncron  : (bool) asynchroner (true) oder synchroner (false) Request  * - fnSuccess   : (function) callback-Funktion, die bei erfolgreichem Request mit dem XHR-Objekt als Parameter aufgerufen wird  */ function startAjaxRequest(aRequestArguments, aIsAsyncron, fnSuccess, aMethod){   initiateAjaxRequest({     url: gAjaxResponseClassPath,  // aus globaler Variable (siehe oben)     data: aRequestArguments,     async: aIsAsyncron,     success: fnSuccess,     method: aMethod   }).request(); }   // Callbackfunktion (wird ausgeführt, wenn Request erfolgreich war) var mySuccess = function(xhr){     alert(xhr.responseText); } //--> </script> </head> <body> <button onclick="startAjaxRequest('test=1', true, mySuccess, 'post')">test=1</button> <button onclick="startAjaxRequest('test=2', true, mySuccess, 'get')">test=2</button> </body> </html>

Zum Testen habe ich folgendes kleine PHP-Fragment verwendet:

Code :

1 2 3 4 5 6 7 8

<?php if(isset($_REQUEST['test'])){   if($_REQUEST['test'] == 1)     echo('Erste Antwort: ' . 1);   else     echo('Zweite Anwort: ' . 2); } ?>

Ciao
Quaese

cool... es funktioniert, werde mir das in den nächsten Tagen mal genauer zur Brust nehmen. Viele neue Aspekte drin die ich in JavaScript so noch nicht kenne. Java Script ist so anders als andere Sprachen. Wird noch was dauern bis ich da heimisch bin. Wünsche Dir einen angenehmen Start in die Woche...