Get a JSON API response using vanilla javascript

Question

I'd like to use wikipedia search api from javascript, I know it might be easier with something like jquery but I'd like to get a good grip on the basics before using frameworks. Here is the code I wrote, but I never get the alert:

document.getElementById("go_search").addEventListener("click", () => {
    let wiki = new XMLHttpRequest();
    wiki.addEventListener("load", () => {
      alert(wiki.responseText)
    });
    wiki.open("GET", "https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&utf8=1&srsearch=Albert+Einstein");
    wiki.send();

  })

The wikipedia adress is a search Albert Einstein, which is just to test if the code is working. Thanks for your help it is much appreciated!

There is an error in the console which will tell you the problem — Andreas
– Andreas, Commented May 26, 2017 at 13:34
Instead of listening to the load event, listen for the onreadystatechange event. The you can check the readyState and status of your XMLHttp object to know the status of the ajax call — Jay Ghosh
– Jay Ghosh, Commented May 26, 2017 at 13:39
Just a heads-up on the future :) Fetch API -> fetch("https://en.wikipedia.org/...").then(response => response.json()).then(res => console.log(res)) — Andreas
– Andreas, Commented May 26, 2017 at 13:50
Thanks @Andreas, I did see the error and the fetch API seems like it would be really useful, appreciate the advice. — Abderrahman Gourragui
– Abderrahman Gourragui, Commented May 26, 2017 at 13:53

Abhijit Parida · Accepted Answer · 2017-05-26 13:40:35Z

1

Add origin=* to the URL query params to make JSON API requests to Wikipedia.

Change your request URL to

https://en.wikipedia.org/w/api.php?origin=*&action=query&format=json&list=search&utf8=1&srsearch=Albert+Einstein

answered May 26, 2017 at 13:40

Abhijit Parida

1271 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abderrahman Gourragui Over a year ago

Thanks Abhijit, it worked. what the origin does is allow request between different domains right? will it work with any api or just wikipedia?

Abhijit Parida Over a year ago

The Origin header tells the server from which website the client code originated. origin=* is just for the Wikipedia API.

Collectives™ on Stack Overflow

Get a JSON API response using vanilla javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related