從 javascript 調用 java servlet

Question

我正在嘗試使用 MVC 設計模式創建一個 Web 應用程序。 對於 GUI 部分，我想使用 JavaScript。 而對於控制器 Java Servlets。

現在我從來沒有真正使用過 JavaScript，所以我很難弄清楚如何從 JavaScript 調用 Java Servlet 以及如何從 Servlet 獲取響應。

有人可以幫我嗎？

Answer 1

那么您想對 servlet 發出Ajax調用嗎？ 為此，您需要 JavaScript 中的XMLHttpRequest對象。 這是一個與 Firefox 兼容的示例：

<script>
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            var data = xhr.responseText;
            alert(data);
        }
    }
    xhr.open('GET', '${pageContext.request.contextPath}/myservlet', true);
    xhr.send(null);
</script>

然而，這是非常冗長的並且不是真正的跨瀏覽器兼容。 對於觸發ajaxical請求和遍歷HTML DOM樹的最佳跨瀏覽器兼容方式，我建議使用jQuery 。 這是在 jQuery 中對上述內容的重寫：

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $.get('${pageContext.request.contextPath}/myservlet', function(data) {
        alert(data);
    });
</script>

無論哪種方式，服務器上的 Servlet 都應該映射到/myservlet的url-pattern （您可以根據自己的喜好更改），並且至少實現了doGet()並將數據寫入響應，如下所示：

String data = "Hello World!";
response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(data);

這應該顯示Hello World! 在 JavaScript 警報中。

您當然也可以使用doPost() ，但是您應該在xhr.open()使用'POST'或在 jQuery 中使用$.post()而不是$.get() 。

然后，要在 HTML 頁面中顯示數據，您需要操作HTML DOM 。 例如，您有一個

<div id="data"></div>

在您想要顯示響應數據的 HTML 中，您可以這樣做，而不是第一個示例中的alert(data) ：

document.getElementById("data").firstChild.nodeValue = data;

在 jQuery 示例中，您可以以更簡潔和漂亮的方式執行此操作：

$('#data').text(data);

為了更進一步，您需要一種易於訪問的數據格式來傳輸更復雜的數據。 常見的格式是 XML 和 JSON。 有關它們的更詳細示例，請前往如何使用 Servlets 和 Ajax？

Answer 2

這里的代碼將使用 AJAX 將文本動態打印到 HTML5 文檔中（Ajax 代碼類似於 book Internet & WWW (Deitel)）：

Javascript代碼：

var asyncRequest;    
function start(){
    try
    {
        asyncRequest = new XMLHttpRequest();
        asyncRequest.addEventListener("readystatechange", stateChange, false);
        asyncRequest.open('GET', '/Test', true);    //   /Test is url to Servlet!
        asyncRequest.send(null);
    }
    catch(exception)
   {
    alert("Request failed");
   }
}

function stateChange(){
if(asyncRequest.readyState == 4 && asyncRequest.status == 200)
    {
    var text = document.getElementById("text");         //  text is an id of a 
    text.innerHTML = asyncRequest.responseText;         //  div in HTML document
    }
}

window.addEventListener("load", start(), false);

Servlet Java 代碼：

public class Test extends HttpServlet{
@Override
public void doGet(HttpServletRequest req, HttpServletResponse resp)
    throws IOException{
        resp.setContentType("text/plain");
        resp.getWriter().println("Servlet wrote this! (Test.java)");
    }
}

HTML 文檔

 <div id = "text"></div>

編輯

當我剛接觸網絡編程時，我在上面寫了答案。 我讓它站着，但 javascript 部分絕對應該在 jQuery 中，它比原始 javascript 容易 10 倍。

Answer 3

我真的建議您將jquery用於 javascript 調用和 JSR311 的一些實現，例如用於服務層的jersey ，它將委托給您的控制器。

這將幫助您處理處理 HTTP 調用和數據序列化的所有底層邏輯，這是一個很大的幫助。

Answer 4

對不起，我讀的是jsp而不是javascript。 您需要執行類似操作（請注意，這是一個相對 url，並且可能會因該 javascript 所在文檔的 url 不同而有所不同）：

document.location = 'path/to/servlet';

web.xml 中的 servlet 映射如下所示：

<servlet-mapping>
    <servlet-name>someServlet</servlet-name>
    <url-pattern>/path/to/servlet*</url-pattern>
</servlet-mapping>

Answer 5

   function callServlet()


{
 document.getElementById("adminForm").action="./Administrator";
 document.getElementById("adminForm").method = "GET";
 document.getElementById("adminForm").submit();

}

<button type="submit"  onclick="callServlet()" align="center"> Register</button>

Answer 6

var button = document.getElementById("<<button-id>>");
button.addEventListener("click", function() {
  window.location.href= "<<full-servlet-path>>" (eg. http://localhost:8086/xyz/servlet)
});