从 javascript 调用 java servlet [英] calling a java servlet from javascript

问题描述

我正在尝试使用 MVC 设计模式创建 Web 应用程序.对于 GUI 部分，我想使用 JavaScript.对于控制器 Java Servlets.

现在我从来没有真正使用过 JavaScript，所以我很难弄清楚如何从 JavaScript 调用 Java Servlet 以及如何从 Servlet 获得响应.

有人可以帮我吗?

解决方案

所以你想解雇 Ajax 调用servlet?为此，您需要 XMLHttpRequest JavaScript 中的对象.这是一个与 Firefox 兼容的示例:

然而，这非常冗长，并且不是真正的跨浏览器兼容.对于触发 ajaxical 请求和遍历 HTML DOM 树的最佳跨浏览器兼容方式，我建议使用 jQuery.这是在 jQuery 中对上述内容的重写:

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

无论哪种方式，服务器上的 Servlet 都应该映射到 /myservlet 的 url-pattern(您可以根据自己的喜好更改)并且至少具有 doGet() 实现并将数据写入响应如下:

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

这应该在 JavaScript 警报中显示 Hello World!.

你当然也可以使用 doPost()，但是你应该在中使用'POST'xhr.open() 或在 jQuery 中使用 $.post() 而不是 $.get().

然后，要在 HTML 页面中显示数据，您需要操作 HTML DOM.例如，您有一个

在您想要显示响应数据的 HTML 中，您可以这样做，而不是第一个示例中的 alert(data):

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

在 jQuery 示例中，您可以以更简洁、更漂亮的方式执行此操作:

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

为了更进一步，您需要一种易于访问的数据格式来传输更复杂的数据.常见的格式是 XML 和 JSON.有关它们的更详细示例，请前往如何使用 Servlet 和 Ajax?

I am trying to create a web application using the MVC design pattern. For the GUI part I would like to use JavaScript. And for the controller Java Servlets.

Now I have never really worked with JavaScript, so I'm having a hard time figuring out how to call a Java Servlet from JavaScript and how to get the response from the Servlet.

Can anybody help me out?

解决方案

So you want to fire Ajax calls to the servlet? For that you need the XMLHttpRequest object in JavaScript. Here's a Firefox compatible example:

<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>

This is however very verbose and not really crossbrowser compatible. For the best crossbrowser compatible way of firing ajaxical requests and traversing the HTML DOM tree, I recommend to grab jQuery. Here's a rewrite of the above in jQuery:

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

Either way, the Servlet on the server should be mapped on an url-pattern of /myservlet (you can change this to your taste) and have at least doGet() implemented and write the data to the response as follows:

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

This should show Hello World! in the JavaScript alert.

You can of course also use doPost(), but then you should use 'POST' in xhr.open() or use $.post() instead of $.get() in jQuery.

Then, to show the data in the HTML page, you need to manipulate the HTML DOM. For example, you have a

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

in the HTML where you'd like to display the response data, then you can do so instead of alert(data) of the 1st example:

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

In the jQuery example you could do this in a more concise and nice way:

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

To go some steps further, you'd like to have an easy accessible data format to transfer more complex data. Common formats are XML and JSON. For more elaborate examples on them, head to How to use Servlets and Ajax?

这篇关于从 javascript 调用 java servlet的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！