Why wikipedia ajax call is not working

Question

var url = 'http://en.wikipedia.org/w/api.php?action=opensearch&format=json&limit=15&search=' + search;
var ourRequest = new XMLHttpRequest();

ourRequest.open('GET', url);

ourRequest.onload = function() {
  var data = JSON.parse(ourRequest.responseText);
  console.log(data);
};
ourRequest.send();

Can someone tell me why i am not able to get parsed data in my console.

[Open your DevTools and look for an error](https://developer.chrome.com/devtools). It might be a CORS error. — E. Sundin, Jul 16 '17 at 17:27
So did you mean ourRequest.send(); should be after ourRequest.open('GET', url); — Luffy_9, Jul 16 '17 at 17:27
E.Sundin I am sry, I guess i need to learn DevTools. I am a newbie. — Luffy_9, Jul 16 '17 at 17:32
There's always something to learn. Also, I don't think the `send()` call should be moved at all. — E. Sundin, Jul 16 '17 at 17:34
Related, https://stackoverflow.com/questions/22780430/javascript-xmlhttprequest-using-jsonp — shakib, Jul 16 '17 at 17:49

score 0 · Answer 1 · answered Jul 16 '17 at 17:39

0

Well i made it to work with the following code.

$.ajax({
url: url,
jsonp: "callback",
dataType: "jsonp",
success: function(data) {
  console.log(data);
 }
 });

answered Jul 16 '17 at 17:39

Luffy_9

13
4

codtex · Accepted Answer · 2017-07-16T21:25:57.870

You need to add one more parameter to your url variable to make this request work - origin=*. Add it and your code will be fine.

Check how I've changed the url variable. Wikipedia API requires the request origin included in the parameters string.

document.getElementById('do-search').addEventListener('click', search);

function search(){
  var search = document.getElementById('search').value;
  var url='http://en.wikipedia.org/w/api.php?action=opensearch&format=json&limit=15&origin=*&search='+search;
  var ourRequest = new XMLHttpRequest();

  ourRequest.open('GET', url);

  ourRequest.onload = function() {
    var data = JSON.parse(ourRequest.responseText);
    document.getElementById('results').innerHTML = data;
  };
  ourRequest.send();
}

<input id="search" type="text">

<button id="do-search">Search</button>

<div id="results"></div>

Why wikipedia ajax call is not working

2 Answers2