✔ response Text direkt ausgeben (in Anlehnung an das AJAX-Tutorial von Sven Mintel)

karldetlef

karldetlef

Erfahrenes Mitglied
Hallo zusammen,

ein besonderes Dankeschön geht erst einmal an Sven Mintel für sein Tutorial

http://www.tutorials.de/forum/javas...x-http-requests-unter-kontrolle-behalten.html

Mein Problem ist folgendes:
Ich möchte, anstatt eine "oncomplete"-Funktion aufzurufen direkt die ID eines Feldes übergeben. In dieses Feld soll dann per innerHTML die Rückgabe des PHP-Skriptes geschrieben werden.
(Die kritische Stelle im Skript ist bei

//Zuweisen der verarbeitenden Funktion

Anbei noch einmal der Code:
Code: 
ajax.request = function() 
  {
    try{
            //Erstellen [XMLHttpRequest]-Objekt
          this.xhr = window.XMLHttpRequest
                    ? new XMLHttpRequest()
                    : new ActiveXObject("Microsoft.XMLHTTP"); 
			  
            //Setzen der Übermittlungsmethode
          this.method=(typeof this.method == 'undefined')
                        ? 'GET'
                        : this.method;
			  
            //Aufbereiten der Daten		
          this.data=(this.data || '');
			  
          this.postData=(this.method=='GET')
                          ? null
                          : this.data;
			            
            //Aufbereiten der URL			                   
          this.URL=(this.method=='POST' || this.data=='')
                      ? this.URL
                      : (
                          (this.URL.indexOf('?')==-1)
                            ? this.URL+'?'+this.data
                            : this.URL+'&'+this.data
                          );
			   
            //Initialisieren des Requests
          this.xhr.open(this.method,this.URL,true);
			  
            //Senden den 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.postData.length);
              this.xhr.setRequestHeader("Connection", 
                                        "close");
            }
			    
            //Bei Bedarf Nutzung des Cache verhindern
          if(!typeof this.nocache || this.nocache)
            {
              this.xhr.setRequestHeader("If-Modified-Since",
                                        "Thu, 01 Jan 1970 00:00:00 GMT");
            }
			  
            //Zuweisen der verarbeitenden Funktion
          if(typeof this.oncomplete == 'function')
          {
            this.xhr.onreadystatechange = 
                                  function()
                                  { 
                                    if((ajax.xhr.readyState==4) && (ajax.xhr.status==200))
                                      {
                                        ajax.oncomplete(ajax);
                                      } 
                                  };
          }

            //Senden   
          this.xhr.send(this.postData);      
    }
    
  catch(e)
    {
      try{console.log('Fehler:AJAX.request()');}
      catch(e){}
    }
  }
Und ich rufe es so auf:
Code: 
<html>
<head>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
<!--
ausgabe=function()
{
  	var ajax = ausgabe.arguments[0];
	document.getElementById('out').innerHTML = ajax.xhr.responseText;
		
}
//-->
</script>
</head>
<body>
<input type="text" value="leerwert" id="vorher" />
<input value="Starte Request" 
onclick="AJAX(
{
'method':'POST',
'data':'ho=ha&this=that&vorher=' + document.getElementById('vorher').value,
'URL':'machdas.php',
'nocache':true,
'oncomplete':ausgabe
}
).request();"
 type="button">

<div id="out"></div>

</body>
</html>

Mangels meiner Syntax Kenntnisse ist es mir nicht möglich der Aufruf der Funktion mit "ajax" als Objekt durch das document.getElementById(oncomplete).innerHtml.... zu ersetzten.
Ich hab mal folgendes versucht:
Code: 
          //if(typeof this.oncomplete == 'function')
          //{
            this.xhr.onreadystatechange = 
                                  function()
                                  { 
                                    if((ajax.xhr.readyState==4) && (ajax.xhr.status==200))
                                      {
                                      	 document.getElementById(oncomplete) = ajax.xhr.responseText;
                                      } 
                                  };
          //}
Oder auch this.oncomplete funktioniert nicht.
Über Hilfe freue ich mich sehr.

Beste Grüsse, und allen noch ein frohes Neues.
Thomas
 
Moin,

du kannst das AJAX-Objekt um eigene Eigenschaften erweitern, darüber könntest du die ID übermitteln(du müsstest sie allerdings in Anführungzeichen schreiben).

Du kannst als oncomplete-Funktion aber auch gleich die fertige Anweisung übergeben:
Code: 
'oncomplete':function(ajax){document.getElementById('ausgabe').innerHTML=ajax.xhr.responseText}
 
Hi Sven,

vielen Dank, so geht es.

Vielleicht als Anmerkung habe ich in der php-Datei noch einen Header ausgegeben (vor dem anderen output), damit auch "ü, ä, etc." korrekt dargestellt werden:
Code: 
header("Content-Type: text/xml; charset=ISO-8859-1");

Ich muss sagen, das ist das bisher beste Tutorial bezgl. Ajax gewesen.
Und die beste Klasse, da man die JS-Datei nicht mehr berühren muss und alles Variabel halten kann.
So lernt man sich langsam in die Materie ein, aber wie du mit den Funktionen und Objekten rumgespielt hast, war mir etwas schleierhaft =)

Abgesehen davon, warum gibt es bei den meisten Ajax Tutorials verschiedene Arten um den XMLHTTP Request zu senden?

Und dann noch was. Witzigerweise lädt es in Firefox sofort. Im Internet Explorer (v.6.0) dauert es ca. 10 - 30 Sekunden.

Grüsse,
Thomas
 
Zuletzt bearbeitet:
Naja, da mein Hauptaugenmerk auf die eindeutige Beziehung zwischen Request und verarbeitender Funktion lag(was in anderen Tutorials oft übergangen wird), bin ich auf andere Gesichtspunkte eher weniger eingegangen, vielleicht kommt es dadurch etwas verständlicher herüber :-)

Was du mit den verschiedenen Arten von Requests meinst, weiss ich jetzt nicht...das müsstest du näher erläutern :-(

Was den Unterschied FF-IE betrifft, meinst du da das Testbeispiel aus dem Tutorial?
Falls ja, das könnte diverse Gründe haben, es wird beim IE vielleichzt ein Limit an gleichzeitigen Requests geben (beim FF gibt es das zumindest). Falls dies zu gering ist, wäre dies ein Erklärung.
Aber das eigentliche Anliegen des Tutorials bewerkstelligt ja auch der IE... das Abarbeiten aller Requests, ohne bei der Verarbeitung eine Antwort des Servers zu Unterschlagen :)
 
Hi nochmal, das mit den verschiedenen Arten hat sich erledigt. Hab übersehen, dass das ja auch der Fall war mit ActiveX und XMLHttpRequest.
In dem Fall hat sich alles erledigt.
Die Verzögerung im IE ist nicht weiter schlimm, da das System eh nur auf FF benutzt wird.
Merci nochmal für die schnelle Antwort.
Byebye...
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück