Startseite arrow Tipps & Tricks arrow Umlaute in AJAX klappen nicht im Internet Explorer

Umlaute in AJAX klappen nicht im Internet Explorer

(10 Bewertungen)
Freitag, 8. Mai 2009
Geschrieben von Armin Vieweg
Wenn Ihr schon mal versucht habt einen AJAX-Request mit Umlauten oder Sonderzeichen auszuführen, dürfte das zwar im Firefox Browser funktioniert haben, jedoch im Internet Explorer gescheitert sein. Hier der Grund dafür und die einfache Lösung.

In letzter Zeit erwische ich mich immer häufiger, wie ich über den Internet Explorer, egal in welcher Version fluche. Dieses Mal war ein Zeichensatzproblem der Grund.

Ich hatte eine Input-Box und wollte den Inhalt mit der AJAX-Library jQuery an ein PHP-Script schicken, dass dann eine Datenbank-Abfrage macht. Hat in jedem Browser wunderbar funktioniert, auch dem Internet Explorer - bis ich dann mal "Köln" eingegeben habe und im Firefox Ergebnisse zurückgekommen sind und im Internet Explorer so getan wurde als würde es diese Stadt in der Datenbank nicht geben.



UTF8-Decode
Dieser Befehl stand noch vor der mySQL-Query.

$q = utf8_decode($q);


Kommentierte ich ihn aus funktionierte die Anfrage im Internet Explorer, dafür aber nicht mehr in Firefox. Die logischste Schlussfolgerung wäre also eine Browserweiche in PHP gewesen, auf die ich aber lieber verzichten wollte. Etwas intensiver googeln brachte dann auch die Lösung ans Licht.


URI-Encode
In dem URI-Encoding lag der Schlüssel. Firefox codiert die Daten mit URI-Encode, der Internet Explorer nicht. Der IE schickt das "ö" als "ö".

Firefox macht aber z.B. aus dem hier:

Dieser Satz hat Leerzeichen


das hier:

Dieser%20Satz%20hat%20Leerzeichen



In PHP gibt es auch dafür einen eigenen Befehl:

$string_url = rawurlencode($string);





URI-Encode in JavaScript (encodeURIComponent)
Diesen Befehl gibt es in JavaScript ebenfalls und lautet encodeURIComponent.

In einem jQuery-AJAX-Aufruf sieht das dann z.B. so aus:

a = $.ajax({
url:"/datei.php?q=" + encodeURIComponent($("input#ort").val()),
dataType:"json",
success: function(data){
       // ...
        }
});



Das JavaScript-Gegenstück zu dem PHP-Befehl rawurlencode sieht dann so aus:

var string_url = encodeURIComponent(string);



Diese Encodierung ist in einem Standard festgehalten mit der Bezeichnung RFC 1738 (Uniform Resource Locators).

Der Unterschied der Zeichencodierung ist im Internet Explorer 8 nicht mehr vorhanden, egal ob man sich im Kompatibilitätsmodus (zum IE7) befindet oder nicht.



Mich wunderte nur, dass jQuery diesen Befehl nicht schon integriert hatte. Auf Firefox wirkt sich der Befehl im Übrigen nicht aus. Ich hoffe, dass ich damit all denen helfen konnte, die auch mit AJAX und Umlauten im Internet Explorer zu kämpfen hatten.


  Kommentare (12)
 1 Geschrieben von: Dave Gööck, am 07.08.2009 um 17:19
Fantastisch... - Danke!!! 
 
ich habe gerade sicher zwei stunden rumgesucht um herauszufinden, wie ich den IE dazu bringe in einem ajax-post request ein plus-zeichen zu übertragen, da dies für ein internationalisiertes telefonnummernfeld nötig war. z.b. +49 1234 56789 
 
im firefox wurde das zeichen immer korrekt mit übertragen. im IE hab ich das einfach nicht durch den äther bekommen ;) - na ja, dank deines artikels hab ich die lösung gefunden und in der hoffnung, dass jemand, der ein ähnliches problem hat wie ich den beitrag vielleicht schneller bei google findet, hab ich ihn gleich noch etwas ausfühlricher kommentiert. 
 
danke! :) 
 
dave gööck
 2 Geschrieben von: Barbara, am 10.08.2009 um 13:35
Hatte das gleiche Problem. Im firefox ging es die ganze zeit. Nach der Änderung geht es im IE aber im firefox nicht mehr! 
 
das ist doch zum Verzweifeln!
 3 Geschrieben von: Armin Vieweg, am 10.08.2009 um 16:27
Cool! Freut mich, wenn ich schon Zweien damit helfen konnte :D 
 
und Barbara: Nicht verzweifeln! Der Internet Explorer macht das ja ab jetzt (>IE8) auch von sich aus :)
 4 Geschrieben von: Miphois, am 22.08.2009 um 12:55
Hat mir echt gehofen. 
Ich hab meine Chat-Seite auf UTF 8 umgestellt und danach genau mit diesem Problem im IE 6 und 7 zu kämpfen gehabt. 
Auch teils im Firefox. Wenn ich den Chat wie Redirect aufrufte ging es da nämlich aber nicht wia Direktlink von einer nicht UTF-8 Seite. 
 
Nun klappts es jedenfalls wunderbar, danke.
 5 Geschrieben von: Amer P., am 19.09.2009 um 08:48
Es klappt. Man sollte aber auf UTF-8 umstellen wenn man die DB abfragt. 
 
Danke!
 6 Geschrieben von: trgirl, am 10.12.2009 um 14:06
Vielen Dank für die Info :), ich hatte aber das Problem auch im IE8 ;-).... aber durch den Trick klappt es jetzt :)
 7 Geschrieben von: qwert, am 01.04.2010 um 21:45
Ich vermute mal, dass du nicht die richtige Kodierung im HTTP-Header gesendet hast. Also du sendest UTF-8 im Header, die Seite ist aber ISO-8859-1 kodiert. 
Und weiter denke ich mal, daß du im JS mit overrideMimeType den Header für den FF angepasst hast. 
if (xmlhttp.overrideMimeType) { 
xmlhttp.overrideMimeType('text/xml; charset=iso-8859-1') 

Lösen sollte man das Serverseitig. Also mit  
header('Content-type: text/html; charset=ISO-8859-1', true); 
ganz oben in deinem PHP-script sendest du das richtige Encoding für ISO-8859-1 codierte Seiten. (Content-type noch entsprechend anpassen)
 8 Geschrieben von: monasteria, am 21.04.2010 um 17:37
Super!!!! Die Beschreibung hat mein Problem gelöst! 
 
Vielen Dank
 9 Geschrieben von: danke, am 16.06.2011 um 21:06
danke, hat mir echt geholfen ! 
mein gott, ist das ne wixxe !!! (ich meine das problem mit den umlauten...)
 10 Geschrieben von: WEL-Team, am 19.07.2011 um 16:49
Hi, 
vielen Dank für deine seeehhhhr hilfreiche kleine Seite hier. Dieser Tipp hat uns mindestens 4 Stunden unnütze Arbeit erspart. 
Besten Dank!
 11 Geschrieben von: Benny, am 13.04.2012 um 11:29
vielen Dank, das hat mir gerade den Tag/das Wochenende gerettet!
 12 Geschrieben von: Peter Marchert, am 15.05.2012 um 20:08
Vielen Dank!
Letzte Aktualisierung ( Freitag, 8. Mai 2009 )
 
Weiter >




Professor Web - Webdesign Blog - RSS-Feed

Professor Web Blogroll

Alternativer Webdesign-Blog
www.daswebdesignblog.de

Blog für Dies und Das
www.moes-blog.de