Making API call using XMLHttpRequest?

Hello,

I'm a beginner and would like to know how to get the JSON data using native JS. I have been trying to build my little projects using native JS and I've always had trouble with API calls.

Here is my code:

////////

const key = my_api_key

let x;

window.onload = runThis;

function runThis() {

const submit = document.getElementById('submit');

const search = document.getElementById('search');

submit.addEventListener('click', getData);

function getData() {

let ans = search.value;

let xhttp = new XMLHttpRequest();

let endpoint = `https://www.giantbomb.com/api/search/?api_key=${key}&format=json&query=${ans}&resources=game`;

xhttp.open("GET", endpoint,true);

xhttp.onreadystatechange = function() {

x = JSON.parse(xhttp.responseXML);

console.log(x);

console.log(xhttp.responseXML);

};

xhttp.send();

}

}

and I get this error on console:

XMLHttpRequest cannot load https://www.giantbomb.com/api/search/?api_key=1231234&format=json&query=mario&resources=game. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

XHR failed loading: GET "https://www.giantbomb.com/api/search/?api_key=1232324&format=json&query=mario&resources=game".

I check Network and the status is 200. If it helps, I'm launching this locally only on file://. I tried it on sites like repl.it (similar to jsfiddle) and it doesn't work (much like my other little projects which use API calls). I also used responseText, but to no avail.

I am trying to not use jQuery as much as possible, just so I can get used to JS better.

Any help is greatly appreciated.

@rumbalumba: you're not using CORS right, read on it https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS you'll find what your problem is.

@rumbalumba: Use jsonp to get around cross-origin restrictions.

Yey I got it now! :)

const key = my_api_key;

//note: callback should be in global scope

function getData(s) {

console.log(s);

}

window.onload = runThis;

function runThis() {

const submit = document.getElementById('submit');

const search = document.getElementById('search');

submit.addEventListener('click', clickThis);

function clickThis() {

let ans = search.value;

const jsonpScript = document.createElement('script');

jsonpScript.src = `https://www.giantbomb.com/api/search/?api_key=${key}&format=jsonp&json_callback=getData&query=${ans}&resources=game`;

document.head.appendChild(jsonpScript);

}

}

Thanks, everyone.