вызов сервлета Java из JavaScript - PullRequest
Новая
       25

вызов сервлета Java из JavaScript

34 голосов
/ 12 июня 2010

Я пытаюсь создать веб-приложение, используя шаблон проектирования MVC. Для части GUI я хотел бы использовать JavaScript. А для контроллера Java Servlets.

Теперь я никогда не работал с JavaScript, поэтому мне сложно понять, как вызвать сервлет Java из JavaScript и как получить ответ от сервлета.

Кто-нибудь может мне помочь?

Ответы [ 5 ]

67 голосов
/ 12 июня 2010

То есть вы хотите запустить Ajax вызовы сервлета?Для этого вам нужен объект XMLHttpRequest в JavaScript.Вот пример, совместимый с Firefox: 

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

Это, однако, очень многословно и не совсем совместимо с браузерами.Для лучшего кросс-браузерного совместимого способа запуска аяксических запросов и обхода дерева HTML DOM я рекомендую захватить jQuery .Вот переписать вышеперечисленное в jQuery: 

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

В любом случае сервлет на сервере должен быть сопоставлен с url-pattern из /myservlet (вы можете изменить это на свой вкус) и иметь по адресуминимум doGet() реализовано и запишите данные в ответ следующим образом: 

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

Это должно показать Hello World! в предупреждении JavaScript.

Вы можетеКонечно, также используйте doPost(), но тогда вы должны использовать 'POST' в xhr.open() или $.post() вместо $.get() в jQuery.

Затем, чтобы отобразить данные на HTML-странице, вам нужно манипулировать HTML DOM .Например, у вас есть 

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

в HTML, где вы хотите отобразить данные ответа, тогда вы можете сделать это вместо alert(data) первого примера: 

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

В примере с jQuery вы можете сделать это более кратким и приятным способом: 

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

Чтобы продвинуться дальше, вам нужен легкий доступный формат данных для передачи более сложных данных.,Распространенными форматами являются XML и JSON.Последний вариант наиболее предпочтителен, поскольку он более лаконичен и может быть легко использован как в Java, так и в JavaScript.В Java вы можете использовать Google Gson для преобразования полноценных объектов Java в JSON и наоборот.

List<Product> products = productDAO.list(); // Product is just a Javabean with properties `id`, `name` and `description`.
String json = new Gson().toJson(products);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);

В JavaScript вы можете использовать jQuery $.getJSON(), чтобы получить его «мгновенно».Давайте отобразим его в <table>. 

$.getJSON('myservlet', function(data) {
    var table = $('<table>').appendTo($('#data'));
    $.each(data, function(i, product) {
        var row = $('<tr>').appendTo(table);
        $('<td>').text(product.id).appendTo(row);
        $('<td>').text(product.name).appendTo(row);
        $('<td>').text(product.description).appendTo(row);
    });
});

См. Также :

4 голосов
/ 04 декабря 2014

Код здесь будет использовать AJAX для динамической печати текста в документ HTML5 (код Ajax аналогичен книге 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);

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, это в 10 раз проще, чем в raw javascript.

1 голос
/ 12 июня 2010

Я действительно рекомендую вам использовать jquery для вызовов javascript и некоторую реализацию JSR311, такую ​​как jersey для сервисного уровня, которая будет делегироваться вашим контроллерам.

Это поможет вам со всей логикой обработки HTTP-вызовов и сериализации данных, что очень помогает.

0 голосов
/ 30 ноября 2017 
   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>
0 голосов
/ 12 июня 2010

Извините, я читаю jsp, а не javascript. Вам нужно сделать что-то вроде (обратите внимание, что это относительный URL и может отличаться в зависимости от URL документа, в котором находится этот javascript): 

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

Где ваше сервлет-отображение в web.xml выглядит примерно так: 

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