Wywołanie serwletu java z javascript

Question

Próbuję utworzyć aplikację internetową przy użyciu wzorca projektowego MVC. Dla części GUI chciałbym użyć JavaScript. A dla kontrolerów Java Servlets.

Nigdy tak naprawdę nie pracowałem z JavaScriptem, więc ciężko jest mi się dowiedzieć, jak wywołać Java Servlet z JavaScript i jak uzyskać odpowiedź z serwletu.

Czy ktoś może mi pomóc?

Answer 1

Więc chcesz wywołać wywołania Ajax do serwletu? Do tego potrzebny jest obiekt XMLHttpRequest w języku JavaScript. Oto przykład zgodny z Firefoksem:

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

Jest to jednak bardzo szczegółowe i niezbyt kompatybilne z crossbrowserami. Aby uzyskać najlepszy sposób porównywania zapytań ajaxowych i przechodzenia przez drzewo DOM HTML, polecam pobrać jQuery. Oto przepisać powyższe w jQuery:

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

Tak czy inaczej, Servlet na serwerze powinien być odwzorowany na url-pattern z /myservlet (można to zmienić do smaku) i mają co najmniej doGet() wdrożony i napisać dane z odpowiedzią, co następuje:

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

ten powinien pokazać Hello World! we wpisie JavaScript.

Można też oczywiście użyć doPost(), ale wtedy trzeba zastosować 'POST' w xhr.open() lub użyj $.post() zamiast $.get() w jQuery.

Następnie, aby pokazać dane na stronie HTML, musisz manipulować HTML DOM.Na przykład, masz

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

w HTML, gdzie chcesz, aby wyświetlić dane odpowiedzi, to można to zrobić zamiast alert(data) z 1. przykład:

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

W jQuery przykładem może to zrobić w bardziej zwięzły i miły sposób:

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

aby dodatkowo przejść kilka kroków, które chcesz mieć łatwy dostępnym formacie dane do przelewu bardziej złożonych danych. Typowymi formatami są XML i JSON. Ten ostatni jest najbardziej preferowany, ponieważ jest bardziej zwięzły i może być używany w Javie i JavaScriptie w bardzo prosty sposób. W Javie można użyć Google Gson do konwersji pełnych obiektów Java na JSON i odwrotnie.

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

W JavaScript można użyć jQuery $.getJSON() aby ją "natychmiast". Wyświetlmy to w <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); 
    }); 
}); 

Zobacz także:

• Java/JSP/JSF and JavaScript
• JavaScript tutorial
• JSON tutorial
• jQuery tutorials

Answer 2

Przepraszam, ja czytam jsp nie javascript. Musisz zrobić coś takiego (zauważ, że jest to względny adres URL i może być różny w zależności od adresu URL dokumentu, to jest obsługa JavaScript w):

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

Gdzie twój servlet-mapping w web.xml wygląda mniej więcej tak to:

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

Answer 3

naprawdę polecam użyć jquery dla połączeń javaScript i pewnego wdrożenia JSR311 jak jersey dla warstwy usług, które byłyby delegować do swoich kontrolerów.

Pomoże to w obsłudze logiki obsługi wywołań HTTP i serializacji danych, co jest bardzo pomocne.

Answer 4

Kod tutaj użyje AJAX drukowanie tekstu do dokumentu HTML5 dynamicznie (kod Ajax jest podobna do książki Internet & WWW (Deitel)): Kod

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

dokument HTML

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

EDYTUJ

Napisałem odpowiedź powyżej, gdy byłem nowy w programowaniu stron internetowych. Pozwoliłem temu stanąć, ale część javascript zdecydowanie powinna być w jQuery, jest 10 razy łatwiejsza niż surowy javascript.

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>