zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Serveradministration und serverseitige Scripte
Seite neu laden Problem: httpRequest und Javascript

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.03.2009, 01:06
Benutzerbild von onkel-tom
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 13.03.2007
Ort: Berlin
Beiträge: 129
onkel-tom befindet sich auf einem aufstrebenden Ast
Frage Problem: httpRequest und Javascript

Hallo Leute,

ich habe ein Problem und weiss nicht wie ich das lösen soll oder wie ich es anders machen kann.

Meine Seite wird einmal geladen und alle weiteren Inhalte werden dann mittels Javascript in die jeweiligen Div-Container geschrieben. Entweder direkt oder per httpRequest, wenn ich denn eine Datenbankabfrage brauche. Soweit funktioniert das auch alles.

Nun aber zu meinem Problem:
Ich möchte in einen Div-Container eine GoogleMap laden, und nutze hierfür die Google Map API mit der ich den jeweils gewünschten Kartenausschnitt anzeigen lassen kann.

Das Problem hierbei ist ja nun, daß die Daten für die Kartenposition aus der Datenbank ausgelesen werden müssen, und dann an die Javascript-Funktion der Map API übergeben werden müssen. Und das ganze soll dann auch noch in den Div-Container rein, was die API ja auch machen würde, wenn ich denn irgendwie diese Javascript-Funktion ausführen kann. Aber ich bekomme die Daten nicht an die Javascript-Funktion übergeben, da die Daten mittels httpRequest ermittelt werden und dann mit diesem Request ja ein Inhalt geschrieben wird, aber keine Daten zurück kommen die ich dann in Javascript weiter verwenden kann, oder geht das doch irgendwie?

Hier mal mein Code des httpRequest:
Code:
function httpR(obj,action) {
	var xmlhttp = null;
    // Mozilla
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }
    // IE
    else if (window.ActiveXObject) {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
   
    // PHP-Datei aufrufen
	xmlhttp.open("GET", encodeURI(action), true);
    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState != 4) {
            $(obj).innerHTML = 'wird geladen ...';
        }
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			$(obj).innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.send(null);
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.03.2009, 12:22
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Natürlich geht das. Du nutzt doch irgendein Framework? Hat das keine AJAX Funktionalität? Weil deine selbstgestrickte Funktion nicht funktionieren dürfte.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.03.2009, 13:21
Benutzerbild von onkel-tom
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 13.03.2007
Ort: Berlin
Beiträge: 129
onkel-tom befindet sich auf einem aufstrebenden Ast
Standard

Framework?
Ich nutze kein zusätzliches Script oder ähnliches. Ich habe alles selbst programmiert und stosse eben nun an meine Grenzen.
Mit Zitat antworten
  #4 (permalink)  
Alt 23.03.2009, 13:30
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von onkel-tom Beitrag anzeigen
...
Code:
            $(obj).innerHTML = 'wird geladen ...';
...
			$(obj).innerHTML = xmlhttp.responseText;
$(...) ist auch von dir?
Mit Zitat antworten
  #5 (permalink)  
Alt 23.03.2009, 13:35
Benutzerbild von onkel-tom
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 13.03.2007
Ort: Berlin
Beiträge: 129
onkel-tom befindet sich auf einem aufstrebenden Ast
Standard

ja klar, das ist einfach die nachfolgende funktion, die mir die tipparbeit etwas abnimmt:

Code:
function $(id) {
	//alert(id);
	if(browsertyp.NS6) {
	    return document.getElementById(id);
	} else {
		if(browsertyp.IE) {
	    	return document.all(id);
		}
	}
}
Mit Zitat antworten
  #6 (permalink)  
Alt 23.03.2009, 13:40
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Die ist auch schon zweifelhaft. Warum nicht so:
Code:
function $(id) {
	if(document.getElementById) {
	    return document.getElementById(id);
	} else if(document.all) {
	    	return document.all(id);
	}
}
[EDIT]Wobei der IE 4 glaube ich kein AJAX kann, insofern ist document.all überflüssig.

Naja, deine AJAX Funktion kodiert die Parameter falsch, lass dir doch mal irgendwie ausgeben, was bei deinem Serverskript an Parameter ankommt. Allerdings wirst du mit so einer Funktion früher oder später noch mehr Probleme bekommen, da du nicht kontrollierst ob der Request abgearbeitet wurde und bei jedem Request ein neues Objekt erzeugst, was unnötig Resourcenverschwendet ist.
Mit Zitat antworten
  #7 (permalink)  
Alt 23.03.2009, 14:01
Benutzerbild von onkel-tom
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 13.03.2007
Ort: Berlin
Beiträge: 129
onkel-tom befindet sich auf einem aufstrebenden Ast
Standard

Naja, so kann man es auch machen, aber ob ich nun die variabel browsertyp abfrage oder direkt abfrage ob der browser getElementByID kennt is ja eigentlich egal, denke ich.

Mittlerweile bin ich einen Schritt weiter, und bekomme nun die benötigten Daten per httpRequest zurück, indem ich eine requestdatei aufrufe die mir nur die daten als echo an die funktion zurückgibt und ich diese dann nicht ausgebe sondern an eine andere funktion weiter gebe. aber es gibt immer was was wieder nicht geht, sicherlich auch weil ich eben nicht so der profi bin und mir eben nicht immer die optimalen lösungen einfallen.

hier mal der code für die Verarbeitung der requestdaten, so wie ich es jetzt habe:
Code:
function httpR(obj,action) {
	var xmlhttp = null;
    // Mozilla
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }
    // IE
    else if (window.ActiveXObject) {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
   
    // PHP-Datei aufrufen
	xmlhttp.open("GET", encodeURI(action), true);
    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState != 4) {
            $(obj).innerHTML = 'wird geladen ...';
        }
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			if(obj == 'map') {
				showMap(obj,xmlhttp.responseText);
			} else {
				$(obj).innerHTML = xmlhttp.responseText;
			}
        }
    }
    xmlhttp.send(null);
}
Mit Zitat antworten
  #8 (permalink)  
Alt 23.03.2009, 14:10
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von onkel-tom Beitrag anzeigen
Naja, so kann man es auch machen, aber ob ich nun die variabel browsertyp abfrage oder direkt abfrage ob der browser getElementByID kennt is ja eigentlich egal, denke ich.
Nein, das ist natürlich nicht egal, es gibt hunderte Browser und du läßt nur 2 zu? Warum? Ein Featuretest auf das Feature das du verwendest ist absolut ausreichend und Zielführender, als igrendwelche Browsertests.

Und deine Funktion dürfte immer noch Probleme haben. Was passiert, wenn du mehrmals schnell hintereinander die Funktion aufrufst?
Mit Zitat antworten
  #9 (permalink)  
Alt 23.03.2009, 18:20
Benutzerbild von onkel-tom
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 13.03.2007
Ort: Berlin
Beiträge: 129
onkel-tom befindet sich auf einem aufstrebenden Ast
Standard

ja ok, das ist natürlich wohl die bessere Lösung in diesem Fall.
Wenn ich eine Funktion mehrmals schnell hintereinander aufrufen will, dann geht dies nicht, aber momentan habe ich kein anderes Konzept wie ich an die Sache rangehen soll.

Wie würdest Du denn so etwas lösen, wenn überhaupt?

Ziel soll es sein, daß die Webseite nur beim ersten Aufruf komplett geladen wird, und dann nur noch die einzelnen Div-Container je nach Aktion auf der Seite ausgetauscht werden. Dies hat u.a. den Grund, da ein Flash-Video im oberen Teil sonst ständig neu geladen würde und auch somit immer wieder von vorne beginnt. Dies ist für die Seite bzw. das Konzept so nicht optimal. Daher schreibe ich eben die Div-Inhalte mit innerHTML bzw. wenn ich eine Datenbankabfrage brauche mit dem httpRequest jeweils neu.

Das dies sicherlich nicht opimal ist, und mit Fehlern behaftet ist weiss ich selbst, aber wie gesagt, ich weiss keine anderen Ansatz für dieses Projekt.

Meine Funktionen sind sicherlich nicht gerade sehr gut und sicherlich auch Fehlerhaft, da es ja auch öfter vorkomt, das
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 23.03.2009, 19:29
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Naja, ich würde einen Objektorientierten Ansatz wählen und im HTTP oder AJAX Objekt einen Flag setzen, der anzeigt, ob ein Request gerade bearbeitet wird oder nicht und nur einen neuen Request zulassen, wenn der alte Request fertig ist.

Momentan sieht das bei mir so aus:
Code:
/*
*/
var Ajax = new function() {
	var charset = {};

	// Das xml_http Objekt
	function XMLHttp() {
		
		// readyState Callback Funktionen
		// http://www.w3.org/TR/2006/WD-XMLHttpRequest-20060405/#xmlhttprequest
		this.onbefore 	=	// 0: 	The initial value.
		this.onopen 	=	// 1: 	he open() method has been successfully called
		this.onrequest 	=	// 2: 	The UA successfully completed the request,
							//			but no data has yet been received.
		this.onheader 	=	// 3: 	Immediately before receiving the message body (if any). 
							// 		All HTTP headers have been received. 
		this.oncomplete	=	// 4: 	The data transfer has been completed.	
		this.onerror	=
		this.onchange	= 
		function() {return false;}; 	// Dummyfunktion

		var obj = function() { // Das XMLHttp Objekt erzeugen
		if (window.XMLHttpRequest) return new XMLHttpRequest();
		else if (window.ActiveXObject) {
			try {
				return new ActiveXObject("Msxml2.XMLHTTP.3.0");
			} catch(e) {
				try {
					return new ActiveXObject("Microsoft.XMLHTTP");
				} catch(e) {
					alert(e);
				}
			}
		}
		}(); // Aufruf

		function encodeParameter() {
			var tmp = [];
			for(var p in param)
			tmp.push(encodeURIComponent(p) + '=' + encodeURIComponent(param[p]))
			return tmp.join('&');
		}
		
		if(!obj) throw('Fehler! Kann HTTPRequest Objekt nicht erzeugen');
		
		// Objekt ok.
		var self = this;
		var url;
		var idle = false;
		var status = '';
		var time;
		var type;
		var param = {};

		
		function ready() {
			var s = obj.readyState;
			self.onchange(s);
			
			if(s == 0) self.onbefore();
			else if(s == 1) self.onopen();
			else if(s == 2) self.onrequest();
			else if(s == 3) self.onheader();
			else if(s == 4) {
				idle = false;
				time = (new Date()) - time;
				var msg = '';
				switch(obj.status) {
					case 200 || 304:
					self.length = self.header('Content-Length');
					self.lastModified = new Date( self.header('Last-Modified') );
					self.contentType = self.header('Content-Type');
					self.oncomplete();
					break;
					case 403:
					msg = 'Zufriff auf die Datei "' + url +'" verweigert. (Error 403)';
					break;
					case 404  : 
					msg = 'Datei "'+ url + '" nicht gefunden. (Error 404)';
					break;
					case 408  : 
					msg = 'Timeout beim aufruf der Datei "' + url + '" (Error 408)';
					break;
					case 500: 
					msg = 'Server Fehler beim Aufruf von "' + url + '" (Error 500).';
					break;
					default: 
					msg = 'Bei der Übertragung trat ein Fehler auf (Error ' + obj.status+')';
				}
				if(msg) {
					return self.onerror(msg);
				}
				return true;
			}
        
      }

		
		// open(url)
		this.open = function(u, method, t, charset) {
			if(this.isIdle()) return this.onerror('Request ist in Bearbeitung');
			if(!method) method = 'GET';
			
			type = ( 'text/' + (t ? t : 'xml') );
			charset = (charset ? charset : 'utf-8');
			
			url = u;
			obj.open(method, url + '?' + encodeParameter(), true);
			
			if (obj.overrideMimeType) {
				this.mimeType = 'text/' + type + '; charset=' + charset;
				obj.overrideMimeType(this.mimeType);
			} else if(typeof obj.setRequestHeader != 'undefined'){
				obj.setRequestHeader('Charset', charset);
				obj.setRequestHeader('Content-Type', type);
			}
			obj.onreadystatechange = ready;
			idle = true;
			time = new Date();
			obj.send(null);
			return true;
		};
		
		this.header = function(name) {
			
			if(!name) return obj.getAllResponseHeaders();
			return obj.getResponseHeader(name);
		};
		this.response = function() {

			if(this.type() == 'text/xml') return  obj.responseXML;
			return obj.responseText;
		
		};
		this.status = function() { return status; };
		this.isIdle = function() { return idle; };
		this.time = function() { return time;};
		this.type = function() { return type; };
		this.setParam = function() {
			if(!arguments.length){
				return param;
			}
			else if(arguments.length == 1){
				if(typeof arguments[0] == 'object'){
					for(var p in arguments[0]) param[p] = arguments[0][p];
				} else (typeof arguments[0] == 'string')
					return param[arguments[0]];
			} else if(arguments.length == 2){
				param[arguments[0]] = arguments[1];
			} else {
				param = {};
			}
		};
		
	} // XMLHttp-Objekt
	
	this.request = function() {
		return new XMLHttp();
	}
};
Die on..... Eventhandler sind nicht unbedingt sinnvoll/nötig, da die Browser sowieso nicht alle Stadien des Request wirklich ausführen (bzw. z.T. auch mehrmals ausführen).

Beispiel:
Code:
var myAjax = Ajax.request();
myAjax.oncomplete = function(res) { 
	show('Header:\n' +  x.header());
	show('<hr>' + this.type() + '<hr>');

	this.type() == 'xml' ? set(res.response('xml')	)
		: set(res.response());
	
	
};
myAjax.setParam({ 'test': 'testöäüß&;', test2: 'öäü'});
myAjax.open('test.php', 'GET');
(show() ist eine Debugfunktion, die in einen String ausgibt)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem beim ein/ausblenden von Spalten in Tabellen via CSS und JavaScript chrisol_76 CSS 2 21.07.2008 18:37
Problem: IE versteckt Text & Feedback Herbi CSS 2 11.08.2006 15:39
Javascript Problem - onclick return Spyker Javascript & Ajax 4 11.07.2006 12:54
Problem mit background-image / javascript im IE danliker CSS 3 17.05.2005 22:50
Problem mit Background-Color im FireFox to.ni CSS 2 31.08.2004 12:13


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:34 Uhr.