How to enter Wiki API in Pure Javascript

Question

I am trying to access Wiki API in Javascript. If I type in URL then get the data, but if I use it in Javascript function then it doesn't work. Here is the url:

https://en.wikipedia.org/w/api.php?action=query&format=json&titles=New_York&prop=revisions&rvprop=content&callback=?

I was successful in JQuery, but I want to know how we can extract in Javascript.

Any help will be appreciated.

<div id="getw"></div>


var url = "https://en.wikipedia.org/w/api.php?action=query&format=json&titles=New_York&prop=revisions&rvprop=content&callback=?";

function getText() {  
    var request = new XMLHttpRequest();  
    request.open("GET", url, true);  
    request.onreadystatechange = function () {  
        if (request.readyState == 4 && request.status == 200) {  
            var wdata = JSON.parse(request.responseText);  
            document.getElementById("getw").innerHTML = wdata.query.normalized[0];  
        }  
    }  
    request.send(null);
}

Try removing `&callback=?` from your url to get a pure JSON response. — csp713, Jan 04 '18 at 03:40
Add this: request.setRequestHeader( 'Api-User-Agent', 'Example/1.0' ); in https://www.mediawiki.org/wiki/API:Main_page#Identifying_your_client — Cruzer, Jan 04 '18 at 03:47

score 1 · Accepted Answer · answered Jan 04 '18 at 04:35

1

When you add &callback=? to the url, JQuery will use JSONP instead of regular XMLHttpRequest. Read THIS for a good explanation of JSONP using vanilla JS.

So you can do the following to mimic what JQuery is doing:

// Instead of "&callback=?", use the function name of an actual callback.
// In this case it will be "&callback=apiCallback" which is declared below.
var url = "https://en.wikipedia.org/w/api.php?action=query&format=json&titles=New_York&prop=revisions&rvprop=content&callback=apiCallback";

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.body.appendChild(script);

function apiCallback(res) {
  document.getElementById("getw").innerHTML = JSON.stringify(res.query.normalized[0]);
}

<div id="getw"></div>

answered Jan 04 '18 at 04:35

1cgonza

1,589
10
20

1cgonza, Thank you. It works fine, when I put all code in a single file, but when I separate the html and js file and try to call js file from html file it does not work. e.g.: . – user6642297 Jan 05 '18 at 00:01
@user6642297 what error do you get? I would need more context for when you say "it does not work". Try adding a simple `console.log('test');` at the beginning of the JS file to see if it is loading at all. – 1cgonza Jan 05 '18 at 01:22
1cgonza, I got the following error: "Uncaught TypeError: Cannot read property 'appendChild' of null " on the code line: document.body.appendChild(script); It seems it is not appending the script. – user6642297 Jan 05 '18 at 02:30
@user6642297 Sounds like you are adding your script tag inside the ``. At that point, there is no `document.body`, hence the error. Try adding the `` right before the closing `
` in the HTML. But this is a separate issue. If the answer is correct, make sure to accept it so others can find the correct answer in the future ;)
– 1cgonza Jan 05 '18 at 04:27
1

When I wrote "document.head.appendChild(script);", used head instead of body in the code, it worked. The reason my script was mentioned inside not inside . The "appendChild" was null, because script was not in the , but was in the . It was a great help from 1cgonza and a good experience for me. – user6642297 Jan 05 '18 at 04:30
1cgonza, Sorry about it, I am not yet fully acquaintance with Stack Overflow, I was trying to put that code in the comments and could not put clearly, so I put it in the answer, which is a mistake. I still extremely appreciate your help . Again my apology. – user6642297 Jan 06 '18 at 01:49

score 0 · Answer 2 · answered Jan 05 '18 at 04:36

<div id="getw"></div>

//Thanks again  1cgonza

var url = "https://en.wikipedia.org/w/api.php?action=query&format=json&titles=New_York&prop=revisions&rvprop=content&callback=apiCallback";

var script = document.createElement('script');

script.setAttribute('type', 'text/javascript');

script.src = url;

document.head.appendChild(script);

function apiCallback(res) {
  document.getElementById("getw").innerHTML = JSON.stringify(res.query);
}

How to enter Wiki API in Pure Javascript

2 Answers2