Question

在我的网页上，我通过按钮向servlet发出GET请求。我的servlet从网络摄像头读取并保存图像文件（保存到＆＃39; img / frame.jpg＆＃39;）。然后，我的网页会包含一个脚本，每秒都会从此文件中读取，因此会在网页上更新。

网页：

<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（自问题解答后更新）：

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();
}

我的servlet中有一个无限循环来连续写一个新图像，因此图像将在网页上更新。然而，它似乎不是一个好方法（图像每3或4秒刷新一次，有时根本没有出现）。我认为最好的方法是在我的updateFrame()函数中循环使用我的GET请求，并让servlet为每个请求写一个图像。

但是，我不知道如何在我的Javascript中发出这个请求，而不是在servlet完成它的写入过程后被重定向到servlet响应。

如何在不重定向到新页面的情况下向servlet发出间歇性请求（即只是在我的页面上刷新图像）？

Answer 1

为了避免闪烁，加载时丢失图像，您可以预加载新图像并在加载完成时显示如何做到这一点可以在其他answers中找到。

Answer 2

正如所建议的，解决方案是使用AJAX调用。我按如下方式实现了这个：

// 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();
}

我从invokeServlet方法调用了此setInterval方法。我已经更新了问题中的JavaScript以包含此内容。

在不指向新页面的情况下调用Java Servlet逻辑

2 个答案: