Getting a JSON file using jQuery without a web server

Question

I had a coding interview quiz for front-end working with JSON and whatnot. I submitted my file but I'd just like to learn what I was missing.

And one of the reqs was Should not require a web server, and should be able to run offline..

I used jQuery and used $.getJSON() to get the data from the .JSON file. I threw it up on my WAMP localserver and it worked flawlessly across all three major browsers (IE, Firefox, Chrome). Then I moved that project to Desktop, so essentally, without a LOCALSERVER.

On Firefox 30.0, it worked great. No problems.

Oon Google Chrome, I know you can't access local files without a web server...

On Internet Explorer 11, however... it didn't work. Why?

Here is what I am using. It's not complex.

function loadTasks() {
  console.log("Loading tasks...");
  $.getJSON("data.json", function(result) {
    $.each(result, function(i, task) {
      $("#load_tasks").append(
        "<div class='row'><span class='data-task'>" + task.name +
        "</span> <span class='data-date'>" + task.date +
        "</span> <span class='data-name'>" + task.assigned +
        "</span> </div>");
    });
  });
}

and here is data.json

Answer 1

This seems to be a bug in jQuery. This bug has been reported to jQuery. The bugs status is fixed. But it seems, the bug is still at large.

Explanation

Generally in IE, ajax is implemented through ActiveXObjects. But in IE11, they made some tweaks to ActiveXObject implementation that if we try to do the following:

typeof(window.ActiveXObject)

instead of returning 'function', as it is said in IE docs, it returns undefined. jQuery used to use this to switch between xhr in normal browsers and between one in IE. Since the check evaluates to undefined, code used to create xhr object in normal browsers is run.(which of-course is a bug, strangely, for non-local files it working fine).

In a bug filed to bugs.jquery.com, the bug reporter asks,

To fix the problem it's enough to change the condition: use "window.ActiveXObject !== undefined ?" instead of "window.ActiveXObject ?"

jQuery developers does try to fix this with this commit, but the comment under the commit says its still not fixed and also suggests a possible way to approach this problem.

var activex; // save activex somewhere so that it only need to check once
if ( activex === undefined ) 
  try { 
    new ActiveXObject("MSXML2.XMLHTTP.3.0");
    activex = true; 
  } catch (e) { 
    activex = false 
  }
xhr = activex ? createActiveXHR() : createStandardXHR();