jQuery AJAX not working using IE

Question

I have seen lots of other people with this problem all over SO and elsewhere but none of the given solutions seem to work for me.

I have a jQuery AJAX call to an ASHX handler. The code works in Firefox and Chrome but not in IE (versions 8, 9 or 10).

It looks like so (simplified):

var val = $(this).val();

$.ajax({
    url: '/Source/Handlers/Search.ashx?q=' + val,
    type: "GET",
    cache: false,
    dataType: 'json',
    error: function(w,t,f) {
         alert(w + "\n" + t + "\n" + f);
    },
    success: function (data) {
         ...
    }
 });

When I run the code in IE the error handler kicks in and says

[object Object]
error
error

Useful huh?

The ASHX handler is like this (again it is simplified):

public class Search : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
        context.Response.ContentType = "application/json";
        context.Response.Buffer = false;

        JavaScriptSerializer serializer = new JavaScriptSerializer();
        List<Suggestions> jsonResponse = new List<Suggestions>();

        // do some stuff

        context.Response.Write(serializer.Serialize(jsonResponse));
    }
}

I have tried swapping "GET" for "POST", I have tried enabling and disabling the "cache" property, I have tried different dataType settings such as "json", "xml" and "text".

Using HTTP Fiddler I can see that the json response does come back but IE doesn't seem to be able to process it.

Any ideas?

EDIT

Here is the JSON response in TextView from HTTP Fiddler:

543
[{"title":"GAMES","results":[{"title":"abcdefg™","link":"http://www.abcdefg.com/en_gb/abcdefg/","image":"/uploadedImages/abcdefg/games/1-Game_Folder_Master(1)/Config/abcdefg(1).jpg","total":""},{"title":"abcdefg","link":"http://www.abcdefg.com/en_gb/abcdefg","image":"/uploadedImages/abcdefg/games/1-Game_Folder_Master(1)/Config/abcdefg.jpg","total":""},{"title":"abcdefgg","link":"/Retailers/?game=1432&platform=0","image":"/uploadedImages/abcdefg/games/1-Game_Folder_Master(1)/Config/abcdefg.jpg?n=9736","total":""},{"title":"abcdefg","link":"http://www.abcdefg.com","image":"/uploadedImages/abcdefg/games/1-Game_Folder_Master(1)/Config/abcdefg.jpg","total":""},{"title":"abcdefg","link":"/Retailers/?game=1763&platform=0","image":"/uploadedImages/abcdefg/games/1-Game_Folder_Master(1)/Config/abcdefg_promo.jpg","total":""}],"total":"24","link":"/Search/?q=total"},{"title":"MEDIA","results":[{"title":"Videos","link":"/Search/?q=total","image":"","total":"1"},{"title":"Screenshots","link":"/Search/?q=total","image":"","total":"35"}],"total":null,"link":null}]
0

EDIT 2

Hmmm, I updated the $.ajax call to alert w.status and it returned "404". Confused - how can it return 404 in the status when Fiddler shows the response as 200?

Answer 1

Maybe there is a problem with encoding. try this

$.ajax({
        type: 'GET',
        url: encodeURI(url ),
        dataType: 'text',
        success: function (data) {
                            result = JSON.parse(JSON.parse(data))
                                                }
       });

Answer 2

After a lot of trial and error I found the problem. When using IE I need to call JSON.parse(data) on the data object that is returned back from my ASHX handler. To do this, use a non-jQuery method of calling Ajax. It has meant that I have two different blocks of Javascript - one for IE and one for other browsers.

if ($.browser.msie) {
    var xhReq = new XMLHttpRequest();
    xhReq.open("GET", "/Source/Handlers/Search.ashx?q=" + val + "&d=" + dateObj.getTime(), false);
    xhReq.send(null);
    AjaxSuccess(xhReq.responseText);
} else {
    $.ajax({
        url: '/Source/Handlers/Search.ashx',
        type: "GET",
        cache: false,
        dataType: 'json',
        data: { q: val },
        contentType: "application/json;",
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.responseText);
        },
        success: function (data) {
            ...
        }
    });
 }

 function AjaxSuccess(data) {
     data = JSON.parse(data);
     ...
 }

Strangely, the JSON.parse() method throws an "unexpected character" error in Firebug.

Answer 3

I vaguely remember a problem like this. Could you try adding

contentType: "application/json; charset=utf-8"

to the ajax request properties. I think that solved the problems back then.

Answer 4

Try adding data : {q : val} and see if this solves the issue:

 var val = $(this).val();

 $.ajax({
    url: '/Source/Handlers/Search.ashx',
    type: "GET",
    data : {q : val},  //<--------send it this way
    cache: false,
    dataType: 'json',
    error: function(w,t,f) {
       alert(w + "\n" + t + "\n" + f);
    },
    success: function (data) {
       ...
    }
 });