Synchronous XMLHttpRequest and not receiving data from Wikipedia API

JavaScript
1

Here’s my Pen so far: https://codepen.io/GiaFil/pen/GxaVNb
I am getting this error: “[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience.”. I don’t know how to deal with this … Also I don’t seem to be getting the data. Any suggestions?

2

Rather simple. You are choosing to do Synchronous HttpRequests, but don’t because they’re bad.

$.ajax({
    type: "GET",
    url: '...',
    contentType: "application/json; charset=utf-8",
    async: false, // <---- Delete this line
    dataType: "json",
    success: function(data, textStatus, jqXHR) {
      console.log(data);
    },
    error: function(errorMessage) {}
  });
}

See if you can fix above issue first and then respond.

3

Every time you make a synchronous HttpRequest, a puppy dies.

Asynchronous requests are frustrating but they are part of the beauty of JavaScript. Listen to Isaac.

4

OK. Thats was I suppose an easy fix. Now what about the second part of my question?

5

1st. in codepen settings->javascript move jquery above bootstrap.js. you must load jquery first then the rest of libs based on jq
2nd you have this declation in js: var typed = document.getElementById('searched').value; but by the time the page is loaded your input field is empty so your url in ajax call "https://en.wikipedia.org/w/api.php?action=query&generator=search&gsrsearch=" + typed +"&gsrnamespace=0&gsrlimit=5&prop=extracts&exchars=200&exlimit=max&explaintext=1&exintro=1&origin=*" will be invalid all time if you don’t reread the input value before making the ajax call

6

@sorinr I’ve put the declaration inside searchURL function. Doesn’t this mean that I make a call to the API every time I click the button?

7

now its ok. just add format=json in your url like ....origin=*&format=json and you will see in the console the json response

1 Like
8

Thanks a lot for your help!!!