Aufruf eines Java-Servlet aus Javascript

Question

Ich versuche, eine Web-Anwendung mit dem MVC-Design-Muster zu erstellen. Für den GUI-Teil würde ich gerne JavaScript verwenden. Und für die Controller-Java-Servlets.

Jetzt habe ich noch nie wirklich mit JavaScript gearbeitet, daher fällt es mir schwer herauszufinden, wie man ein Java Servlet von JavaScript aufruft und wie man die Antwort vom Servlet bekommt.

Kann mir jemand helfen?

Answer 1

Sie möchten also Ajax Aufrufe an das Servlet auslösen? Dazu benötigen Sie das Objekt XMLHttpRequest in JavaScript. Hier ist ein Firefox-kompatibles Beispiel:

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

Dies ist jedoch sehr ausführlich und nicht wirklich Crossbrowser kompatibel. Für die beste Crossbrowser-kompatible Methode zum Auslösen von ajaxischen Anfragen und zum Durchqueren des HTML-DOM-Baums empfehle ich, nach jQuery zu greifen. Hier ist eine Neufassung der oben in jQuery:

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

So oder so, die Servlet auf dem Server sollte auf eine url-pattern von /myservlet abgebildet wird (Sie können dies nach Ihrem Geschmack ändern) und haben mindestens doGet() umgesetzt und schreibt die Daten auf die Antwort wie folgt:

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

Diese Hello World! in der JavaScript-alert zeigen.

Sie können natürlich auch doPost() verwenden, aber dann sollten Sie 'POST' in xhr.open() verwenden oder $.post() anstelle von $.get() in jQuery. Um die Daten auf der HTML-Seite anzuzeigen, müssen Sie HTML DOM bearbeiten.Zum Beispiel haben Sie eine

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

im HTML, wo Sie möchten, dass die Antwortdaten angezeigt werden, dann kann man so statt alert(data) des 1. Beispiel tun:

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

Im jQuery Beispiel könnten Sie dies tun, in einer prägnanten und netten Art:

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

einige Schritte um weiter zu gehen, möchten Sie ein einfach zugängliches Datenformat haben komplexere Daten zu übertragen. Gängige Formate sind XML und JSON. Das letzte ist am meisten bevorzugt, da es prägnanter ist und auf sehr einfache Weise sowohl in Java als auch in JavaScript verwendet werden kann. In Java können Sie Google Gson verwenden, um vollwertige Java-Objekte in JSON und umgekehrt zu konvertieren.

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

In JavaScript können Sie jQuery verwenden $.getJSON() es zu bekommen "sofort". Lassen Sie es in einem <table> anzeigen.

$.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); 
    }); 
}); 

Siehe auch:

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

Answer 2

Sorry, ich lese jsp nicht javascript. Sie müssen, wie etwas tun (beachten Sie, dass dies eine relative URL ist und auf die URL des Dokuments in Abhängigkeit voneinander verschieden sein können dieses Javascript in ist):

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

Wo Ihr Servlet-Mapping in web.xml sieht so etwas wie dies:

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

Answer 3

ich wirklich empfehlen Ihnen jquery für die JavaScript-Anrufe und einige Implementierung von JSR311 wie jersey für die Service-Schicht, die auf Ihre Controller delegieren würde.

Dies wird Ihnen mit der zugrunde liegenden Logik der Handhabung der HTTP-Aufrufe und Ihrer Datenserialisierung helfen, was eine große Hilfe ist.

Answer 4

Der Code hier wird AJAX verwenden, um Text zu einem HTML5-Dokument drucken dynamisch (Ajax Code ähnlich ist Internet & WWW (Deitel) buchen):

Javascript-Code:

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

HTML-Dokument

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

EDIT

Ich schrieb Antwort oben, als ich neu mit Web-Programmierung war. Ich lasse es stehen, aber der Javascript-Teil sollte definitiv in jQuery sein, stattdessen ist es 10-mal einfacher als rohe 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>