AJAX - Problem - HTML, AJAX & Co

AJAX - Problem

darthdespotism

Professional

Posts: 483

Saturday, September 15th 2007, 12:39pm

AJAX - Problem

Hallo

da mich das Thema schon länger reizt versuche ich gerade ein simples AJAX - Beispiel zum laufen zu bekommen. Meine Page funktioniert allerdings aktuell nur mit Firefox und IE6, Opera liefert einen Fehler in der "Error Console" und eine weiße Seite, Konqueror schreibt den Inhalt des Requests nicht in das angegebene Div sondern direkt in das <html>

Mein Script:

JavaScript Code

function load(what){
 
  var req = null;
 
     try{
   req = new XMLHttpRequest();
  }
  catch(ms){
   try{
    req = new ActiveXObject("Msxml2.XMLHTTP");
   }
   catch(nonms){
    try{
     req = new ActiveXObject("Microsof.XMLHTTP");
    }
    catch (failed){
     req = null;
    }
   }
  }
     if (req == null)
   alert("Konnte Ajax nicht initialisieren!");
      req.open("GET", "http://akazielx/test/viper/" + what, true);
     req.onreadystatechange = function(){
   switch (req.readyState){
    case 4:
     if (req.status != 200){
      alert("Fehler: " + req.status);
     }else{
      document.getElementById("content").innerHTML = req.responseText;
     }
     break;
    default:
     return false;
    break;
   }
  }
     req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
     req.send(null);
 }

Das ganze ist auss 2 Tutorials zusammengebaut:

http://developer.mozilla.org/en/docs/AJAX:Getting_Started

http://www.admin-wissen.de/tutorials/eig…al/xml-und-dom/

das div mit der id="content" existiert und stimmt auch in Groß/Kleinschreibung überein.

Der Operafehler ist:

	Source code
1 2 3 4	Event thread: click Error: Unhandled exception: [Object LSException] code: 81

Baby Herman

Professional

Posts: 651

Saturday, September 15th 2007, 12:43pm

Könnte man mal den Teil sehen, mit dem du die Funktionen auf rufst und den Bereich, in dem der Inhalt eingefügt werden soll? Wahrscheinlich wäre das eine simple Zusammenfassung des HTML-Codes.

darthdespotism

Professional

Posts: 483

Saturday, September 15th 2007, 12:53pm

Klar hier der Code:

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
	<title>Website der ESD</title>
	<link rel="stylesheet" href="ajax_style.css" type="text/css" />
	<link rel="shortcut icon" href="favicon.ico" />
	<script type="text/javascript">
	<!--
		function load(what){
			var req = null;
 
			try{
				req = new XMLHttpRequest();
			}
			catch(ms){
				try{
					req = new ActiveXObject("Msxml2.XMLHTTP");
				}
				catch(nonms){
					try{
						req = new ActiveXObject("Microsof.XMLHTTP");
					}
					catch (failed){
						req = null;
					}
				}
			}
 
			if (req == null)
				alert("Konnte Ajax nicht initialisieren!");
 
			req.open("GET", "http://darthd.da.funpic.de/test/viper/" + what, true);
 
			req.onreadystatechange = function(){
				switch (req.readyState){
					case 4:
						if (req.status != 200){
							alert("Fehler: " + req.status);
						}else{
							document.getElementById("content").innerHTML = req.responseText;
						}
						break;
					default:
						return false;
					break;
				}
			}
 
			req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 
			req.send(null);
		}
	-->
	</script>
</head>
<body onload="load('1.txt')">
<div id="container">
	<div id="left"></div>
 
         <div id="leftcol">
         	<div id="menu">
	                 <ul id="menulist">
	                         <li class="top" onclick="load('1.txt')">Eins</li>
	                         <li class="ajax" onclick="load('2.txt')">Zwei</li>
	                         <li class="ajax" onclick="load('3.txt')">Drei</li>
	                         <li class="top" onclick="load('4.txt')">Vier</li>
	                         <li class="top" onclick="load('5.txt')">Fünf</li>
	                 </ul>
		</div>
         </div>
		<div id="content">
                 	&nbsp;
		</div>
</div>
</body>
</html>

Sry für die verzogene Einrückung, die hat das Kopieren nicht so toll überstanden

EDIT://
Sehr seltsam, Opera scheint nur bei den onclick - Events Probleme zu haben, mit onload geht das seltsamerweise

This post has been edited 1 times, last edit by "darthdespotism" (Sep 15th 2007, 1:10pm)

Baby Herman

Professional

Posts: 651

Saturday, September 15th 2007, 1:34pm

Zwar müsste das Attribut onclick auch beim li-Tag funktionieren, ich würde es trotzdem nochmal etwas allgemein gültiger versuchen - zum Beispiel:

	HTML Code
1	<li class="top"><a href="#" onclick="load('1.txt'); return false;">Eins</a></li>

darthdespotism

Professional

Posts: 483

Saturday, September 15th 2007, 1:40pm

Ich hatte das schonmal mit <a> nur hatte ich nicht herausbekommen wie ich href= setzen muss.

Eine Idee was Konqueror dazu bewegt das direkt ins <html> statt in das passende <div> einzusetzen?

EDIT://
Ich habe das jetzt mit dem <a> umgesetzt, keine Verbesserung.

Ich habe das ganze auch online zum ausprobieren:
http://darthd.da.funpic.de/test/viper/ajax.html

This post has been edited 1 times, last edit by "darthdespotism" (Sep 15th 2007, 1:56pm)

Baby Herman

Professional

Posts: 651

Saturday, September 15th 2007, 2:02pm

Wenn du das a-Tag verwendest, darfst du im onclick-Attribut "return false;" nicht vergessen. Dann ist es im Falle, dass JavaScript eingeschaltet ist, völlig egal, was im href-Attribut steht.

Torben Brodt

Administrator

Posts: 8,454

Saturday, September 15th 2007, 2:22pm

Was funktioniert denn eigentlich nicht? Mit Firefox 2.0.0.6 und Opera 9.23 habe ich jedenfalls keine Probleme deine Seiten zu laden.

Offtopic... ich finde die AJAX Anwendung hier nicht sinnvoll. Das macht es nicht nur für den Benutzer unberechenbar (will er z.B. eine Unterseite bookmarken), sondern hat in der aktuellen Implementierung auch den Nachteil, dass die Scrollbar unten bleibt, wenn du die Seite wechselst.

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

darthdespotism

Professional

Posts: 483

Saturday, September 15th 2007, 2:37pm

Das ganze muss nicht unbedingt sinnvoll sein

Opera lädt bei mir die Seite korrekt, nur die "link" führen zu einer weißen Seite.

return false; hab ich ausprobiert. bringt nichts neues

EDIT://
Safari 3.03 und IE7 gehen auch. Konqueror meldet einen Type Error: Null Value

document.getElementById("content").innerHTML = req.responseText;

This post has been edited 1 times, last edit by "darthdespotism" (Sep 15th 2007, 4:00pm)

darthdespotism

Professional

Posts: 483

Saturday, September 15th 2007, 8:28pm

Ich habe mal versucht das ganze auf ein Minimum zu reduzieren:
Minimalbeispiel
Opera lädt immer noch nichts nach und Konqueror ersetzt immer noch den _gesammten_ Inhalt des bodys (Kann ich irgendwie herausbekommen, was vom Head noch da ist?)

This post has been edited 1 times, last edit by "darthdespotism" (Sep 17th 2007, 3:44pm)

Torben Brodt

Administrator

Posts: 8,454

Monday, September 17th 2007, 2:13pm

Kanns sein, dass dein Minimalbeispiel falsch verlinkt ist *g*

Wenn du an AjaxInhalte ranwillst, machst du das am besten mit folgendem Snippet:

	JavaScript Code
1	alert(document.getElementById('deinajaxdiv').parentNode.innerHTML);

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

darthdespotism

Professional

Posts: 483

Monday, September 17th 2007, 3:49pm

Quoted from "d0nut"

Kanns sein, dass dein Minimalbeispiel falsch verlinkt ist *g*

Hm irgendwie seltsam, ich dachte das hatte gepasst, jetzt geht es auf jeden Fall

Quoted

Wenn du an AjaxInhalte ranwillst, machst du das am besten mit folgendem Snippet:

	JavaScript Code
1	alert(document.getElementById('deinajaxdiv').parentNode.innerHTML);

Damit lese ich den Inhalt des dem 'deinajaydiv' übergeordneten Tags aus und zeige das in einer MessageBox an, richtig? Mal sehen ob ich damit was zum debuggen bauen kann.

Ich habe das ganze zwischenzeitlich mit den Code aus dem AJAX als iframe ersatz probiert, der Zeigt bei mir genau das gleiche Verhalten (POST durch GET ersetzt)

Torben Brodt

Administrator

Posts: 8,454

Monday, September 17th 2007, 4:36pm

Weißt du was.... der Funktionsname load klappt unter Opera nicht

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

darthdespotism

Professional

Posts: 483

Monday, September 17th 2007, 5:05pm

Stimmt, das ist ein Name der reserviert sein könnte - würde auch einiges erklären

Ich versuchs nachher gleich aus

Ich habe das jetzt auf meinem lokalen Server durch my_load() ersetzt - und schon funktioniert es mit Opera & Konqueror

This post has been edited 1 times, last edit by "darthdespotism" (Sep 17th 2007, 5:11pm)