0

I have a JSON script loaded from an external website. In its simplest form, the code has been like this (and working):

jQuery.getJSON("http://adressesok.posten.no/api/v1/postal_codes.json?postal_code=" + document.querySelector("input").value + "&callback=?",
    function(data){
        document.querySelector("output").textContent = data.postal_codes[0].city;
    });

However, the website owner don't want jQuery if it's not crucial, so I recoded .getJSON to the request = new XMLHttpRequest(); model:

request = new XMLHttpRequest();
request.open("GET", "http://adressesok.posten.no/api/v1/postal_codes.json?postal_code=" + document.querySelector("input").value + "&callback=?", true);
request.onload = function() {
    var data = JSON.parse(request.responseText);
    document.querySelector("output").textContent = data.postal_codes[0].city; 
};
request.onerror = function() { /* this gets called every time */ };

I've modified my code many times, read documentations over and over again, yet the .onerror function is the only one always displaying. This is the console:

Errors in IE11 console

Which in Norwegian says that this script requested CORS, that it can't find the origin in the head of Access-Control-Allow-Origin, and that the XMLHttpRequest had a network error, and says "no access".

There could be several reasons as to why this occurs:

1: There's something wrong with the new code

2: There's something in the .getJSON jQuery function (a hack?) that prevents the error from happening

3: There's something crucial in the new code that I have forgot adding

4: There's something with my browser (IE 11 at the moment)

5: Something else?

It would be lovely with some help on this.

DEMO: http://jsbin.com/muxigulegi/1/

mnsth
  • 2,169
  • 1
  • 18
  • 22

2 Answers2

5

That isn't a network error. It's a cross origin error. The request is successful but the browser is denying access to the response to your JavaScript.

Since you have callback=? in the URL, jQuery will generate a JSONP request instead of an XMLHttpRequest request. This executes the response as a script instead of reading the raw data.

You are manually creating an XMLHttpRequest, so it fails due to the Same Origin Policy.

Create a JSONP request instead.

Community
  • 1
  • 1
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Thanks. Can you guide my code in the right direction by modifying some? http://jsbin.com/siwurajuko/1/edit I can't put all the pieces together by myself. I'm not very good in this field. – mnsth Dec 10 '14 at 21:07
  • @mangseth — The linked question has three answers with examples. – Quentin Dec 10 '14 at 21:14
  • All three examples show you how to retrieve the values. – Quentin Dec 10 '14 at 21:17
  • Thanks, I finally see it now. Thanks for your help (and for not downvoting me) – mnsth Dec 10 '14 at 21:32
0

From http://api.jquery.com/jquery.getjson/:

JSONP

If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details.

You do have a callback. Which means that the JQuery function can request data from another domain, unlike your XHR call.

sebnukem
  • 8,143
  • 6
  • 38
  • 48