Ajax - JavaScript - Rückgabe-Funktion dynamisch übergeben.

NetBull · 21. Januar 2012

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:

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:

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:

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:

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

Quaese · 22. Januar 2012

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:

<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:

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

Ciao
Quaese

NetBull · 23. Januar 2012

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...

Ajax - JavaScript - Rückgabe-Funktion dynamisch übergeben.

NetBull

Erfahrenes Mitglied

Quaese

Moderator

NetBull

Erfahrenes Mitglied

Neue Beiträge