I'm learning and trying to write a simple stock quote tool using Python-Flask and Javascript.
I specifically want to learn plain Javascript. My code is working, but what I don't understand is when I'm watching the developer console, I get 3 error messages printed before I get the successful console.log(response).
Is it simply that the code loops 3 times before the response comes back, so it logged 'ERROR' each of those times before finally returning the 200 status? Would someone explain it to me or point me to a good article/post?
My event listener:
document.getElementById("btn_quote").addEventListener("click", getQuote);
The ajax call:
function getQuote(e){
e.preventDefault();
var ticker = document.getElementById("ticker").value
var shares = document.getElementById("shares").value
var url = "/quote/"+ticker+"/"+shares
// Fetch the latest data.
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState === XMLHttpRequest.DONE) {
if (request.status === 200) {
var response = JSON.parse(request.response);
console.log(response);
}
} else {
// TODO, handle error when no data is available.
console.log('ERROR');
return false;
}
};
request.open('GET', url);
request.send();
}
It's not returning separate HTTP status codes, its returning different ready states.
Change your console.log("ERROR");
. To console.log(request.readyState);
.
Then you will see what it is reporting and why.
i think you should be checking your readyState
values with the actual values of the response. For you reference, following are the possible values of readyState
:
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
So you could basically check it to be 4 in your case:
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState === 4) {
//response statements
} else {
//error statements
}
};
Basically, ajax calls will get notified for the following events which is called as readyStateChange
event.
For most cases, you used to get 4 ready state changes based on the speed of the connection (rare cases only only one if it's very quick) and you should check whether it is 4 which means the response is completed now.
To check whether the request is suceess or not, you should check the request.status === 200
which means success and can check for other http status code
for errors like 404
, 500
etc.
document.getElementById("btn_quote").addEventListener("click", getQuote); document.getElementById("btn_quote_error").addEventListener("click", getQuoteError); function getQuote(e){ e.preventDefault(); var ticker = document.getElementById("ticker").value; var shares = document.getElementById("shares").value; //var url = "/quote/" + ticker + "/" + shares; var url = 'http://stackoverflow.com/'; // Fetch the latest data. var request = new XMLHttpRequest(); request.onreadystatechange = function() { console.log(request.readyState); if (request.readyState === XMLHttpRequest.DONE) { console.log(request.status); if (request.status === 200) { //var response = JSON.parse(request.response); //console.log(response); } } //else { // TODO, handle error when no data is available. //console.log('ERROR'); //return false; //} }; request.open('GET', url, true); request.send(); } function getQuoteError(e){ e.preventDefault(); var ticker = document.getElementById("ticker").value; var shares = document.getElementById("shares").value; //var url = "/quote/" + ticker + "/" + shares; var url = 'http://stackoverflow404.com/'; // Fetch the latest data. var request = new XMLHttpRequest(); request.onreadystatechange = function() { console.log(request.readyState); if (request.readyState === XMLHttpRequest.DONE) { console.log(request.status); if (request.status === 200) { //var response = JSON.parse(request.response); //console.log(response); } } //else { // TODO, handle error when no data is available. //console.log('ERROR'); //return false; //} }; request.open('GET', url, true); request.send(); }
<input type="text" id="ticker"/> <input type="text" id="shares"/> <input type="button" id="btn_quote" value="Get Quote" /> <input type="button" id="btn_quote_error" value="Get Quote Error" />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.