javascript - Cannot carry out Ajax request from wikipedia

Question

I want to use wikipedia API in my project to grab images of people, but fail. I use this url:https://en.wikipedia.org/w/api.php?action=query&prop=pageimages&titles=Albert%20Einstein&pithumbsize=100 When i console browser says the following

Refused to execute script from 'https://en.wikipedia.org/w/api.php?action=query&prop=pageimages&titles=Albe…Callback&callback=jQuery22409288979864744966_1470068280411&_=1470068280412' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

My code

var general = {
    // The URL to the quote API
    url: 'http://api.forismatic.com/api/1.0/',
    // What to display as the author name if s/he's unknown
    unknownAuthor: 'Uknown',
    // Base URL for the tweet links generation
    tweetURL: 'http://twitter.com/home?status=',
    wikiURL:'https://en.wikipedia.org/w/api.php?action=query&prop=pageimages&titles=Albert Einstein&pithumbsize=100&callback=wikiCallback'
};

var wikirequest = function() {
    $.ajax({
      url:general.wikiURL,
      dataType: 'jsonp',
      success: function(wikData) {
      console.log(wikData);
      //var image = wikiData.
      displayQuote(image);
      } // end of success
    });
}// wikirequest

wikirequest();

Pen

Has anyone met the same issue?

Answer 1

You are trying to load the data using JSONP, but you are making a request to a URL that returns an HTML document. JSONP requests have to be answered with JavaScript programs (since that is a fundamental feature of how they work … and also why they are dangerous and should be avoided in favour of plain JSON and CORS).

To make it return JSONP you need to provided two additional query string parameters:

• format=json
• callback=YourCallbackName

… where YourCallbackName is the name of the function that should be executed and passed the data you are fetching as an argument. Most Ajax libraries will generate that name (and the function itself) dynamically when you specify callback=?.