从 javascript 调用 java servletJavascript 代码：Servlet java code：文档编辑

javascript ajax web-applications java servlets

2022-09-01 04:19:50

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

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

任何人都可以帮我吗？

答案 1

所以你想启动Ajax对servlet的调用吗？为此，您需要 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 都应该映射到一个（你可以根据自己的喜好改变它），并且至少实现 doGet（） 并将数据写入响应，如下所示：url-pattern/myservlet

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

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

当然，您也可以使用doPost（），但是您应该在jQuery中使用或使用而不是在jQuery中使用。'POST'xhr.open()$.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？

答案 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 code：

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

文档

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

编辑

当我刚接触Web编程时，我在上面写了答案。我让它站起来，但javascript部分绝对应该在jQuery中，它比原始javascript容易10倍。