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 
