JQuery, AJAX und Encoding

Schickt man in seiner Webapplikation Formulardaten mit AJAX zum Server, dann kann man böse Überraschungen erleben, insbesondere wenn man meistens mit dem Firefox arbeitet und nur gelegentlich mit dem IE testet.

Während der Firefox mit UTF-8 prächtig zurechtkommt, muss man beim IE schon mit dem Zweihänder dahinter, um seine äs, ös und üs irgendwie auf den Server zu bekommen. Das Problem besteht übrigens nicht nur mit AJAX, auch mit GET verschickte Formulare scheinen bei gewissen IE-Versionen und Encodings zu Datenschrott zu führen.

Mit JQuery und UTF-8 wähnt man sich auf der sicheren Seite, doch das ist leider nur die halbe Wahrheit.

Unsere Versuchsanordnung ist denkbar einfach: Eine Webseite mit Zeichensatz UTF-8, ein Formular mit einem Text-Eingabefeld und einem Submit-Button:

<%@ page contentType="text/html;charset=UTF-8" %>
...
<form method="POST" action="remoteHtmlAjaxsearch">
  <input type="text" id="ajaxsearch" /><br />
  <input type="submit" value="Suchen" id="btnSubmit"/>
</form>

Ein Klick auf den Button schickt den eingegebenen Wert mit AJAX zum Server.  Die Remote-Methode macht nichts anderes, als den übergebenen Wert mit einem <p>-Tag zu ummanteln und als HTML zurückschicken. Hier die serverseitige Funktion – natürlich Grails, what else?

def remoteHtmlAjaxsearch = {
  def html = ""
  if (params.ajaxsearch) {
    html = "<p>$params.ajaxsearch</p>"
  }
  render html
}

Wenn man bei JQuery zur einfachsten AJAX-Variante greift, nämlich JQuery.get, dann ist alles in Butter. Verwendet habe ich übrigens Version 1.3.2. Die folgende Variante funktioniert sowohl im IE wie im Firefox:

$('#btnSubmit').click(function() {
  var ajaxsearchIn = $('#ajaxsearch').attr('value');
  $.get("remoteHtmlAjaxsearch", {ajaxsearch: ajaxsearchIn}, function(data){
    $("#content").html(data);
  });
  return false;
});

Diese Methode ist allerdings etwas beschränkt. Wenn man mehr Möglichkeiten benötigt, dann gibt es $.ajax. Der folgende Code macht allerdings im IE aus den Umlauten Hackfleisch:

$('#btnSubmit').click(function() {
  var ajaxsearchIn = $('#ajaxsearch').attr('value');

  $.ajax({
    url: "remoteHtmlAjaxsearch", data: "ajaxsearch=" + ajaxsearchIn,
    success: function(html){
      $("#content").html(html);
    }
  });
  return false;
});

Nur wenn man diesen Code noch mit einem $.ajaxSetup ergänzt und dabei die Daten mit POST abschickt, dann klappt es mit allen Zeichen:

$('#btnSubmit').click(function() {
  var ajaxsearchIn = $('#ajaxsearch').attr('value');

  $.ajaxSetup({
    contentType: "application/x-www-form-urlencoded;charset=utf-8",
    type: "POST"
  });

  $.ajax({
    url: "remoteHtmlAjaxsearch", data: "ajaxsearch=" + ajaxsearchIn,
    success: function(html){
      $("#content").html(html);
    }
  });
  return false;
});

Das Interessante ist, dass die Anwendung von type und contentType innerhalb von $.ajax nicht dasselbe Ergebnis brachte!

Download des Artikels als PDF File