• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Übernahme Ajax Request in Javascript

W

websurf

New member
Hallo Zusammen,

ich habe ein Problem, dass ich nach langer Suche und etlichen Probierens nicht gelöst bekomme. Zwar habe ich immer mal wieder Hinweise hier im Forum und über google gefunden, aber keine funktionierende Lösung.

In einer Javascript-Datei frage ich mittels Ajax eine php-Datei ab. Die php-Datei liest Daten aus einer Datenbank aus und stellt als Ergebnis die Datenbank-Werte zusammen. Der Ajax Aufruf und die Darstellung des Ergebnisses funktionieren. Wenn ich den request mit <div id="content"></div> in eine andere php-Datei einbinde ist das Ergebnis des Aufrufs zu sehen.
Nun möchte ich das Ergebnis aber nicht in eine html/php-Datei einbinden, sondern in dieselbe Javascript-Datei in der ich den Ajax Aufruf eingebunden habe. Hintergrund ist, dass das Ergebnis der PHP-Datei ein Javascript-Array ist, welches ich in der Javascript-Datei für die weitere Verarbeitung benötige. Wie bekomme ich den Ajax Request in die Javascript-Datei eingefügt damit das Ergebnis sichtbar ist und vom nachfolgenden Jacascript-Code genutzt werden kann?

Hier der Code für den Ajax-Aufruf

Code: 
var request = false;

	// Request senden
	function setRequest() {
		// Request erzeugen
		if (window.XMLHttpRequest) {
			request = new XMLHttpRequest(); // Mozilla, Safari, Opera
		} else if (window.ActiveXObject) {
			try {
				request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5
			} catch (e) {
				try {
					request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6
				} catch (e) {}
			}
		}

		// überprüfen, ob Request erzeugt wurde
		if (!request) {
			alert("Kann keine XMLHTTP-Instanz erzeugen");
			return false;
		} else {
			var url = "test_array.php";
			// Request öffnen
			request.open('post', url, true);
			// Request senden
			request.send(null);
			// Request auswerten
			request.onreadystatechange = interpretRequest;
		}
	}

	// Request auswerten
	function interpretRequest() {
		switch (request.readyState) {
			// wenn der readyState 4 und der request.status 200 ist, dann ist alles korrekt gelaufen
			case 4:
				if (request.status != 200) {
					alert("Der Request wurde abgeschlossen, ist aber nicht OK\nFehler:"+request.status);
				} else {
					var content = request.responseText;
					// den Inhalt des Requests in das <div> schreiben
					document.getElementById('content').innerHTML = content;
				}
				break;
			default:
				break;
		}
	}

Ich hoffe ihr könnt mir helfen, vorab vielen Dank.
 
Klassisches Client-Server-Verständnisproblem. PHP wird auf dem Server ausgeführt, Javascript und HTML im Browser. Das heißt, wenn das PHP Script den Ajax Request bekommt darf es halt nur die Daten zurückgeben, die benötigt werden durch eine Fallunterscheidung. Das heißt, du rufst nicht einfach nur url = "test_array.php"; auf sondern übergibst eine Variable, anhand derer die test_array.php erkennt, aha, jetzt wird der Inhalt für das div benötigt und sonst garnichts. Das PHP gibt dann eben mit echo nur das Gewünschte aus.
 
Erst einmal danke für die schnelle Rückmeldung.

Wenn ich dich richtig verstehe, muss ich in der php-Datei eine Variable definieren die nur den gewünschten Inhalt enthält und nicht die gesamte Programierung (wie z.B. die Datenbankabfrage etc.). Diese Variable übergebe ich dann bzw. rufe diese über den Ajax Request ab. Wie füge ich dann den Inhalt der Variable in die javascript-Datei ein so das diese innerhalb des scripts nutzbar ist? document.getElementById('content').innerHTML = content; ist doch dann wahrscheinlich nicht der richtige Weg. Hast Du vielleicht einen Beispielcode dafür?
 
Immer noch das klassische Verständnisproblem Client-Server. Bei einem Ajax Request wird nichts eingefügt!!! Der Browser macht im Hintergrund den Request, das PHP beantwortet diesen und document.getElementById('content').innerHTML = content; fügt die Antwort in dein Dokument ein. Bei dir liegt es nur an der Serverseite.
Das ist genau der Punkt, für den ich PHP hasse wie die Pest.
 
Die Antwort in irgendein php-Dokument einfügen funktioniert ja, damit müsste die Antwort und das php-Dokument doch richtig sein. Nur wie bekomme ich die Antwort an andere Stelle, hier in das javascript-Dokument? Wenn der Browser den Request ausführt und document.getElement... den Request in das Dokument einfügt müsste dieser Request doch auch für die Javascript-Datei als Dokument zur Verfügung stehen? Nur wie rufe ich den content da auf, mit <div id="content"></div> geht es ja nicht? Versuche mit alert haben mir immer ein leeres Ergebnis geliefert. Bitte nicht steinigen wenn ich es immer noch nicht verstanden habe :)
 
Mach ich, bis hierhin erst einmal Danke für deine Hilfe. Ich hoffe, nach Deinen beiden Links habe ich die Erkenntnis.
 
Sonst frag ruhig nochmal. Dann erklärt es jemand anders nochmal mit anderen Worten. Vielleicht jemand, der PHP auch nutzt.
 
@websurf: wenn das PHP-Skript einfach einen String in JSON zurückliefert, kannst du mit JSON.parse() diesen String in ein reelles JS-Objekt parsen und dann damit weiterarbeiten.
Aber ich würde deinen Code auf jeden Fall umschreiben, denn die Variable "request" ist global und das ist - besonders bei XHR - fehleranfällig.

@mikdoe: Welcher Punkt bei PHP ist es genau, den du so hasst? Auch bei Perl hast du das Server-Client-Prinzip...
 
kkapsner schrieb:
@mikdoe: Welcher Punkt bei PHP ist es genau, den du so hasst? Auch bei Perl hast du das Server-Client-Prinzip...
Zum Vergrößern anklicken....
Ich hasse daran, dass PHP das Server-Client-Prinzip so verwischt. Bei Perl hast du eine klare Trennung. Perlscript = Server, Rest = Client. Bei PHP hingegen hast du im Grunde HTML mit der Extension PHP und kennzeichnest darin PHP Code. An deutlicher Abgrenzung lässt diese Struktur stark vermissen.
Und was daran einfacher sein soll - gerade für Anfänger - weiß ich auch nicht.
 
Zuletzt bearbeitet:
mikdoe schrieb:
bei PHP hingegen hast du im Grunde HTML mit der Extension PHP und kennzeichnest darin PHP Code
Zum Vergrößern anklicken....

Ja, in dem Punkt hast du gewissermaßen recht. Ich halte das allerdings trotzdem nicht für eine "Stolperfalle".
Naja, jeder kommt eben mit was anderem besser klar - ich zum Beispiel mag PHP persönlich gerne, weil ich es für eine sehr einfache und logische Sprache halte. :)
 
mikdoe schrieb:
Bei PHP hingegen hast du im Grunde HTML mit der Extension PHP und kennzeichnest darin PHP Code.
Zum Vergrößern anklicken....
gut, php macht es einem einfach gegen etablierte design pattern zu verstoßen, aber ich kenne keine sprache, die einem das aufzwingt, das bleibt frameworks überlassen.
dass php nun auch noch eine template-engines ist, macht es noch einfacher layout, inhalt und logik zu vermischen. man muss es aber nicht und macht es auch nicht.
 
mikdoe schrieb:
Bei PHP hingegen hast du im Grunde HTML mit der Extension PHP und kennzeichnest darin PHP Code.
Zum Vergrößern anklicken....
Ach so das... deswegen fangen alle PHP-Skripte, die kein View sind, bei mir mit einem "<?php" an - in etwa so wie die Bang bei Perl...

Aber es stimmt schon, dass PHP es einem einfach macht, schlechten Code zu schreiben.
 
Guten Morgen Zusammen,

den Code habe ich überarbeitet, aber irgendwie keine Lösung zum obigen Problem gefunden.

Meine PHP Datei erstellt jetzt ein Array der folgenden Form (die PHP-Datei habe ich per require und echo in ein Dokument geladen und so überprüft):
{"Datenbankspalte1":"Wert1"," Datenbankspalte2":"Wert1"," Datenbankspalte3":"Wert1"}{"Datenbankspalte1":"Wert2"," Datenbankspalte2":"Wert2"," Datenbankspalte3":"Wert3"} etc.

In der javascript-Datei verwende ich jetzt folgenden Code:
Code: 
   var data_file = "test_array.php";
   var http_request = new XMLHttpRequest();
   try{
      // Opera 8.0+, Firefox, Chrome, Safari
      http_request = new XMLHttpRequest();
   }catch (e){
      // Internet Explorer Browsers
      try{
         http_request = new ActiveXObject("Msxml2.XMLHTTP");
      }catch (e) {
         try{
            http_request = new ActiveXObject("Microsoft.XMLHTTP");
         }catch (e){
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }
   http_request.onreadystatechange  = function(){
      if (http_request.readyState == 4  )
      {
        // Javascript function JSON.parse to parse JSON data
        var jsonObj = JSON.parse(http_request.responseText);

        // jsonObj variable now contains the data structure 
        document.getElementById("Datenbankspalte1").innerHTML =  jsonObj. Datenbankspalte1;
        document.write(Datenbankspalte1);
      }
   }
   http_request.open("GET", data_file, true);
   http_request.send();

Mit meinen „Codeversuchen“ komme ich irgendwie nicht weiter, muss aber auch zugeben, dass ich mit ajax bisher nur wenig gearbeitet habe und mir deshalb vielleicht auch die Ideen, das Wissen oder die Lösungsansätze fehlen. Vielleicht hat jemand noch ein paar Tipps (oder eine fertige Lösung die er bereits umgesetzt hat, dann kann ich diesen Code mit meinen Werten füllen und daran "lernen").
 
1. document.write() in einem Eventlistener zu verwenden ist nie eine gute Idee. Und auch sonst ist es den Ärger, den es macht, (meistens) nicht wert. Vergiss' das erst einmal wieder.
2. Du solltest einen Fehler in der Fehlerkonsole sehen, da es die Variable "Datenbankspalte1" nicht gibt.
3. Dein Hauptproblem liegt aber daran, dass du Leerzeichen in den Eigenschaftsnamen deines Objektes (das ist kein Array...) hast (warum hast du die da überhaupt?). JS ignoriert Leerzeichen nach eine "." und liest bei dir also jsonObj.Datenbankspalte1 aus und diese Eigenschaft gibt es nicht. Um das zu lösen kannst du entweder die Leerzeichen am Anfang entfernen oder du verwendest Schema 4 um auf die Einträge zuzugreifen
Code: 
json[" Datenbankspalte1"];

PS: In JS wird meistens die Konvention befolgt, dass Variablennamen in camelCase und nicht mit Unterstrich benannt werden. Ist auch Sprachkern so.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben