Von meiner Webseite aus mache ich eine GET-Anfrage an ein Servlet über eine Schaltfläche. Mein Servlet liest von einer Webcam und speichert eine Bilddatei (gespeichert in 'img/frame.jpg'). Meine Webseite enthält dann ein Skript, das jede Sekunde aus dieser Datei liest. Es wird also auf der Webseite aktualisiert.Java Servlet-Logik aufrufen, ohne auf neue Seite zu verweisen
Webseite:
<html>
<body>
<img id='feed' src="img/frame.jpg" />
<form method="GET"
action="startCCTV.do">
<br><br>
<center>
<input type="SUBMIT"? value='Start'/>
</center>
</form>
<script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
<script src="js/main.js"></script>
</body>
JavaScript (aktualisiert, da die Frage beantwortet wurde):
window.setInterval(function updateFrame() {
invokeServlet();
}, 1000);
// Preload images.
function refreshImage() {
var image = new Image();
image.src = "img/frame.jpg?" + new Date().getTime();
image.onload = function() {
// Image exists and is loaded.
$("#feed").attr('src', "img/frame.jpg?" + new Date().getTime());
}
}
// Send a GET request to the Servlet, to write a new image from the webcam.
function invokeServlet() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
refreshImage();
}
};
xhttp.open("GET", "startCCTV.do", true);
xhttp.send();
}
Ich habe habe eine Endlosschleife in meinem Servlet, um kontinuierlich einen neuen schreiben Bild, so würde das Bild auf der Webseite aktualisiert werden. Es scheint jedoch keine gute Möglichkeit zu sein (das Bild wurde alle 3 oder 4 Sekunden aktualisiert und manchmal gar nicht angezeigt). Ich denke, der beste Weg wäre, meine GET-Anfrage in einer Schleife in meiner updateFrame()-Funktion zu haben, und das Servlet würde ein Bild pro Anfrage schreiben.
Allerdings weiß ich nicht, wie ich diese Anfrage in meinem Javascript stellen kann, ohne auf die Servlet-Antwort umgeleitet zu werden, sobald das Servlet seinen Schreibprozess abgeschlossen hat.
Wie kann ich intermittierende Anfragen an mein Servlet stellen, ohne auf eine neue Seite umgeleitet zu werden (d. H. Einfach das Bild auf meiner Seite aktualisieren)?
Wie wäre es mit Ajax Call? –
@Yohannes Können Sie mir bitte ein Beispiel geben? – petehallw