wake-up-neo.com

ein Java-Servlet von Javascript aus aufrufen

Ich versuche, eine Webanwendung mit dem MVC-Entwurfsmuster zu erstellen. Für den GUI-Teil möchte ich JavaScript verwenden. Und für den 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 aus aufruft und wie man die Antwort vom Servlet erhält. 

Kann mir jemand helfen?

34
woolagaroo

Sie wollen also Ajax Anrufe an das Servlet feuern? Dazu benötigen Sie in JavaScript das Objekt XMLHttpRequest . 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 Möglichkeit, ajaxical-Anforderungen abzufeuern und den HTML-DOM-Baum zu durchlaufen, empfehle ich, jQuery zu packen. Hier ist eine Umschreibung der oben genannten in jQuery:

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

In jedem Fall sollte das Servlet auf dem Server einem url-pattern von /myservlet zugeordnet sein (Sie können dies nach Ihrem Geschmack ändern) und mindestens doGet() implementiert haben und die Daten wie folgt in die Antwort schreiben:

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

In der JavaScript-Warnung sollte Hello World! angezeigt werden.

Sie können natürlich auch doPost() verwenden, dann sollten Sie jedoch 'POST' in xhr.open() verwenden oder $.post() anstelle von $.get() in jQuery verwenden.

Um die Daten in der HTML-Seite anzuzeigen, müssen Sie das HTML-DOM bearbeiten. Zum Beispiel haben Sie eine 

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

in dem HTML, in dem Sie die Antwortdaten anzeigen möchten, können Sie dies anstelle von alert(data) des ersten Beispiels tun:

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

Im jQuery-Beispiel können Sie dies auf eine prägnantere und schönere Weise tun:

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

Um einige Schritte weiter zu gehen, möchten Sie ein leicht zugängliches Datenformat, um komplexere Daten zu übertragen. Übliche Formate sind XML und JSON. Letzteres wird am meisten bevorzugt, da es übersichtlicher ist und auf sehr einfache Weise in Java und 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 $.getJSON() verwenden, um es "sofort" zu erhalten. Lassen Sie uns 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:

67
BalusC

Der Code hier verwendet AJAX, um Text dynamisch in ein HTML5-Dokument zu drucken .__ (Ajax-Code ähnelt Buch Internet & WWW (Deitel)):

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>

BEARBEITEN

Ich habe die Antwort oben geschrieben, als ich neu mit der Web-Programmierung war. Ich lass es stehen, aber der Javascript-Teil sollte auf jeden Fall in jQuery sein, es ist 10-mal einfacher als rohes Javascript.

4
Johan Lund

Ich empfehle Ihnen wirklich, jquery für die Javascript-Aufrufe und einige Implementierungen von JSR311 wie jersey für die Service-Schicht zu verwenden, die Ihre Controller delegieren würden. 

Dies hilft Ihnen bei der zugrundeliegenden Logik beim Umgang mit HTTP-Aufrufen und bei der Datenserialisierung, was eine große Hilfe ist.

1
migsho

Entschuldigung, ich habe jsp Javascript nicht gelesen. Sie müssen etwas tun (beachten Sie, dass dies eine relative URL ist und abhängig von der URL des Dokuments, in dem sich dieses Javascript befindet, unterschiedlich ist):

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

Wo Ihr Servlet-Mapping in web.xml ungefähr so ​​aussieht:

<servlet-mapping>
    <servlet-name>someServlet</servlet-name>
    <url-pattern>/path/to/servlet*</url-pattern>
</servlet-mapping>
0
krock
   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