Question

您好我正在尝试创建一个使用api获取巴士出发时间的网站。它成功地第一次进行api调用并收到正确的信息。但是，当我尝试实现刷新功能时，我首先得到以下错误消息。

仅支持协议方案的交叉原始请求：http，数据，chrome，chrome-extension，https。

对此的解决方案应该是启动本地服务器，所以我通过使用节点和＆＃34; http-server -c-1＆＃34;命令。该网站可以通过localhost访问，但它不会刷新。我收到以下错误。

＆＃34;获取http://localhost:8080/undefined 404（未找到）＆＃34; （开发工具说错误发生在第12行）

HTML

HTML`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Tider</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1 id="Resa">Resa</h1>
    <p id="UpdatedP"></p>
    <div id="OriginDiv">
    <ul id= "OriginList">
    <li>Från</li> 
    </ul>
</div>

<div id="DestinationDiv">
    <ul id="DestinationList">
        <li>Mot</li>`enter code here`
    </ul>
</div>

<div id="TimeDiv">
<ul id="timeList"><li>Avgång</li></ul>
</div>
<div id="FrammeDiv">
  <ul id="FrammeList">
    <li>Framme</li>
  </ul>
</div>
<button type="button" onclick="httpGetAsync()">Uppdatera</button>
<script src="ApiScript.js"></script>
</body>
</html>`

JS

    var url = "https://api.resrobot.se/v2/trip?key=XXXXX&originId=XXXXX&destId=XXXXXX&format=json";

httpGetAsync(url, displayResponse);
function httpGetAsync(theUrl, callback) {
    console.log("httpGetAsync running...");
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            callback(xmlHttp.responseText);
    };
    xmlHttp.open("GET", theUrl, true); // true for asynchronous 
    xmlHttp.send(null);
    setTimeout(httpGetAsync, 3000);
}

function checkIfArray(x) {
    console.log("CheckIfArray running...");
    var returnval = Object.prototype.toString.call(x) == '[object Array]'
    return returnval;
}

function CreateElement(input, ElType) {
    var liElement;
    var textNode;
    var HTMLElement;
    if (ElType == "origin") {
        HTMLElement = document.getElementById("OriginList");
    } else if (ElType == "destination") {
        HTMLElement = document.getElementById("DestinationList");
    } else if (ElType == "time") {
        HTMLElement = document.getElementById("timeList");
    } else if (ElType == "framme") {
        HTMLElement = document.getElementById("FrammeList");
    }
        liElement = document.createElement("li");
        textNode = document.createTextNode(input);
        liElement.appendChild(textNode);
        HTMLElement.append(liElement);

}

function updated(){
  console.log("updated running...");
  var date = new Date();
  var returnTime = 0;
  returnTime = "Uppdaterad: " +date.getHours() +":"+ date.getMinutes();
  var HTMLElement = document.getElementById("UpdatedP");
  var timeElement = document.createElement("p");
  var UpdateNode = document.createTextNode(returnTime);
  timeElement.appendChild(UpdateNode);
  HTMLElement.append(timeElement);
}

function displayResponse(data) {
    console.log("displayResponse running...");
    var ResultObj = JSON.parse(data);
    //console.log("DATA: " + data);
    //console.log("TestObj: " + ResultObj.Trip[0].LegList.Leg[0].Origin.name);
    //console.log("More TIme: " + ResultObj.Trip[1].LegList.Leg[0].Origin.time);
    if (checkIfArray(ResultObj.Trip)) {
        for (var i = 0; i < ResultObj.Trip.length; i++) {
            //console.log("Origin " + i + ": " + ResultObj.Trip[i].LegList.Leg[0].Origin.name);
            CreateElement(ResultObj.Trip[i].LegList.Leg[0].Origin.name, "origin");
        }
        for (var i = 0; i < ResultObj.Trip.length; i++) {
            CreateElement(ResultObj.Trip[i].LegList.Leg[0].Destination.name, "destination");
        }
        for (var i = 0; i < ResultObj.Trip.length; i++) {
            CreateElement(ResultObj.Trip[i].LegList.Leg[0].Origin.time.substring(0,5), "time");
        }
        for ( var i =0; i<ResultObj.Trip.length; i++){
            CreateElement(ResultObj.Trip[i].LegList.Leg[ResultObj.Trip[i].LegList.Leg.length-1].Destination.time.substring(0,5), "framme");
        }
    }
}

function checkArray(x) {
    var returnval = Object.prototype.toString.call(x) === '[object Array]';
    return returnval;
}

Answer 1

当您创建＆＃34;刷新＆＃34;时，您正在调用httpGetAsync而没有任何参数计时器。

这一行：

setTimeout(httpGetAsync, 3000);

每隔3秒拨打httpGetAsync()。因此，您每隔三秒就会XMLHttpRequest到http://localhost:8080/undefined。

设置超时时，在闭包中包含正确的参数。

setTimeout(function(){
  httpGetAsync(theUrl,displayResponse);
},3000);

或在setTimeout()电话中加入参数（详情请见MDN web docs: setTimeout）：

setTimeout(httpGetAsync,3000,theUrl,displayResponse);

或使用Function.prototype.bind()

节点http服务器，在第一次api呼叫后接收404

1 个答案: