httpRequest

[Michel]

Hallo,

ich möchte mit dem xmlhttpRequest mit JS auf eine externe xml Datei zugreifen (kml sollte doch auch gehen?), diese in einer Variablen speichern und dann einzelne Knoten auslesen. Habs versucht doch ohne Erfolg.

Ein alert ergibt siehe Code:
httpRequest.status ist 0
httpRequest.statusBody ist undefined

Habe schon einige Beispiele aus dem Netz ausprobiert, doch es will nicht funktionieren. Hoffe auf Tipps oder Aufklärung...

  function initialize() {	  

var httpRequest;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            httpRequest = new XMLHttpRequest();
            if (httpRequest.overrideMimeType) {
                httpRequest.overrideMimeType('text/xml');
                // See note below about this line
            }
        }
        else if (window.ActiveXObject) { // IE
            try {
                httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e) {
                try {
                    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e) {}
            }
        }

if (!httpRequest) {
            alert('Giving up :( Cannot create an XMLHTTP instance');
            return false;
        }
        httpRequest.onreadystatechange = function() { alertContents(httpRequest); }

	function alertContents(httpRequest) {  
	httpRequest.open('GET', 'domain/file.kml', true);  

httpRequest.send('');
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
var xmldoc = httpRequest.responseXML;
var root_node = xmldoc.getElementsByTagName('Document').item(0);
} else {
//DIESES ALERT WIRD AUSGEGEBEN
alert('There was a problem with the request. Status: ' +httpRequest.status+'   statusBody: '+httpRequest.statusBody);
}
}
}
}

Gruß und Dank
Michel

[zaphod1984]

du initialisierst zwar den http-request, schickst ihn aber nie ab.

[Michel]

du initialisierst zwar den http-request, schickst ihn aber nie ab.

könntest du mir sagen, was noch fehlt um den request abzuschicken und wo ich das einbauen müsste? Bin halt nicht so fit darin.

[ChrisB]

Hi,

httpRequest.onreadystatechange = function() { alertContents(httpRequest); }

  function alertContents(httpRequest) {  
  httpRequest.open('GET', 'domain/file.kml', true);  

httpRequest.send('');
if (httpRequest.readyState == 4) {

Das sieht so aus, als ob du irgendwelche Codezeilen zusammenkopiert hättest, ohne jegliches Verständnis dafür, wozu sie eigentlich dienen sollen.

Die Funktion, die du als readyState-Handler angibst, wird erst aufgerufen, wenn der Status des Requests sich ändert. Den Request erzeugen und absenden, das willst du allerdings in dieser Funktion erst machen - erkennst du eine Katze, die sich in den Schwanz beißt, wenn du sie siehst ...?

Schau bitte in ein Tutorial, dass dir die Grundlagen im Umgang mit XMLHttpRequest/AJAX erläutert.

MfG ChrisB

[Michel]

Hallo,

Das sieht so aus, als ob du irgendwelche Codezeilen zusammenkopiert hättest, ohne jegliches Verständnis dafür, wozu sie eigentlich dienen sollen.

Richtig, hab diese Codezeilen zusammenkopiert. Bin davon ausgegangen, dass der Code aus dem Netz auch funktioniert. Jedenfalls hab ich den Code aus einem Tutorial (und schon mehrere Ausprobiert). Einige Grundlagen denke ich zu kennen, aber ich weiß nicht warum der Status des XMLHttpRequest-Objekts 0 ist! Bin für jede Anregung und Hilfe dankbar. Mach schon mehrere Tage dran rum und komm auf keinen grünen Zweig.

Hab den Code nochmal etwas verändert und weiß nicht warums nicht funktioniert:
var myurl = 'domain/file.kml'
var http_request = false;
macheRequest(myurl);
function macheRequest(url) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
// zu dieser Zeile siehe weiter unten
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}

		if (!http\_request) {  
			alert('Ende :( Kann keine XMLHTTP-Instanz erzeugen');  
			return false;  
		}  
		http\_request.open('GET', url, true);  
		http\_request.send(null);  
		http\_request.onreadystatechange = alertInhalt;  
	}  

	function alertInhalt() {  
		if (http\_request.readyState == 4) {  
			if (http\_request.status == 200) {  
				alert("http\_request.responseText");  
			} else {  
				alert('Bei dem Request ist ein Problem aufgetreten. Status:'+http\_request.status+'  Statustext:'+http\_request.statusText + '  readyState:' + http\_request.readyState);  
			}  
		}  
	}  

Hat noch jemand ne Idee?
Michel

[hotti]

hi,

var myurl = 'domain/file.kml'

Wenn da der Request hingeht, was bekommst Du denn als Antwort? Das kannst Du auch mit einem normalen Browser testen. Also bring erstmal das Request/Response-Spiel in Ordnung, wenn das tut, funktioniert das auch mit Ajax.

Hotti

[Michel]

Hallo Hotti,

var myurl = 'domain/file.kml'

Wenn da der Request hingeht, was bekommst Du denn als Antwort? Das kannst Du auch mit einem normalen Browser testen. Also bring erstmal das Request/Response-Spiel in Ordnung, wenn das tut, funktioniert das auch mit Ajax.

Als Antwort, also wenn ich 'alert(http_request);' über die Zeile: 'alert('Bei dem Request ist ein Problem aufgetreten. Status:'+http_request.status+'  Statustext:'+http_request.statusText + '  readyState:' + http_request.readyState);' einfüge kommt ein 'XMLHttpRequest Objekt' zurück.
Hast du eine Ahnung, warum der http_request.status null ist und beim http_request.statusText ok kommt?

Mein Vorhaben:
Die Antwort des Requests, also das XML-Objekt möchte ich in einer Variablen speichern und dann über den DOM-Zugriff Elemente auslesen.
Vermutlich läuft aber schon beim Request etwas schief?

Michel

[Struppi]

var myurl = 'domain/file.kml'

Wenn da der Request hingeht, was bekommst Du denn als Antwort? Das kannst Du auch mit einem normalen Browser testen. Also bring erstmal das Request/Response-Spiel in Ordnung, wenn das tut, funktioniert das auch mit Ajax.

Als Antwort, also wenn ich 'alert(http_request);' über die Zeile:

Hotti meint, du sollst die obige URL einfach mal im Browser eingeben.

Struppi.

[Michel]

Hotti meint, du sollst die obige URL einfach mal im Browser eingeben.

Wenn ich die url in einen Browser eingebe ruft er sie auf bzw. fragt öffnen oder speichern.

[Struppi]

Hotti meint, du sollst die obige URL einfach mal im Browser eingeben.
Wenn ich die url in einen Browser eingebe ruft er sie auf bzw. fragt öffnen oder speichern.

Mit welchem Browser?

Struppi.

[Michel]

Mit welchem Browser?

Firefox 3.6.2

Na, Du solltest schon wissen, wie die Response aussieht, bzw, was du da erwartest.

Erwartet hätt ich eine XML-Datei, die ich in einer Variablen speichern und dann auslesen kann.
Wie kann ich feststellen wie die Response aussieht?
Was kann ich tun damit meine Erwartungen eintreffen?
Danke für eure Hilfe und sorry wenn ich mich deppert anstell...

Michel

[hotti]

hi,

Wie kann ich feststellen wie die Response aussieht?

Ein FF-Browser sollte eine XML-Datei anzeigen können.

Was kann ich tun damit meine Erwartungen eintreffen?

Die Datei/Response sollte von dem Server kommen, von dem auch das JS/Ajax für den Browser geliefert wurde (Same origin policy). Ich vermute mal, das ist bei Dir nicht der Fall, daher kommt auch kein status 200 für das xhr-Objekt.

(Fehlerkonsole beachten)

Hotti

[Michel]

Hi,

Die Datei/Response sollte von dem Server kommen, von dem auch das JS/Ajax für den Browser geliefert wurde (Same origin policy). Ich vermute mal, das ist bei Dir nicht der Fall, daher kommt auch kein status 200 für das xhr-Objekt.

Die XML-Datei liegt auf dem selben Server wie die .js, allerdings in einem anderen Verzeichnis. Das sollte doch trotzdem funktionieren.

(Fehlerkonsole beachten)

Fehlerkonsole zeigt keine JavaScript-Fehler an.

Michel

[hotti]

hi,

Fehlerkonsole zeigt keine JavaScript-Fehler an.

Ok, dann bringen wir mal den Code ins Reine:

  
// Erstelle XHR Objekt als Return-Value  
function mob(){  
	var mob = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");  
	return mob;  
}  
  
// ajax core  
function ajaxRequest(hash){  
	var xhr = mob(); // funktion s.o.  
  
	function rx(){  
		if(xhr.readyState == 4){  
			if(xhr.status == 200){  
				hash.callback(xhr.responseText);  
			}  
			else{ hash.errstr = 'Server anwortet nicht'; }  
		}  
	}  
  
	if(hash.method == 'POST'){  
		xhr.open("POST", hash.url, true);  
		xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  
		xhr.setRequestHeader("Content-length", hash.params.length);  
		xhr.setRequestHeader("Connection", "close");  
		xhr.send(hash.params);  
		xhr.onreadystatechange = rx;  
	}  
	else{  
		var url = hash.url + '?' + hash.params;  
		xhr.open("GET", url, true);  
		xhr.send(null);  
		xhr.onreadystatechange = rx;  
	}  
  
	return true;  
}  
  

Um den Request zu senden, wird wiederum ein Objekt erstellt:

  
        <script type="text/javascript">  
            var stat = {  
                callback: function(response){  
                    alert(response);  
                    if(this.errstr) alert(this.errstr);  
                },  
                call: function(){  
                    this.url = '/cgi-bin/perllog.cgi'; // Dein URL  
                    this.params = ''; // erstmal leer  
                    this.method = 'GET'; // POST geht auch mit o.g. scr  
                    ajaxRequest(this);  
                }  
            }  
  
            stat.call(); // hier wird der Request gesendet  
  
        </script>  

Zum Aufruf der lib "ajaxCore" wird hierzu ein Obj. "stat" erstellt, das kannst Du auch anders nennen. Wichtig sind die 3 Eigenschaften url, params, method. Das Objekt beiinhaltet die Callback-Funktion, darüber kommt die Response zurück. Der Einfachheit halber wird in der Callback-Funktion die Response als alert() ausgegeben. Damit Du erstmal siehst wie das geht. Wichtig: der Request-URL sollte entweder full qualifiziert sein als "http://example.com/ressource" oder, weil SOP, als "/ressource" ("/" steht für Deinen Server, rootDir).

Struppi hat an anderer Stelle (musst mal suchen) auch einen schönen Code mal veröffentlicht. Aber probier mal den Obenstehenden, der tut. Die beiden Funktionen ajaxRequest() und mob() kannst du auch auslagern.

Hotti

[hotti]

hi again,

hash.callback(xhr.responseText);

Bei Dir:
hash.callback(xhr.responseXML);

Hotti

[Michel]

Hi,

vielen lieben Dank für eure Hilfe und ganz besonders Hotti - auch für den Code. Es funktioniert wie gewünscht. Konnte den Code auch weitestgehend nachvollziehen.

Vielleicht kann mir noch jemand nen kleinen Tipp geben.
Wenn ich die Antwort des Requests bekomme und diese in eine Variable speichere sollte ich doch auch auf die Knoten der XML-Datei zugreifen können, oder?

Ich würds mir ungefähr so vorstellen:
var xmlDatei = xhr;  //(XMLHttpResponse-Objekt)
var knoten = xmlDatei.getElementsByTagName('tagname');
alert(knoten.data); //kommt undefined

Michel

[hotti]

hi,

Wenn ich die Antwort des Requests bekomme und diese in eine Variable speichere sollte ich doch auch auf die Knoten der XML-Datei zugreifen können, oder?

Ja, freilich, bedenke: Dies muss _immer_ innerhalb der Callback-Funktion gemacht werden. Und die wird aufgerufen, wenn Status 200 anliegt.

Ich würds mir ungefähr so vorstellen:
var xmlDatei = xhr;  //(XMLHttpResponse-Objekt)

Stop, stop, stop. Du kriegst die Response in die callback-Funktion, die innerhalb des Super-objects definiert ist. Diese Response ist XML. JS kann damit umgehen, eine XML-Response wird in JS ähnlich wie ein Objekt/Array betrachtet. Du kannst also die Attribute/Values ermitteln, aber hierzu lies nochmal nach.

Du bist auf dem richtigen Weg ;-)
Hotti

[Michel]

Yep, den Rest les ich nach und nochmals vielen Dank an alle die hier bei selfhtml mitwirken.
Ihr habt mir mal wieder sehr geholfen :-)
Michel

[Linksetzer.]

https://developer.mozilla.org/en/AJAX/Getting_Started

[Struppi]

Vielleicht kann mir noch jemand nen kleinen Tipp geben.
Wenn ich die Antwort des Requests bekomme und diese in eine Variable speichere sollte ich doch auch auf die Knoten der XML-Datei zugreifen können, oder?

Das paßt alles irgendwie nciht, wenn du wirklich eine XML Datei hast, die aber im Firefox nicht angezeigt wird, dann läuft das was falsch und du kannst auf den Inhalt über getElements... zugreifen.

Du solltest auf jeden Fall dieses Problem noch klären.

Struppi.

[Struppi]

Mit welchem Browser?
Firefox 3.6.2

Dann sendet der Server einen falschen Mime-Type

Na, Du solltest schon wissen, wie die Response aussieht, bzw, was du da erwartest.
Erwartet hätt ich eine XML-Datei, die ich in einer Variablen speichern und dann auslesen kann.

Kannst du auch, wenn es wirklich eine XML Datei mit dem entsprechendem HHTTP-Header ist

Wie kann ich feststellen wie die Response aussieht?

Firebug sollte dir z.b. den Header anzeigen.

Struppi.

[hotti]

Hotti meint, du sollst die obige URL einfach mal im Browser eingeben.
Wenn ich die url in einen Browser eingebe ruft er sie auf bzw. fragt öffnen oder speichern.

Na, Du solltest schon wissen, wie die Response aussieht, bzw, was du da erwartest. Da kommt z.b. ein HTTP-Header mit dem Content-Type und dann der eigentliche Content. Sofern der Abruf mit dem Browser so funktioniert wie gewünscht, ist das dann auch mit Ajax möglich (danke Struppi).

Hotti

[ChrisB]

Hi,

Richtig, hab diese Codezeilen zusammenkopiert. Bin davon ausgegangen, dass der Code aus dem Netz auch funktioniert. Jedenfalls hab ich den Code aus einem Tutorial (und schon mehrere Ausprobiert). Einige Grundlagen denke ich zu kennen, aber ich weiß nicht warum der Status des XMLHttpRequest-Objekts 0 ist!

Weil du die Grundlagen nicht kennst; weil du dir noch nicht klar gemacht hast, was das erste „A“ in AJAX bedeutet.

MfG ChrisB