Develop Reference

No Access-Control-Allow-Origin header JS Get Request

I Have write a code using JS, to send GET Request to a URL. This error appears in the console when I'am clicking the button to make the GET request: ERROR
Below you can see the code, I saw some solutions but it didn't work for me. I'am working in a index.html file should I insert something in my code to fix this error?
function call()
{
var url = "http://urlexample";
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
console.log(xhr.status);
console.log(xhr.responseText);
}};
xhr.send();
}
<button onclick="call();">Make a request</button>

How to everytime reload web, and get the newest data from back-end

What my purpose is below
Visting a web and the js.file in this web will load php file, and it will return data to html.
It's meaning every time when I reload web, I will get newest data.
I have try this in js.file
let XML = new XMLHttpRequest();
XML.open('post', url, true);
XML.send('mydata');
then use responseText to get data I want
Indeed, I don't need send any data.
I can do what I want to do, but I am not sure this way is right or not.
Because I think ajax should not use in this case, it must be send something and return something.

What you are saying is you only want to get data without sending anything which is called a http get request, you can do that as below.
function get(url)
{
var xm = new XMLHttpRequest();
// false for synchronous
xm.open("GET",url,false);
xm.send(null);
return xm.responseText;
}
console.log(get('your Url'));
You need to specify the url of your Http Endpoint ( Back-End ).
If your are making a asynchronous request then below code works,,
function get(theUrl, callback)
{
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
callback(xmlHttp.responseText);
}
// true for asynchronous
xmlHttp.open("GET", theUrl, true);
xmlHttp.send(null);
}
get('your url',(responseText)=>{
console.log(responsetext);
});

Unable to capture response from an API in Javascript

I am using below code to capture response but unable to get, please let me know what I am missing here.
function testcall() {
var request = new XMLHttpRequest();
request.open('GET', 'http://demo8951713.mockable.io/fusionchart', true);
request.send();
var response = this.responseText;
alert(response);
}
testcall()

You have two problems.
First, this (in the context you are using it) does not refer to your XHR object.
Second, you are trying to read the response as soon as the request has been sent. You have to wait until the browser has received the response!
request.addEventListener("load", function () {
var response = this.responseText;
alert(response);
});
That change (moving the code to an event handler) also puts this in a context where it refers to the correct object.
Once you have fixed this, you are likely to want to try to return the value. Before you do, read this question.

you are missing the callback function
request.onreadystatechange = function() {
if (xhr.readyState === 4) {
callback(xhr.response);
}
}
for more details, refer https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/response#Example

javascript getJson or html page that contains json xdk

i have a page that send me a json. You can send the request by GET method:
http://htmldiprova.altervista.org/android_login_api/getAccountXdk.php?unique_id=56d7fa82eddce6.56824464
or POST METHOD:
http://htmldiprova.altervista.org/android_login_api/getaccount.php
argument --> unique_id=56d7fa82eddce6.56824464
Now I try to download this information inside my mobile application developed by Intel XDK but I can't read this content with javascript jquery etc etc.
Anyone help me?

You should create a XMLHttpRequest() object and use JSON.parse() on the responseText so the json string turns into an object.
var myUniqId = "56d7fa82eddce6.56824464";
var request = new XMLHttpRequest();
request.open('GET', "http://htmldiprova.altervista.org/android_login_api/getAccountXdk.php?unique_id="+myUniqId, true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
var resp = JSON.parse(request.responseText);
console.log(resp);
alert(resp.resultAccount[0].box); // Meeting Sporting Club
}
};
request.send();
Check your console for the object paramaters. Also feel free to ask any questions as comment to this answer.
Also read about XHR: https://en.wikipedia.org/wiki/XMLHttpRequest

Is it secure to call a PHP file from JavaScript?

I have a simple HTML5 Canvas game and at the end of a part I want to store variables in MySQL. Is it secure to do this with XMLHttpRequest, Ajax or anything? This is how I started to write it:
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
var success = request.responseText;
alert(success);
}
}
request.open('GET', 'saveLevel.php?name='+name+'&level='+level, true);
request.send();
My problem with this is that everyone can do this in console like this:
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
var success = request.responseText;
alert(success);
}
}
request.open('GET', 'saveLevel.php?name='+name+'&level=100', true);
request.send();
(How) can I solve it?

You can use the combination of Authentication, Obfuscation and Minification to secure you JavaScript Network Calls
Sample JS Obfuscator Library JScrambler
Sample JS Minification Library UglifyJS
Authentication-
I assume,your API has some sort of authentication field (e.g. Hash/Token etc.). If not, you can integrate it with - This answer.
Make sure you use a salt, (or even API key) that is given to your JS client on a Session Basis. This way, you can prevent it from unauthorized access.
On the server side, remember the last few endpoint calls, and before allowing another one, check if your logic allows for the new one right now.
If you follow the steps above it will certainly make it very secure.