[英]AJAX XHR request onReadyStateChange events order and number of times clarification
我正在学习并尝试使用Python-Flask和Javascript编写一个简单的股票报价工具。
我特别想学习普通的 Javascript。 我的代码正在运行,但是我不明白的是,当我看着开发人员控制台时,在获得成功的console.log(response)之前,我先打印了3条错误消息。
仅仅是代码在响应返回之前循环了3次,因此在最终返回200状态之前,它们每次都记录了“ ERROR”? 有人会向我解释一下还是将我指向一篇好的文章/帖子?
我的事件监听器:
document.getElementById("btn_quote").addEventListener("click", getQuote);
Ajax调用:
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();
}
它没有返回单独的HTTP状态代码,而是返回了不同的就绪状态。
更改您的console.log("ERROR");
。 要console.log(request.readyState);
。
然后,您将看到报告的内容以及原因。
我认为您应该使用响应的实际值来检查您的readyState
值。 供您参考,以下是readyState
的可能值:
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
因此,您基本上可以将其检查为4:
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState === 4) {
//response statements
} else {
//error statements
}
};
基本上,ajax调用将获得以下事件的通知,这些事件称为readyStateChange
事件。
在大多数情况下,您通常会根据连接速度获得4个就绪状态更改(极少数情况下,如果连接速度非常快,则仅更改一次),并且应检查它是否为4 ,这意味着响应现已完成。
要检查该请求是否是suceess与否,你应该检查request.status === 200
,这意味着成功,可以检查其他http status code
像错误404
, 500
等。
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" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.