|
|
|
|
|
|
|||||||
| Beitragsarchiv Nur gucken, nichts anfassen. Das Archiv der Beiträge vergangener Zeiten. Archive: Adventskalender 2008, Adventskalender 2009 |
|
|
LinkBack | Themen-Optionen | Thema bewerten |
|
|
#1 (permalink) |
|
Moderator und Wett-König
|
Hallo zusammen,
ich habe in letzter Zeit ein wenig an einer AJAX-Anwendung gebastelt (ja, AJAX ist echt eine wilde Bastelei!). Diese läuft bedauerlicherweise nur im FF und nicht im IE. Gibt es - abgesehen von der IE-Toolbar - eine sinnvolle Möglichkeit im IE, das DOM zu browsen? Bisher habe ich nur wirre Fehlermeldungen, dass ein Offset nicht existiert und die Stelle im Code, nur keine Ahnung, was der IE da fabriziert. RTFMs are welcome!
__________________
Viele Grüße, Dr.E. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 1. Think about software design before you start to write code! 2. Discuss and review it together with experts! 3. Choose good tools (-> Adventure PHP Framework (APF))! 4. Write clean and reusable software only! ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ |
|
|
|
|
|
|
PHP Code Flüsterer
Registriert seit: 21.08.2005
Beiträge: 4682
PHP-Kenntnisse:
Fortgeschritten
|
|
|
|
#3 (permalink) |
|
Moderator und Wett-König
|
Hallo brian,
google habe ich dazu bereits 2h befragt und nur Tools bekommen, die in etwa den Umfang der IE-Toolbar haben - wie auch dein Suchmuster. Mich interessiert an dieser Stelle aber vor allem, dass ich ALLE DOM-Objekte browsen kann, nicht nur den HTML-Quelltext, den der Browser geliefert bekommt. Der FF hat im Firebug eine DOM-Ansicht, in der du ALLE DOM-Objekte browsen kannst. In meinem Fall ist vor allem das XMLHTTPRequest-Objekt und dessen responseXML von Interesse. Auch eine weitere Suche hat nicht das gewünschte Ergebnis gebracht. Interessant war die Diskussion unter http://forum.de.selfhtml.org/archiv/2006/8/t134713/, die mich jedoch auch nicht zu einer Lösung gebracht hat. Any other ideas?
__________________
Viele Grüße, Dr.E. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 1. Think about software design before you start to write code! 2. Discuss and review it together with experts! 3. Choose good tools (-> Adventure PHP Framework (APF))! 4. Write clean and reusable software only! ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ |
|
|
|
|
#4 (permalink) | |||
|
Erfahrener Benutzer
Registriert seit: 06.06.2008
Beiträge: 1.624
PHP-Kenntnisse: Anfänger ![]() |
Hallo dr.e.,
zu meiner eigenen Schande muss ich gestehen, dass ich mich selber erst in die Thematik einarbeite(n muss). So wie ich es bis jetzt verstanden habe, implementiert der IE (6.0) teilweise DOM Level 3. Dies aber auch nur für HTML und CSS - also eingeschränkt. Das XMLHTTPRequest-Objekt ist aber nicht Teil des DOM, da die eigentliche Funktionalität nämlich wie folgt definiert ist: Zitat:
Zitat:
ActiveXObject. Zumindest bei mir sieht es so aus: Code:
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
Zitat:
in den einzelnen W3C Dokumenten im kompletten Zusammenhang zu betrachten. Du musst wirklich viele Eigenheiten beachten - bei jedem Browser andere. Eventuell ist es auch anderen eine Hilfe, wenn ich die Ergebnisse meiner Recherche zum Thema bzw. meine Erfahrungen kurz präsentiere: Entwickle nach Standards! Nutze einen Browser, der weitestgehend alle Standards unterstützt. Welche das sind und welcher Browser diese unterstützt kannst du z.B. unter [1] in Erfahrung bringen. Plane die Entwicklung im Voraus - mit Transcendent CSS Es ist sehr wichtig, im Voraus zu entscheiden, welche Browser in welcher Art unterstützt werden sollen. Da der IE 6/7 eigentlich immer dabei ist, muss man sich im Voraus für etablierte Methoden wie "Progressive Enhancement" etc. entscheiden. Die Vorstellung, dass alle Browser das gleiche sehen ist genau genommen absurd. Wer HDTV möchte kauft sich einen neuen Fernseher, wer einen alten Fernseher hat bekommt zwar ein schlechteres aber akzeptables Bild. Wozu lade ich mir einen neuen Browser wenn alle Webseiten sowieso im IE 6 gleich aussehen? Ähnlich ist es mit AJAX. Ich verfolge zurzeit den Ansatz, AJAX zwar bewusst einzuplanen, entwickle meine Seiten aber erst ohne. Ist dieser Schritt getan, kann ich nach und nach neue Features auf AJAX-Basis einbauen. Dazu ist es wichtig, dem Kunden Accessability und Usability zu erklären. Was ist Transcendent CSS? Dem gleichnamigen Buch von Andy Clarke ist dazu folgendes zu entnehmen: 1.) Nicht alle Browser sehen das gleiche Design 2.) Nutze alle Verfügbaren CSS-Selektoren. 3.) Nutze CSS3, wo es möglich ist, um zukunftsfähig zu bleiben. 4.) Stopfe die Löcher von CSS mit JavaScript und dem DOM. 5.) Vermeide den Gebrauch von Hacks und filtern. 6.) Nutze semantische Namenskonventionen und Mikroformate. 7.) Gib deine Ideen weiter und arbeite mit anderen zusammen. Mehr fällt mir dazu auf Anhieb nicht ein, daher ein wenig Praxis: Für die Entwicklung nehme ich FireFox mit der tollen Toolbar und Opera (jeweils in der neusten Versionen). Das HTML-Markup muss stimmen, damit ich später mit JavaScript darauf zugreifen kann. Außerdem soll kein Browser in den "Quirks-Modus" wechseln, sonnst wird die Formatierung per CSS unkontrollierbar. Das Markup steht zunächst im Vordergrund. Die Struktur meiner Seite ist so angeordnet und durch Sprungmarken ergänzt, dass Screenreader einfach und schnell Inhalte erfassen können. Der Grundaufbau meiner XHTML-Datei gestaltet sich wie folgt: 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> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>Mein erstes XHTML-Dokument</title> <link rel="stylesheet" type="text/css" title="Stylesheet" href="css/basic.css" /> <script type="text/javascript" src="js/script.js"></script> </head> <body> <h1>Seitentitel</h1> Inhalt äöü</p> </body> </html> Ist dem nicht so, kann per meta-Tag oder besser noch vom Server die Kodierung geschickt werden. Ein <?xml version="1.0" encoding="utf-8" ?> ist also hinfällig und provoziert im IE sowieso nur wieder den Quirks-Mode. Trotzdem habe ich für den IE per meta-Tag den Content-Type angegeben. Dieser wird aber nur als ersten Kind-Element von vom head-tag akzeptiert. Auf Serverseite schicke ich per header() als Content-Type: application/xhtml+xml; an den Browser. Da ich mit FireFox und Opera entwickle werden mir so Fehler im Markup direkt angezeigt. Geht die Seite online steht auch hier nur "text/html" im Header da der IE sonnst die Seite downloaden möchte. JavaScript und CSS sind ausgelagert. Die CSS Datei enthält @import und/oder @media Regeln. Von daher ist es auch hinfällig das media-Attribut zu benutzen. Ist die das Markup fertig gestellt und per CSS formatiert, wird das ganze im Template-System eingebunden. Somit ist die Seite auf der einen Seite barrierefrei und auf der anderen Seite schön anzusehen - je nach Browser. Nun wird die Website - pardon, Webapplikation - per JavaScript mit Zusatzfeatures aufgewertet. Dabei arbeite ich Vorzugsweise mit Frameworks wie jQuery. Das Framework greift mir vor allem bei unterschieden in der JavaScript implementierung der jeweiligen Browser unter die Arme. Außerdem kann ich sehr komfortabel per XPath oder auch mit CSS3-Selektoren auf einzelne DOM-Knoten zugreifen und diese erweitern. Ein weiterer Vorzug von jQuery ist die implementierung des "onload" Events. Dieses wartet nämlich nur auf das DOM und nicht etwa auf Grafiken oder Banner - bringt einen Geschwindigkeitsvorteil. [1] http://www.webdevout.net/browser-support-dom Weitere nützliche Links: http://developer.mozilla.org/de/docs/AJAX http://schneegans.de/web/xhtml/ http://de.selfhtml.org/html/xhtml/unterschiede.htm PS: Warum schreibe ich das alles? Ich bin mir bei einigen Dingen auch nicht sicher ob mein Vorgehen "richtig" ist. Ich möchte möglichst standardkonforme, barrierefreie Webseiten entwickeln. Da der Dschungel an Tipps und Meinungen zum Thema aber sehr dicht ist, bin ich mir sehr unsicher und lasse mich gerne belehren. PPS: Stoff für ein Tutorial? ![]() |
|||
|
|
|
|
#5 (permalink) |
|
Moderator und Wett-König
|
Hallo Alex,
danke für deine Meinung und deine Erfahrung. Ich würde wirklich sagen, das sollte in ein "best practice web application development"-Tutorial gepackt werden. Ich selbst bin eher so der Programmierer, der ästhetische Applikationen auf Serverseite implementiert und bisher weniger bewandert auf dem Gebiet AJAX. Das wollte ich ändern, in dem ich ein Beispiel implementiere und versuche, wie man das mit einfachen Mitteln und dem APF sinnvoll in die bisherige Applikationsarchitektur integrieren kann. Hier stimme ich dir komplett zu, dass man AJAX Widgets zunächst ausser Acht lassen sollte. Ich habe nur gerade das Problem, dass mein AJAX-Modul (News-Box, die per AJAX gepaged werden soll) nicht im IE funktioniert und ich immer wieder die Meldung Code:
Objekt erwartet Code:
var entry_message = responseXML.getElementsByTagName('entry').item(0).childNodes[1].textContent;
Vielleicht sollte ich meinen nächsten Schritt - ich formuliere das gleich als Tutorial - gleich vorziehen und ein Framework wie jQuery oder prototype verwenden.
__________________
Viele Grüße, Dr.E. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 1. Think about software design before you start to write code! 2. Discuss and review it together with experts! 3. Choose good tools (-> Adventure PHP Framework (APF))! 4. Write clean and reusable software only! ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ |
|
|
|
|
#6 (permalink) |
|
Erfahrener Benutzer
Registriert seit: 06.06.2008
Beiträge: 1.624
PHP-Kenntnisse: Anfänger ![]() |
Hallo Christian,
da hilft - wie so oft - nur ein schrittweises Analysieren. Aus der Kalten kann ich dir auch nicht weiterhelfen, dazu müsstest du mal posten wie du dein responseXML Object erzeugst. Hilfreich wäre natürlich auch das passende XML dazu. Ich glaube nämlich, dass responseXML gar kein Objekt ist. Ich habe mit folgender XML-Datei: files/news.xml Code:
<?xml version="1.0" encoding="utf-8" ?> <news> <entrys> <entry> <headline>News-Headline1</headline> <content>Inhalt1 12345</content> </entry> <entry> <headline>News-Headline2</headline> <content>Inhalt2</content> </entry> </entrys> </news> js/script.js Code:
window.onload = function(){
/* Funktion erzeugt das HTTP-Objekt */
function makeHTTPObject() {
try {return new XMLHttpRequest();}
catch (error) {}
try {return new ActiveXObject("Msxml2.XMLHTTP");}
catch (error) {}
try {return new ActiveXObject("Microsoft.XMLHTTP");}
catch (error) {}
throw new Error("Could not create HTTP request object.");
}
/* Objekt erzeugen */
var request = makeHTTPObject();
/* XML-Datei asyncron laden (und etwas senden ...) */
request.open("GET", "files/news.xml", true);
request.send(null);
/* auf den Request warten */
request.onreadystatechange = function() {
// readyState 4 = fertig geladen
if (request.readyState == 4)
// request ausgeben
alert("Inhalt von request:\n"+request.responseText);
};
/* ACHTUNG! dieser Code wird schon ausgeführt,
während die XML-Datei noch geladen wird !!! */
alert("Außerhalb der onreadystatechange function:\n"+
request.responseText);
}
Code:
<?xml version="1.0" encoding="utf-8" ?> <news> <entrys> <entry> <headline>News-Headline1</headline> <content>Inhalt1 12345</content> </entry> <entry> <headline>News-Headline2</headline> <content>Inhalt2</content> </entry> </entrys> </news> |
|
|
|
|
#7 (permalink) |
|
Moderator und Wett-König
|
Hallo Alex,
ich weiß, dass du mit den bisherigen Angaben an sich das Problem nicht analysieren kannst. Deshalb hier einige Angaben zur Funktion: Der Java Script-Teil auf Client Seite erstellt mit Code:
var xhttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
try{
// IE 6 and higher
//xhttp = new ActiveXObject("MSXML2.XMLHTTP");
xhttp = new ActiveXObject("Msxml2.XMLHTTP.3.0");
// end try
}
catch (e){
try{
// IE 5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
// end try
}
catch (e){
xhttp = false;
// end catch
}
// end catch
}
// end if
}
else if (window.XMLHttpRequest){
try{
// Mozilla, Opera, Safari ...
xhttp = new XMLHttpRequest();
// end try
}
catch (e){
xhttp = false;
// end catch
}
// end else if
}
// end function
}
window.onload = createXMLHttpRequest;
Code:
function next(){
// check if XMLHTTPRequest object is initialized correctly
if(!xhttp){
alert("An Error occured when trying to initialize the XMLHttpRequest object or you are using a buggy Microsoft browser!");
return;
// end if
}
// increment page number
pagenumber = pagenumber + 1;
// create request
var request = "http://dev.adventure-php-framework.org/~/sites_demosite_biz-action/setLanguage/~/modules_newspager_biz-action/Pager/page/" + pagenumber
// send request for next news
xhttp.open("GET",request,true);
xhttp.onreadystatechange = updateNewsContent;
xhttp.send(null);
// end function
}
PHP-Code:
Code:
http://dev.adventure-php-framework.org/~/sites_demosite_biz-action/setLanguage/~/modules_newspager_biz-action/Pager/page/2 Code:
<news> <headline>Headline news 2</headline> <subheadline>Subheadline news 2</subheadline> <content>My text of news 2</content> <newscount>4</newscount> </news> Code:
alert(xhttp.responseText); ![]()
__________________
Viele Grüße, Dr.E. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 1. Think about software design before you start to write code! 2. Discuss and review it together with experts! 3. Choose good tools (-> Adventure PHP Framework (APF))! 4. Write clean and reusable software only! ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ |
|
|
|
|
#8 (permalink) | |
|
Erfahrener Benutzer
Registriert seit: 21.05.2008
Beiträge: 9.937
![]() |
Zitat:
|
|
|
|
|
|
#9 (permalink) |
|
Moderator und Wett-König
|
Hallo Zergling,
über sowas bin ich auch schon gestolpert. Ich hatte mal irgendwo eine dump()-Funktion gefunden, die nichts anderes macht, als die print_r()-Funktion in PHP. Auch diese brachte meinen IE zum Abstrurz, oder falls nicht, kam sie zumindest nicht zurück. Ich fürchte, für den IE gibt es wirklich nichts ordentliches ausser evtl. das Visual Studio...
__________________
Viele Grüße, Dr.E. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 1. Think about software design before you start to write code! 2. Discuss and review it together with experts! 3. Choose good tools (-> Adventure PHP Framework (APF))! 4. Write clean and reusable software only! ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ |
|
|
|
|
#10 (permalink) |
|
Erfahrener Benutzer
Registriert seit: 21.05.2008
Beiträge: 9.937
![]() |
Wie erkennt man in JavaScript denn Rekursion? Haben Objekte irgendwelche IDs? Im Prinizip wäre ja sonst ein kleiner DOM-Inspector auf JS-Basis (also nicht auf Browser-Basis) recht einfach umzusetzen (behaupte ich mal so ohne Erfahrung).
|
|
|
|
|
|
|
PHP Code Flüsterer
Registriert seit: 21.08.2005
Beiträge: 4682
PHP-Kenntnisse:
Fortgeschritten
|
|
| Themen-Optionen | |
| Thema bewerten | |
|
|

Dieser Inhalt ist unter einer Creative Commons-Lizenz lizenziert.