codefx.biz

Today I noticed a strange behavior with jQuery and Internet Explorer…

The jQuery function below worked just fine in Firefox & Chrome …
but on Internet Explorer it somehow never triggered the ‘success’ event callback:

$.ajax({
   type:"GET",
   url:"handler.php?id="+$.id,
   dataType:"json",
   success:function(json){
      /* do something */
   }
});

In case you don’t use jQuery, this is the required request header (it’s identical to dataType:”json”):

xhr.setRequestHeader("Accept","application/json");

As it turned out, IE has certain compatibility issues when delivering with the correct headers.
For example, this response header causes the AJAX request to fail dearly on Internet Explorer:

<?php
   header("content-type: application/json; charset=utf8");
   echo json_encode($json);
?>

But when sending out the response without any header – the JSON gets parsed on IE:

<?php
   echo json_encode($json);
?>

Some people on the jQuery forum wrote, that IE even requires that content header,
but the trick definitely is: not to send out the content-type response header to IE.


One method to handle this behavior is browser-detection on AJAX:

$.ajax({
   type:"GET",
   url:"handler.php?browser="+
   (($.browser.msie)?"ie":"dom")+"&id="+$.id,
   dataType:"json",
   success:function(json){
      /* do something */
   }
});

… and a simple fall-through switch statement within the AJAX-handler:

<?php
switch($_GET['browser']){

    case "dom": /* sending out the correct headers */
                header("content-type: application/json; charset=utf8");
		
                /* fall-back to IE compatibility */
     case "ie": $arr = $obj->get_some_array($id);
                echo json_encode($arr);
                break;
}
?>

Or alternatively: detect Internet Explorer server-side and just skip the header in that case:

<?php
if(!preg_match("/msie\s(\d+).(\d+)/", strtolower($_SERVER["HTTP_USER_AGENT"]), $arr)){
   header("content-type: application/json; charset=utf8");
}
echo json_encode($obj->get_some_array($id));
?>

This makes JSON applications even work on IE6, believe it or not