jQuery cross-domain Ajax. Why is my code working?

[Aidhon]

My understanding is that if it is a cross-domain request, we are supposed to set dataType to “jsonp”. Which I did, but then it did not work. I got the following error message in the console:

Refused to execute script from ‘http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_p…page]=1&callback=jQuery31105215916043980608_1487877164531&=1487877164532’ because its MIME type (‘application/json’) is not executable, and strict MIME type checking is enabled.

But when I set it to “json”, it worked.
Can anyone explain why?

Here is my code:

$("#btn-one-quote").on(“click”, function(){
$.ajax({
url: “http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1”,
cache: false,
dataType: “json”,
success: function(quote){
$("#one-quote-output").html(quote[0].content);
}
});
});

[marzelin]

There’s another, newer way of making cross-origin request: CORS. If a provider (server) supports it, a client can just send normal requests without any additional setup. That’s why your request succeeded.

If you want to use jsonp, you need to provide an additional parameter ( _jsonp) to your query string to inform the provider that’s the format you want to use (as you can read in api docs).

[Aidhon]

Thank you for your answer.

Could you please elaborate on this:

you need to provide an additional parameter ( _jsonp) to your query string

How do I do that? Is it a setting in $.ajax(); if so which one? I can’t seem to find that in the jQuery API (http://api.jquery.com/jquery.ajax/).

Also, do I need to always do that, or only when the server supports CORS?

[marzelin]

This site uses the WordPress JSON REST API to provide a way for you to grab quotes. The endpoint is http://quotesondesign.com/wp-json/posts, and you can filter the results using a filter parameter on the URL. For example, to grab a single, random post, use this URL:

http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1

If you’re using something like jQuery, it can use the content with it’s own fancy callback magic, like this:

$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
  $("body").append(a[0].content + "<p>— " + a[0].title + "</p>")
});

Otherwise you’ll have to use JSONP so it returns a function you can execute instead (to get around the cross-origin thing), like:

http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=mycallback

Best way to fetch the data:

$('#your-button').on('click', function(e) {
    e.preventDefault();
    $.ajax( {
      url: '/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
      success: yourCallback,
      cache: false
    });
  });
});

more about cors and jsonp

[Aidhon]

Thank you for your answer.