0
こんにちは私は、バスの出発時間を取得するためにAPIを使用するウェブサイトを作成しようとしています。それは正常にapi呼び出しを行い、正しい情報を受け取ります。しかし、リフレッシュ機能を実装しようとすると、最初に次のエラーメッセージが表示されました。ノードhttpサーバ。最初のapiコールの後に404を受信します。
クロスオリジン要求は、http、data、chrome、chrome-extension、httpsのプロトコルスキームでのみサポートされています。
これはローカルサーバーを起動するための解決策ですので、nodeと "http-server -c-1"コマンドを使用してこれを行いました。ウェブサイトはlocalhostを介してアクセスする必要がありますが、更新はされません。次のエラーが表示されます。 "http://localhost:8080/undefined 404（見つかりません）GET"
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を（開発ツールは、エラーがライン12に発生したと言う）あなたはどのなしhttpGetAsyncを呼び出している
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;
}
を使用します。ありがとうございました！ – Markus