I've written a simple app using JQuery whose purpose is to select the fastest mirror site. To this end I use several $.ajax calls - one to each mirror site - and I don't do anything with the data I get from these, I only use the order in which they respond to sort the sites from fastest to slowest. I'd share the code, but really the only thing it does is call the $.ajax function and append a line in a table using the success: callback.
This works perfectly fine for most browsers, except IE which throws the 'access is denied' error. I know about cross domain restrictions and understand the reasoning behind - my plan was to put my script in the 'trusted' zone and enable the required options to bypass the problem as this will be used in a controlled environment, but no matter what I try my code won't run in IE. Some of my mirror sites are indeed in a different domain.
What I have trouble understanding is why all other browsers (FF, Chrome etc), with their default configuration, allow my code to run flawlessly? If the reasoning behind IE blocking this is correct, then why do others allow it?
Also obviously for my purpose using a server-side proxy makes no sense as I want to test the sites from the client side, not from the server. I've also read about other work arounds such as JSONP but unfortunately the sites that I'm testing cannot support this. But once again, what I'm really wondering about is why my code works flawlessly in other browsers..
Well, I spent some more hours trying to understand this but I just don't get it.
I can understand why IE would not allow this type of cross domain request, but really what puzzles me is why do all other browsers allow it? this makes no sense. Using any other browser with default settings, my application works perfectly fine - I can confirm using a packet sniffer that my browser indeed makes the cross domain HTTP connections!
I'm kind of stuck here - if anyone has ideas on how to get it working in IE I would really appreciate it, or at least any hints as to why other browsers do support this? From what I read online this should not work at all...
Ok well since I could not get the ajax calls working in IE I've ended up using another trick - I just use img tags which are hidden from display, and use the onload and onerror handlers in these to display my sites from fastest to slowest.
But this has several disadvantages, the main one being that I lost a lot of control on loading the images, and now I have to wait to the browser to timeout on loading an image from a site that is unavailable, which takes far too long - you have to wait for 1 minute to see which sites are down...
so if anyone has any clues for me as to how to get the ajax method working, I'm all ears!
In fact the reason why I'm not using .load() is because it doesn't work - .load() essentially just calls .ajax() and my whole problem comes from the fact that this wont work in IE in my environment (sure enough, browsing your example code in IE triggers the "access is denied" error). This was my initial approach as well but I could never get it to work. I still have no idea why - same origin policy could explain why IE blocks this, but then why do all other browsers support it?
So I had to resort to the <img onload=...> trick to make it work in IE. as I stated before, my main issue with this approach is the very long timeout that I need to wait for to catch the onerror handler...
Thanks for the ?rnd tip, I had already something similar in place to prevent caching. I appreciate that you took the time to show demo code as well.
The first does ajax as you said, but the second adds an event listener like onLoad.
Basically my script creates an img, adds the source (which can point anywhere) and listenes for it to finish loading. No ajax call, so no cross domain.
It's weird that you say it doesn't work in IE. I do get an error in IE from some jsbin bug, but the script runs without any issues. And I even tested it in 'virgin' environments, where no setting have been changed in the browsers.
I'm beginning to think something is wrong with your ie setup.
Haha - I did indeed confuse the two .load()'s here! (sorry, as I said, this is my first attempt at JS).
So to make sure I get this right this time, how does JQuery differentiate the two? is it the arguments you pass? (if it's an URL or several args, it's AJAX, otherwise it's the handler) or is because you attach it to a specific type of object?
So if there is no ajax involved in your example this indeed points to a problem with my IE configuration. I admit that the browsers I used (tried several) are from a corporate environment where the security settings have been locked down pretty strict, but I've done my best to change all settings to the most insecure I could on a test machine and it still said "access is denied". Maybe it's something in the Windows registry... I will keep looking in this direction then (I am not a Microsoft fan, and I'm relatively clueless with their products).
Now if I put the confusion between the two .load() apart, my original attempt actually used .ajax() and not .load(). And that worked fine in FF & Chrome anyway.
I will post demo code in a few minutes to show you.
Checked out your example, and it's strange! Success is triggered no matter what url I gave it. Even 'regrgrrdxhrtf.com'. So a 404 also triggers success... Of course none of these ajax calls actually return any data, due to cross domain I assume. But that's all beside the point since it don't work in ie :(
Now the part I don't understand with your ie is, why would it block images from being fetch from whatever domain? After all that's all my script was doing... Do you also have this issue if you just place images in the html from different domains?
Yes I also noticed that when DNS resolution fails, success is called immediately. But when DNS resolution succeeds, the calls work as expected...
In fact if these allow only GET requests and return no response from the server this would make perfect sense, as it would effectively be no different than the <img> trick but still allow more control on how the connections are handled - exactly what I was looking for in the context of this app. I will look further into this - out of curiosity in this case as indeed I need to support IE.
Concerning IE, I agree that it makes no sense that your demo code triggers the "access denied" error just for loading images this way. I will try to find some time to troubleshoot the issue further - just loading regular images from other domains of course works fine (that's what I'm doing now as a work around).
If I have to keep my <img> trick but want to handle the timeout in a more efficient way, I thought I could maybe start a timer, then after a reasonable timeout period I could change the SRC attribute to some tiny local image and use the "onsuccess" event to report a timeout, but I read somewhere online that this might also not work as I would expect it...
Malsup, you can use suhajdab's demo code, it hits exactly the same issue as my original code did.
You'll notice that his code makes a few ajax HTTP GET requests to different domains, something that the same origin policy forbids. Yet this works perfectly fine in FF, Chrome and the others, only IE blocks this with "access is denied". This is why I'm confused.
eloisant, thanks for the pointer to XDomainRequest, this is new to me, I will take a look at this!
That code is not using ajax, it is simply creating dynamic image elements and setting the src attribute. The same origin policy does not apply to src attributes of images, scripts, iframes, etc. It applies to requests that use the XHR or to accessing content retrieved from a different domain (via iframe, for example).
If anyone encounters this problem as I have, I believe that jquery 1.5 and over allow you to add a transport to handle ajax requests and even override the default trnasport. This was the approach I used, and someone else may find this code useful if dealing with cross-domain requests on IE8+. Simply add this to one of your initialization script before you make any ajax service calls (feel free to modify):