I know that there is similar topics, but I cannot find answer to the following question. Why The first piece of code executes callback while the second doesn't.
var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function () {
console.log("Request is ready");
}
xmlHttp.open("GET", "www.google.com", true);
var result = 0;
while(1 < 5) {
}
In the code above Request is ready is printed. But with the following code:
setTimeout(function () {
console.log("Test")
}, 5)
while (1 < 5) {
}
Test is not printed. Why this is happening? I thought that onreadystatechange will push this function to be executed when the request is ready, but because we have an infinite loop the looper will not check the queue (because looper loops on the main thread and it is busy). This logic works on the second example, but not on the first. Obviously I am missing something.
Thanks in advance.
There's no asynchronous event in the first case: open triggers the first state change and synchronously calls the onreadystatechange callback.
The "Request is ready" log is done before the loop is entered.
If you add the xmlHttp.send and you call a non cached URL, you'll notice the callback isn't called for the other changes, because those ones are really asynchronous.
Related
I have a AJAX call to retrieve some XML using the below method. Often when I run the code it does not enter the onreadystatechange function until the last iterations of my foreach loop. I'm assuming this is because the calls to "www.webpage.com/" + arrayValue are taking enough time that before the state is updated to "Ready" and then the next request beings. The method probably only runs for the last iteration of the loop because there is no other request to override it and thus has time to become "Ready". From what I've seen online you can't really do a tradition Wait() statement in javascipt or AJAX to give the calls time to complete. So how can I overcome this issue?
var getXML = new XMLHttpRequest();
myArray.forEach((arrayValue, index) => {
getXML.open("GET", "www.webpage.com/" + arrayValue, true);
getXML.setRequestHeader('Access-Control-Allow-Credentials', true);
getXML.setRequestHeader('Authorization', "Basic " + btoa(":something"));
getXML.send(null);
getXML.onreadystatechange = function () {
if(this.readyState == this.DONE) {
Console.Log("We made it in!");
}
}
});
The problem here is that you are trying to use the same XMLHttpRequest object for multiple requests.
Don't do that. Create a new, clean instance of XMLHttpRequest for each request.
myArray.forEach((arrayValue, index) => {
var getXML = new XMLHttpRequest();
getXML.open("GET", "www.webpage.com/" + arrayValue, true);
So I am trying to use the timeout property of XMLHttpRequest to "recover" my program when a request for data times out. Basically if it fails in retrieving the data, I want it to try again. At the moment my code looks like this (full URL removed to fit it all neatly):
function pullRequest(){
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
if (this.readyState === 4) {
jsonDecode = this.responseText;
json = JSON.parse(jsonDecode);
ask = (json.result.Ask);
bid = (json.result.Bid);
}
}
xhr.open("GET","<URL>",true);
xhr.send();
}
I'm not totally following how to implement the timeout property, or if it is even going to do what I want. I did add the following two lines after xhr.openbut it threw and error:
xhr.timeout = 5000;
xhr.ontimeout = pullRequest()
Basically in my head if it times out, run the pullRequest function again. I'm sure this is probably not a good idea but I'm not experienced enough to know why. For what it's worth a snippet of the error is as follows:
...\node_modules\xmlhttprequest\lib\XMLHttpRequest.js:165
settings = {
^
RangeError: Maximum call stack size exceeded at exports.XMLHttpRequest.open
Any suggestions in how to achieve my goal, or a point to some literature that would assist me would be greatly appreciated.
Thanks!
The problem is you're calling pullRequest:
xhr.ontimeout = pullRequest()
// ------------------------^^
Since it immediately calls itself, then calls itself again, and calls itself again, etc., eventually it runs out of stack when the maximum recursion level of the environment is reached.
You don't want to call it there, you just want to assign the function reference to ontimeout so that if the timeout occurs, your function gets called:
xhr.ontimeout = pullRequest
// No () ------------------^
I'm currently writing a search function using JavaScript.
However, when I attempt to test my creation, I find that it stops about halfway through for no discernible reason.
Below is my code:
document.getElementById("test").innerHTML = "";
var Connect = new XMLHttpRequest();
Connect.open("GET", "xmlTest.xml", false);
document.getElementById("test").innerHTML = "1";
Connect.send(null);
document.getElementById("test").innerHTML = "2";
var docX = Connect.responseXML;
var linjer = docX.getElementsByTagName("linjer");
The first line is there to clear a potential error message from earlier in the code. Then I attempt to open up an XML file, as I need to read from it.
As you can see, I've entered two debug statements there; they will print 1 or 2 depending on how far I get in the code.
Using this, I've found that it stops exactly on the Connect.send(null); statement (as 1 gets printed, but 2 never does), but I can't figure out why. Google says that it might be that chrome can't access local files, but when I found a way to allow Chrome to do this, it still did not work.
What am I doing wrong?
This might be a synchronous issue that requires a response that your code simply is not getting.
Try using an async call instead:
Connect.open("GET", "xmlTest.xml", true);
Also make sure to setup proper callbacks since you'll be using async here now instead of synchronous code, like so:
// Global variable scope
var docX;
var linjer;
// Define your get function
getDoc = function(url, cbFunc) {
var Connect = new XMLHttpRequest();
// Perform actions after request is sent
// You'll insert your callback here
Connect.onreadystatechange = function() {
// 4 means request finished and response is ready
if ( Connect.readyState == 4 ) {
// Here is where you do the callback
cbFunc(Connect.responseXML);
}
};
// 'true' param means async, it is also the default
Connect.open('GET', url, true);
Connect.send();
}
// Define your callback function
callbackFunction = function(responseXML) {
// XML file can now be stored in the global variable
window.docX = responseXML;
window.linjer = window.docX.getElementsByTagName("linjer");
}
// And here is the call you make to do this
getDoc("xmlTest.xml", callbackFunction);
For better understanding of all of this, do some research on scope, closures, callbacks, and async.
I have a function in a .js file that takes information stored in localStorage and syncs them back to the server using synchronous ajax calls. (Order of integration is vital, hence synchronous is necessary)
function syncUp() {
var xml = new XMLHttpRequest();
xml.open("GET", "Default.aspx", true); Also tried setting this to false
xml.onreadystatechange = function() {
if (xml.readyState == 4) {
if (xml.status == 200) {
var items = localStorage.getItem("SyncOrder");
var sync = items.split(",");
for (var i = 0; i < sync.length -1; i++) {
Perform repeated synchronous calls to webservice via AJAX to integrate each item to the server
}
}
}
}
xml.send(null);
}
syncUp() is being called from more than one place. When called directly from the onclick event of a button where syncUp() is the only function called and the only code running, it works great. However, if from a page where I am first adding an item to the localStorage object and then calling syncUp() as follows
function saveEdit(item) {
var currData = localStorage.getItem("SyncOrder");
localStorage["SyncOrder"] = currData + "," + item;
syncUp();
}
, the xmlHTTPRequest status returns 0 and the sync doesn't perform. What could possibly be preventing the xmlHTTPRequest from getting a response of 200 as the only code running before syncUp() is a couple lines of javascript, which should be done executing before the site even gets into syncUp()?
There are two causes of status code of zero.
Making calls from the file protocol.
The page is refreshing/navigating away as the request is being made.
In your case I would assume it is #2. If you are using a button or a link to make the Ajax call, make sure to cancel the click action with either preventDefault or return false.
I have to request data for a JS-script from a MySQL database (based upon a user-id).
I did not find a simple solution for JavaScript and it was not possible to load the data using ajax, because the database is available under a different domain.
I implemented a workaround using PHP and curl.
Now the JS has to "wait" for the request to finish, but the script is of course running asynchronously and does not wait for the response.
I know that it's not really possible to wait in JS, but it must be possible to return value like this.
I also tried using a return as another callback, but that didn't work of course, because the getter-function will run further anyway.
How can I implement a simple getter, which "waits" and returns the response from the HTTP-request?
Thanks for any other clues. I'm really lost at the moment.
This is a excerpt from the source code:
/**
* Simple getter which requests external data
*/
function simple_getter() {
// http request using a php script, because ajax won't work crossdomain
// this request takes some time. function finished before request is done.
/* Example */
var url = "http://example-url.com/get_data.php?uid=1234";
var response_callback = handle_result_response;
var value = send_request( url, response_callback );
value = value.split('*')[0];
if (value === '' || value == const_pref_none) {
return false;
}
/* 1. returns undefinied, because value is not yet set.
2. this as a callback makes no sense, because this function
will run asynchronous anyway. */
return value;
}
Additional information about the used functions:
/**
* Callback for the send_request function.
* basically returns only the responseText (string)
*/
function handle_result_response(req) {
// do something more, but basically:
return req.responseText;
}
/**
* Requests data from a database (different domain) via a PHP script
*/
function send_request( url, response_callback ) {
var req = createXMLHTTPObject();
if (!req)
return;
var method = (postData) ? "POST" : "GET";
req.open(method, url, true);
req.setRequestHeader('User-Agent','XMLHTTP/1.0');
// More not relevant source code
// ...
req.onreadystatechange = function () {
// More not relevant source code
// ...
response_callback(req);
}
if (req.readyState == 4)
return;
req.send(postData);
}
Not really relevant code, but required for the HTTP-request:
var XMLHttpFactories = [
function () {return new XMLHttpRequest()},
function () {return new ActiveXObject("Msxml2.XMLHTTP")},
function () {return new ActiveXObject("Msxml3.XMLHTTP")},
function () {return new ActiveXObject("Microsoft.XMLHTTP")}
];
function createXMLHTTPObject() {
var xmlhttp = false;
for (var i=0; i<XMLHttpFactories.length; i++) {
try {
xmlhttp = XMLHttpFactories[i]();
} catch (e) {
continue;
}
break;
}
return xmlhttp;
}
You really, really shouldn't try to synchronously wait for a network request to complete. The request may never complete, may hang and take a long time, and so on. Since JavaScript is single threaded, and in fact all major browser engines are single threaded, this will cause your entire page to hang while waiting for the request, and in some browsers, may cause the entire browser to hang.
What you should do is replace code like this:
var returned = some_request('http://example.com/query');
do_something_with(returned);
with code like this:
some_request('http://example.com/query', function (returned) {
do_something_with(returned);
});
That way, you will never cause your page or the browser to hang waiting for the request, and can simply do the work once the response comes in.
I don't see whats wrong with your code in general.
When you make a request, provide a Callback. When a response comes back, which you can easily detect, execute the Callback and pass it the result.
This is the way client side apps work.It is not procedural, but works by events.
You present the screen to the user and wait
The user makes an action
You call the server, set a callback and wait
The response come and you execute the callback and wait for another step 2
Rather than trying to change that, you need to fit with that or it will be a painful experience.
Javascript is not multithreaded. It means a single statement is run at a time. The real asynchronism come from the time the server takes to respond and call the callback. You never know which call will come first and need to build your program with that in mind.