views:

3501

answers:

4

I've encountered a problem when retrieving a JSONP response from a server in a different domain using IE6.

When I make the same AJAX call using JSONP to a server in the same domain as the web page, all goes well in all browsers (including IE6). However, when I make calls between domains (XSS) using JSONP, Internet Explorer 6 locks up. Specifically, the CPU spikes to 100% and the 'success' callback is never reached. The only time I have had success going between domains is when the response is very short (less than 150 bytes typically). The length of the response seems important.

I'm using jQuery 1.2.6. I've tried the $.getJSON() method and the $.ajax(dataType: "jsonp") method without success. This works beautifully in FF3 and IE7. I haven't been able to find anyone else with a similar problem. I thought this type of functionality was fully supported by jQuery in IE6.

Any help is very appreciated,

Andrew


Here is the code for the html page making the AJAX call. Make a local copy of this file (and jquery library) and give it a shot using IE6. For me, it always causes the CPU to spike with no response rendered.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" src="Scripts/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="http://devhubplus/portal/search.js"&gt;&lt;/script&gt;
</head>
<body>
<a href="javascript:test1(500, 'wikiResults');">Test</a>
<div id="wikiResults" style="margin-top: 35px;"></div>

<script type="text/javascript">
    function test1(count, targetId)
    {
     var dataSourceUrl = "http://code.katzenbach.com/Default.aspx?callback=?";
     $.getJSON(dataSourceUrl, {c: count, test: "true", nt: new Date().getTime()}, function(results) {
       var response = new String();
       response += "<div>";
       for(i in results)
       {
        response += results[i];
        response += " ";

       }
       response += "</div>";
       $("#" + targetId).html(response);
     });
    }


</script>
</body>
</html>

Here is the JSON that comes back in the response. According to JSLint, it is valid JSON (once you remove the method call surrounding it). The real results would be different, but this seemed like that simplest example that would cause this to fail. The server is a ASP.Net application returning a response of type 'application/json.' I've tried changing the response type to 'application/javascript' and 'application/x-javascript' but it didn't have any affect. I really appreciate the help.

jsonp1222350625589(["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18"

,"19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38"

,"39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58"

,"59","60","61","62","63","64","65","66","67","68","69","70","71","72","73","74","75","76","77","78"

,"79","80","81","82","83","84","85","86","87","88","89","90","91","92","93","94","95","96","97","98"

,"99","100","101","102","103","104","105","106","107","108","109","110","111","112","113","114","115"

,"116","117","118","119","120","121","122","123","124","125","126","127","128","129","130","131","132"

,"133","134","135","136","137","138","139","140","141","142","143","144","145","146","147","148","149"

,"150","151","152","153","154","155","156","157","158","159","160","161","162","163","164","165","166"

,"167","168","169","170","171","172","173","174","175","176","177","178","179","180","181","182","183"

,"184","185","186","187","188","189","190","191","192","193","194","195","196","197","198","199","200"

,"201","202","203","204","205","206","207","208","209","210","211","212","213","214","215","216","217"

,"218","219","220","221","222","223","224","225","226","227","228","229","230","231","232","233","234"

,"235","236","237","238","239","240","241","242","243","244","245","246","247","248","249","250","251"

,"252","253","254","255","256","257","258","259","260","261","262","263","264","265","266","267","268"

,"269","270","271","272","273","274","275","276","277","278","279","280","281","282","283","284","285"

,"286","287","288","289","290","291","292","293","294","295","296","297","298","299","300","301","302"

,"303","304","305","306","307","308","309","310","311","312","313","314","315","316","317","318","319"

,"320","321","322","323","324","325","326","327","328","329","330","331","332","333","334","335","336"

,"337","338","339","340","341","342","343","344","345","346","347","348","349","350","351","352","353"

,"354","355","356","357","358","359","360","361","362","363","364","365","366","367","368","369","370"

,"371","372","373","374","375","376","377","378","379","380","381","382","383","384","385","386","387"

,"388","389","390","391","392","393","394","395","396","397","398","399","400","401","402","403","404"

,"405","406","407","408","409","410","411","412","413","414","415","416","417","418","419","420","421"

,"422","423","424","425","426","427","428","429","430","431","432","433","434","435","436","437","438"

,"439","440","441","442","443","444","445","446","447","448","449","450","451","452","453","454","455"

,"456","457","458","459","460","461","462","463","464","465","466","467","468","469","470","471","472"

,"473","474","475","476","477","478","479","480","481","482","483","484","485","486","487","488","489"

,"490","491","492","493","494","495","496","497","498","499"])
A: 

Does you json validate at jslint? If you have a ur and include the full jquery lib I can debug it for you or post the json and I can try to recreate the issue. Just from the info given it is quite hard to tell. I have seen some odd things before with the actual names of the keys in the json which breaks on ie6.

redsquare
I've added a response to this answer in my original post above. You can find the json response there.
anschoewe
+3  A: 

May be completely unrelated but I have just discovered that in IE6, when code is initiated from an onclick event handler, a JSONP callback may never execute.

The fix for this issue is to attach the code via an HREF instead of the click event.

Unfortunately, this didn't fix the problem. The exact same issue arises. I've updated my original post, to include a place where you can test the JSOP call for yourself. Please see the original question above.Andrew
anschoewe
This was my problem in a nutshell. How very annoying!
Andy McCluggage
A: 

Have you tried mime-type: application/x-javascript?

J5
Unfortunately, this did not have any affect. It still does not work.
anschoewe
+2  A: 

Hi, you're not going to like this response so much, but I'm convinced it's on your server side.

Here's why:

I've recreated your scenario and when I run with your JSONP responder I get IE6 hanging, as you've explained.

However, when I change the JSONP responder to my own code (exactly the same output as you've give above) it works without any issue (in all browsers, but particularly IE6).

Here's the example I mocked together:

http://jsbin.com/udako (to edit http://jsbin.com/udako/edit)

The callback is hitting http://jsbin.com/rs.php?callback=?

Small note - I initially suspected the string length: I've read that strings in IE have a maxlength of ~1Mb which is what you were hitting (I'm not 100% sure if this is accurate), but I changed the concatenation to an array push - which is generally faster anyway.

Remy Sharp
I think you're write. I haven't dug into the problem in a while, but I'm getting the JSON response from a regular ASP.Net aspx page. I think I would have more luck calling an actual web-servers (.asmx). Thanks you for your suggestion!Andrew
anschoewe