We Keep Coding

I get 'Synchronous XMLHttpRequest on the main thread' error, but my code works as expected

Here is a piece of my code to ensure if there is a file in the given URL.
if there is the file based on that file URL we will console.log('We have context for the question'); else console.log('No available context');
The code works as expected but an error occurs in the console:
speak('note');
function contextExist(url) {
return new Promise((resolve) => {
const xhr = new XMLHttpRequest();
xhr.open('HEAD', url, false);
xhr.send();
return resolve(xhr.status==200);
});
}
// Speak Module
async function speak(type) {
switch (type) {
case 'note':
let resolved = await contextExist('https://round-arm-authority.000webhostapp.com/Ultimate%20Video%20Hack/videos/vid1.mp4');
if(resolved === true){
console.log('We have context for the question');
} else {
console.log('No available context');
}
break;
}
}
Every time I got this error in my console:
since my code works fine I wonder if this is a serious error or not? How can I fix this error?
UPDATE:
speak('note');
function contextExist(url) {
return new Promise((resolve) => {
const xhr = new XMLHttpRequest();
xhr.open('HEAD', url, true);
xhr.onload = function (e) {
return resolve(xhr.status==200)
};
xhr.onerror = function (e) {
return resolve(xhr.status==200)
};
xhr.send();
});
}
// Speak Module
async function speak(type) {
switch (type) {
case 'note':
let resolved = await contextExist('https://round-arm-authority.000webhostapp.com/Ultimate%20Video%20Hack/videos/vid1.mp4');
if(resolved === true){
console.log('We have context for the question');
} else {
console.log('No available context');
}
break;
}
}

How to load contents of multiple files in particular order with Javascript/AJAX

I am using JS/AJAX to display the contents of multiple files on a page. The files are dynamically generated, and are loaded using a for-loop. There is one file that contains metadata for the set, including how many other files need to be loaded. The other files have a number in the filename, and I load them by requesting "file_[loop_index].json".
The problem is, the amount of data in each json file is arbitrary as well, and the AJAX calls will complete in the order of smallest file first. I want to display the data in order based on the name, rather than the size.
Here is a stripped-down example, suppose we want to display the contents of a book:
function get(url) {
return new Promise(function(resolve, reject) {
var req = new XMLHttpRequest();
req.open('GET', url);
req.onload = function() {
if (req.status == 200) {
resolve(req.response);
}
else {
reject(Error(req.statusText));
}
};
req.onerror = function() {
reject(Error("Network Error"));
};
req.send();
});
}
get('toc.json').then(function(response) {
chapters = JSON.parse(response)["chapters"];
return chapters;
}).then(function(levels) {
for (i = 0; i < chapters; i++) {
(function (i) {
get("chap".concat(i,".json")).then(function(response) {
console.log(response);
})
}(i));
}
});
toc.json:
{ "chapters": 2 }
chap0.json:
{ "text" : "00000" }
chap1.json:
{ "text" : "1" }
The result will be:
{ "text" : "1" }
{ "text" : "00000" }
Where as if I were to switch the number of characters in each file, the result would be:
{ "text" : "0" }
{ "text" : "11111" }
I want to print the line with "0"'s before the line with "1"'s regardless of each file size.
I cannot use async/await, as my page must work in IE11 and it does not support arrow functions.
The solution I thought of was to store the contents in an array, return that from the for-loop, and display the contents, i.e.:
Attempted Solution:
var tempArray = [];
function get(url) {
return new Promise(function(resolve, reject) {
var req = new XMLHttpRequest();
req.open('GET', url);
req.onload = function() {
if (req.status == 200) {
resolve(req.response);
} else {
reject(Error(req.statusText));
}
};
req.onerror = function() {
reject(Error("Network Error"));
};
req.send();
});
}
get('toc.json').then(function(response) {
chapters = JSON.parse(response)["chapters"];
return chapters;
}).then(function(levels) {
for (i = 0; i < chapters; i++) {
(function(i) {
get("chap".concat(i, ".json")).then(function(response) {
console.log(response);
tempArray[i] = response;
})
}(i));
}
return tempArray;
}).then(function(response) {
console.log(response);
}
);
But the final console.log(response) yields:
Array[]
I suppose this fails because the promise sequence is proceeding past the for-loop section before the actual AJAX calls complete. If I could figure out how to make it wait for them to finish, I would be there, but at the moment I am stumped.
Another solution that could work under other circumstances is to dynamically generate part of the html, and update the correct elements with the corresponding file contents. Unfortunately this is not an option for my particular use-case.
Any help? Thank you.

Bending over backwards to use promises. Why not just have the names in an array and have one function doing the getting, update the counter and call the function again?
var listOfFiles=["fileList.txt”],
cnt=0,
oReq = new XMLHttpRequest();
function reqListener () {
if (listOfFiles[0]=="fileList.txt") {
listOfFiles = this.responseText.split(",");
}
else {
processFile(this.responseText);
cnt++;
}
getFile();
}
oReq.addEventListener("load", reqListener);
function getFile() {
if (cnt >= listOfFiles.length) return;
oReq.open("GET", listOfFiles[cnt]);
oReq.send();
}
getFile();

Use Promise.all (XHR removed from the example, but Promises still used).
function getTOC() {
var jsonStr = JSON.stringify({
chapters: 2,
});
return Promise.resolve(jsonStr);
}
function getChapter(i) {
return Promise.resolve("chapter " + i);
}
getTOC()
.then(function(response) {
var chapters = JSON.parse(response)["chapters"];
return chapters;
})
.then(function(chapters) {
var promises = [];
for (i = 0; i < chapters; i++) {
promises.push(getChapter(i));
}
return Promise.all(promises);
})
.then(function(results) {
// results is an array of results, ordered as expected
console.log(results);
});

Making a Callback for AJAX Requests to return the response to the caller

I've looked all over the place and none of the answers I've found have been able to help me out with this problem. Basically I have a function that calls a separate function to make an XMLHttpRequest. The request goes to a server, which generates a random number and returns it to the page.
The problem is that while the request is fetching the data, the caller function continues through its commands. I need to have the data from the request before the caller can move forward. People have mentioned callbacks and promises, neither of which I have been able to grasp with what's available online. I'd rather use callbacks because promises aren't supported in all browsers. Can someone please help walk me through how to use them? I can provide some of the code that I have if needed.
Here's my caller function:
function plotData(dataSet)
{
var x = xScale+20; // 20 = margin length
var y = 260; //origin of graph
getRequest();
console.log("x = "+x);
console.log("dataSet = "+dataSet[0]+", "+dataSet[1]);
... //rest of the function commands
}
Here's my XML Request:
function getRequest()
{
var request;
if (window.XMLHttpRequest)
{ // Mozilla, Safari, IE7+ ...
request = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{ // IE 6 and older
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.onreadystatechange = function()
{
console.log('onReady');
if (request.readyState === XMLHttpRequest.DONE)
{
if (request.status === 200)
{
random = request.responseText;
random = parseInt(random);
random = random/100;
random = random.toFixed(2);
console.log("random = " +random);
data[1] = random;
console.log("data = "+data[0]+", "+data[1]);
}
else
{
alert ('There was a problem with the request');
}
}
}
request.open("GET", "lak1010_hw05.php", true);
request.send();
}

Here is your modified getRequest function with the callback,
function getRequest(callback)
{
var request;
if (window.XMLHttpRequest)
{ // Mozilla, Safari, IE7+ ...
request = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{ // IE 6 and older
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.onreadystatechange = function()
{
console.log('onReady');
if (request.readyState === XMLHttpRequest.DONE)
{
if (request.status === 200)
{
random = request.responseText;
random = parseInt(random);
random = random/100;
random = random.toFixed(2);
console.log("random = " +random);
data[1] = random;
console.log("data = "+data[0]+", "+data[1]);
// here call your callback
callback(random);
}
else
{
alert ('There was a problem with the request');
}
}
}
request.open("GET", "lak1010_hw05.php", true);
request.send();
}
Your calling method,
function plotData(dataSet)
{
var x = xScale+20; // 20 = margin length
var y = 260; //origin of graph
getRequest(function(random){
console.log('Random number received:');
console.log(random);
});
console.log("x = "+x);
console.log("dataSet = "+dataSet[0]+", "+dataSet[1]);
... //rest of the function commands
}

EDIT: Well shit I missed your edit and thought it was just a general promise question.
This is a function with parameters:
test = function(parameter) {
if (paramater) {
return true
} else {
return false
}
}
This is a function that has an extra parameter called a 'callback'.
test = function(parameter, callback) {
if (parameter) {
callback(null, 'result')
} else {
callback('error')
}
}
A callback usually has two arguments. An error, and an optional result.
As you can see, if parameter is true, we run a function that returns 'null' as the error, and 'result' as the result.
If you'd like to delay functions using a callback, you simply call the function like this:
test(true, function(err, result) {
if(err) {
console.log(err)
} else {
console.log(result)
}
})
Replace console.log with the function you want upon a successful result or error. It's hard to understand at first, but try writing some code for it - the reading is usually useless when you don't have an ingrained idea of asynchronous code.
You have to manually add the callbacks and stuff - here's an extract from my backend.
this.findOneByPhone = function(phone, req, res, callback) {
connection.acquire(function(err, con) {
con.query('select * from users where phone = ?', [phone], function(err, result) {
con.release()
if (err) {
callback(err)
} else {
callback(null, JSON.stringify(result[0], null, 4))
}
})
})
}
And then calling it;
this.findOneByPhone(user.phone, null, null, function(err, foundUser) {
if (err) {
res.status(500).json({message: 'Signup findOneByPhone failed.', error: err})
} else {
if (foundUser) {
var foundUserJSON = JSON.parse(foundUser)
res.json({status: 0, message: 'User already found in database, please skip signup', result: 'skip'})
} else {
res.json({status: 0, message: 'User is not in database, please signup', result: 'signup'})
}
}
})

Try the new fetch API. Promises with jQuery are pretty broken :/
=> https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
var myHeaders = new Headers();
var myInit = { method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default' };
fetch('flowers.jpg', myInit)
.then(function(response) {
return response.blob();
})
.then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});

Promises are the way to go here. You can use a Promise polyfill to help take care of unsupported browsers.
var myPromise = (function() {
return new Promise(function(resolve, reject) {
$.ajax({
url:'/page.php?id=123',
type:'POST',
success: function(data) {
resolve(data);
}
});
});
})();
myPromise.then(function(data) {
// Continue code here
});
Basically you create a promise that gets resolved with the data returned from your AJAX call. myPromise.then() gets fired when the Promise is resolved and you continue your code execution there with the data you passed along in the promise resolution. You can also reject() a promise if the AJAX error'd or had invalid data etc.
With your code something like this:
function plotData(dataSet)
{
var x = xScale+20; // 20 = margin length
var y = 260; //origin of graph
var myPromise = new Promise(function(resolve, reject) {
$.ajax({
url:'/page.php?id=123',
type:'POST',
success: function(dataSet) {
resolve(dataSet);
}
});
});
myPromise.then(function(dataSet) {
console.log("x = "+x);
console.log("dataSet = "+dataSet[0]+", "+dataSet[1]);
... //rest of the function commands
});
}
Simpler with just the callback:
function plotData(dataSet)
{
var x = xScale+20; // 20 = margin length
var y = 260; //origin of graph
$.ajax({
url:'/page.php?id=123',
type:'POST',
success: function(dataSet) {
console.log("x = "+x);
console.log("dataSet = "+dataSet[0]+", "+dataSet[1]);
... //rest of the function commands
}
});
}

Multiple xmlhttprequest on a page

I am having an error when using new XMLHttpRequest() for the second time in JavaScript code called from textbox event on page.
My JavaScript finds suggestions for text entry from the SQL to do that I use xmlhttprequest, it does fine when it is the first time but when I keep typing in the text box I receive:
"typeerror: xmlhttprequest not a costructor"
(this error happens only in Firefox)
This is my code:
function fnNull() { };
function changeofstate(){
if (XMLHttpRequest.readyState == 4)
{
whatever ;
}
XMLHttpRequest.onreadystatechange = fnNull();
}
function whentextchange(){
var WebURL = "the url here ";
XMLHttpRequest = CreateXmlHttpObject(changeOfState);
XMLHttpRequest.open("GET", WebURL, true);
XMLHttpRequest.send(null);
XMLHttpRequestt.abort();
}
}
function CreateXmlHttpObject(handler) {
var objXmlHttpReq = null;
var Req = null;
if (navigator.userAgent.indexOf("Opera")>=0)
{
return ;
}
if (navigator.userAgent.indexOf("MSIE")>=0)
{
var strName="Msxml2.XMLHTTP";
if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
{
strName="Microsoft.XMLHTTP";
}
try
{
objXmlHttpReq=new ActiveXObject(strName);
objXmlHttpReq.onreadystatechange = handler;
return objXmlHttpReq;
}
catch(e)
{
return ;
}
}
if (navigator.userAgent.indexOf("Mozilla") >= 0) {
try
{
if (Req == null) {
Req = new XMLHttpRequest();
}
Req.onload = handler;
Req.onerror = handler;
return Req;
}
catch (e) {
alert(e);
alert(Req.responseText)
alert(e);
return;
}
}
}

You should name your request object something else than XMLHttpRequest. It might override the XMLHttpRequest object in the browser. Thus giving you the error.
XMLHttpRequest = CreateXmlHttpObject(changeOfState);
Assigning XMLHttpRequest variable like this is actually using global scope. You should use var and another variable name
var req = CreateXmlHttpObject(changeOfState);
Hope this clarifies.

xmlHTTPrequest won't open ("GET" , url, true); I'm miffed! PHP

I've been trying to get a url to open but I'm miffed as to why this hasn't worked. The code is listed and explained below. Any help will be deeply appreciated.
The object:
function getXMLHTTPRequest() {
var req = false;
try {
/* for Firefox */
req = new XMLHttpRequest();
} catch (err) {
try {
/* for some versions of IE */
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (err) {
try {
/* for some other versions of IE */
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (err) {
req = false;
}
}
}
return req;
}
The object is called like this:
<script type="text/javascript">
var myDelete = new getXMLHTTPRequest();
</script>
Now here's what I want to do:
function removeArticle(id) {
if (myDelete) {
try {
var deletUrl = "delete.php";
var query = deletUrl + "?theid=" + id;
myDelete.open("GET", query, true);
myDelete.onreadystatechange = removeArticleResponse;
myDelete.send(null);
} catch (e) {
alert ("Unable to connect to the server:\n" + e.toString());
}
} else {
alert ("Bad! Very BAD!");
}
}
When I do this:
if (myDelete.open("GET", query, true)) {
myDelete.onreadystatechange = removeArticleResponse;
myDelete.send(null);
} else {
alert ("No road!");
}
The alert("No road!"); shows me that the code doesn't execute passed this point:
if (myDelete.open("GET", query, true)) {
This means that the if (myDelete) { works. The code passes this stage and for some reason stops here: myDelete.open("GET", query, true); It won't open the url. I'm not sure what the problem is.
Edit: Here's the function used to access the server response:
function removeArticleResponse () {
if (myDelete.status == 4) {
if (myDelete.status == 200) {
try {
response = myDelete.responseText;
document.getElementById('displaynewsletterarticleresult').innerHTML = response;
} catch(e) {
alert("An error occured while reading the response:" + e.toString());
}
} else {
alert ("An error occured when attempting to retrieve the data:\n" + myDelete.statusText);
}
}
}

According to this, XMLHttpRequest.open() has no return value, so your check will always fail.

In your response function, do you mean to check .status == 4 instead of .readyState?

All xmlHTTPRequests are bound to the same origin policy. Maybe that's your issue.
You can read more about it at http://en.wikipedia.org/wiki/Same_origin_policy