Wie zu verwenden Servlets und Ajax?

Ich bin sehr neu in web-Anwendungen und Servlets und ich habe folgende Frage:

Immer wenn ich etwas drucken innerhalb des servlet und rufen Sie mit dem webbrowser, es gibt eine neue Seite mit diesem text. Gibt es eine Möglichkeit, den text zu drucken, die in der aktuellen Seite, die mit Ajax?

InformationsquelleAutor Amir Rachum | 2010-11-06

539

In der Tat, das Schlüsselwort ist "ajax": Asynchronous JavaScript and XML. Aber die letzten Jahre ist es mehr als oft Asynchronous JavaScript and JSON. Im Grunde, Sie lassen JS ausführen eines asynchronen HTTP-Anforderung, und aktualisieren Sie die HTML-DOM-Baum basierend auf der response-Daten.

Da ist es ziemlich ein mühsam Arbeit zu machen es funktioniert in allen Browsern (vor allem Internet Explorer im Vergleich zu anderen), es gibt viele JavaScript-Bibliotheken aus, die vereinfacht dieses in einzelnen Funktionen und deckt möglichst viele browser-spezifische bugs/Macken unter der Haube, wie jQuery, Prototyp, Mootools. Seit jQuery ist sehr beliebt in diesen Tagen, ich ' ll verwenden Sie es in der folgenden Beispiele.

Kickoff Beispiel bei der Rückkehr `String` als plain text

Erstellen Sie eine /some.jsp wie unten (Hinweis: der code nicht erwarten, dass die JSP-Datei platziert wird, in einem Unterordner, wenn Sie dies tun, ändern-servlet-URL entsprechend anpassen):

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 4112686</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).on("click", "#somebutton", function() { //When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
                $.get("someservlet", function(responseText) {   //Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response text...
                    $("#somediv").text(responseText);           //Locate HTML DOM element with ID "somediv" and set its text content with the response text.
                });
            });
        </script>
    </head>
    <body>
        <button id="somebutton">press here</button>
        <div id="somediv"></div>
    </body>
</html>

Erstellen Sie ein servlet mit einem doGet() Methode, die wie folgt Aussehen:

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String text = "some text";

    response.setContentType("text/plain");  //Set content type of the response so that jQuery knows what it can expect.
    response.setCharacterEncoding("UTF-8"); //You want world domination, huh?
    response.getWriter().write(text);       //Write response body.
}

Karte dieses servlet auf ein URL-Muster der /someservlet oder /someservlet/* wie unten (natürlich der URL-Muster ist frei, um Ihre Wahl, aber Sie brauchen, zu ändern, die someservlet URL in JS-code-Beispiele, die über alle Ort entsprechend):

@WebServlet("/someservlet/*")
public class SomeServlet extends HttpServlet {
    //...
}

Oder, wenn Sie nicht auf einem Servlet-3.0-kompatibel-container, die noch (Tomcat 7, Glassfish 3, JBoss AS 6, etc. oder neueren), ordnen Sie es in web.xml auf die altmodische Weise (siehe auch unsere Servlets wiki-Seite):

<servlet>
    <servlet-name>someservlet</servlet-name>
    <servlet-class>com.example.SomeServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>someservlet</servlet-name>
    <url-pattern>/someservlet/*</url-pattern>
</servlet-mapping>

Öffnen Sie nun die http://localhost:8080/context/test.jsp in den browser und drücken Sie die Taste. Sie werden sehen, dass der Inhalt des div-aktualisiert mit der servlet-Antwort.

Rückkehr `List<String>` als JSON

Mit JSON statt der Klartext-als-Antwort-format können Sie sogar einige Schritte weiter. Es sorgt für mehr Dynamik. Erste, Sie möchten ein tool für die Konvertierung zwischen Java-Objekten und JSON-strings. Es gibt viele von Ihnen (siehe unten auf dieser Seite für eine übersicht). Mein persönlicher Favorit ist Google Gson. Herunterladen und Ihre JAR-Datei in /WEB-INF/lib Ordner für Ihre Webanwendung.

Hier ist ein Beispiel, das zeigt List<String> als <ul><li>. Das servlet:

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    List<String> list = new ArrayList<>();
    list.add("item1");
    list.add("item2");
    list.add("item3");
    String json = new Gson().toJson(list);

    response.setContentType("application/json");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(json);
}

Den JS code:

$(document).on("click", "#somebutton", function() {  //When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
    $.get("someservlet", function(responseJson) {    //Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response JSON...
        var $ul = $("<ul>").appendTo($("#somediv")); //Create HTML <ul> element and append it to HTML DOM element with ID "somediv".
        $.each(responseJson, function(index, item) { //Iterate over the JSON array.
            $("<li>").text(item).appendTo($ul);      //Create HTML <li> element, set its text content with currently iterated item and append it to the <ul>.
        });
    });
});

Tun, beachten Sie, dass jQuery automatisch parst die Antwort als JSON und gibt Sie direkt ein JSON-Objekt (responseJson) als Funktion argument, wenn Sie die response-content-type application/json. Wenn Sie vergessen zu setzen, oder sich auf einen Standard von text/plain oder text/html, dann die responseJson argument würde nicht geben Sie ein JSON-Objekt, sondern ein plain-vanilla-string und Sie müssten manuell rumfummeln mit JSON.parse() danach, das ist also völlig unnötig, wenn Sie die content-type-Recht in den ersten Platz.

Rückkehr `Map<String, String>` als JSON

Hier ist ein weiteres Beispiel, das zeigt Map<String, String> als <option>:

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    Map<String, String> options = new LinkedHashMap<>();
    options.put("value1", "label1");
    options.put("value2", "label2");
    options.put("value3", "label3");
    String json = new Gson().toJson(options);

    response.setContentType("application/json");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(json);
}

Und die JSP:

$(document).on("click", "#somebutton", function() {               //When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
    $.get("someservlet", function(responseJson) {                 //Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response JSON...
        var $select = $("#someselect");                           //Locate HTML DOM element with ID "someselect".
        $select.find("option").remove();                          //Find all child elements with tag name "option" and remove them (just to prevent duplicate options when button is pressed again).
        $.each(responseJson, function(key, value) {               //Iterate over the JSON object.
            $("<option>").val(key).text(value).appendTo($select); //Create HTML <option> element, set its value with currently iterated key and its text content with currently iterated item and finally append it to the <select>.
        });
    });
});

mit

<select id="someselect"></select>

Rückkehr `List<Entity>` als JSON

Hier ist ein Beispiel, das zeigt List<Product> im <table> wo die Product Klasse hat die Eigenschaften Long id, String name und BigDecimal price. Das servlet:

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    List<Product> products = someProductService.list();
    String json = new Gson().toJson(products);

    response.setContentType("application/json");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(json);
}

Den JS code:

$(document).on("click", "#somebutton", function() {        //When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
    $.get("someservlet", function(responseJson) {          //Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response JSON...
        var $table = $("<table>").appendTo($("#somediv")); //Create HTML <table> element and append it to HTML DOM element with ID "somediv".
        $.each(responseJson, function(index, product) {    //Iterate over the JSON array.
            $("<tr>").appendTo($table)                     //Create HTML <tr> element, set its text content with currently iterated item and append it to the <table>.
                .append($("<td>").text(product.id))        //Create HTML <td> element, set its text content with id of currently iterated product and append it to the <tr>.
                .append($("<td>").text(product.name))      //Create HTML <td> element, set its text content with name of currently iterated product and append it to the <tr>.
                .append($("<td>").text(product.price));    //Create HTML <td> element, set its text content with price of currently iterated product and append it to the <tr>.
        });
    });
});

Rückkehr `List<Entity>` als XML

Hier ist ein Beispiel, das funktioniert genauso effektiv wie die Vorherige, aber dann mit XML statt JSON. Bei der Verwendung von JSP als XML-output-generator, sehen Sie, dass es weniger langweilig zu code, der die Tabelle und alle. JSTL ist auf diese Weise sehr viel nützlicher als Sie tatsächlich verwenden können, um die Ergebnisse Durchlaufen und führen Sie server-Seite Daten-Formatierung. Das servlet:

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    List<Product> products = someProductService.list();

    request.setAttribute("products", products);
    request.getRequestDispatcher("/WEB-INF/xml/products.jsp").forward(request, response);
}

Den JSP-code (Hinweis: wenn Sie die <table> im <jsp:include> es kann wiederverwendbar sein, anderswo in einem nicht-ajax-response):

<?xml version="1.0" encoding="UTF-8"?>
<%@page contentType="application/xml" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<data>
    <table>
        <c:forEach items="${products}" var="product">
            <tr>
                <td>${product.id}</td>
                <td><c:out value="${product.name}" /></td>
                <td><fmt:formatNumber value="${product.price}" type="currency" currencyCode="USD" /></td>
            </tr>
        </c:forEach>
    </table>
</data>

Den JS code:

$(document).on("click", "#somebutton", function() {             //When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
    $.get("someservlet", function(responseXml) {                //Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response XML...
        $("#somediv").html($(responseXml).find("data").html()); //Parse XML, find <data> element and append its HTML to HTML DOM element with ID "somediv".
    });
});

Werden Sie jetzt wahrscheinlich erkennen, warum XML so viel stärker als JSON für den besonderen Zweck der Aktualisierung ein HTML-Dokument mit Ajax. JSON ist komisch, aber nachdem alle in der Regel nur sinnvoll, für so genannte "öffentliche web-services". MVC-frameworks wie JSF Verwendung von XML unter der Abdeckungen für Ihre ajax-Magie.

Ajaxifying ein vorhandenes Formular

Können Sie jQuery verwenden $.serialize() leicht ajaxify bestehenden POST-Formulare ohne hantieren mit der Sammlung und Weitergabe der individuellen form-input-Parameter. Ausgehend von einer bereits bestehenden form, die perfekt funktioniert gut ohne JavaScript/jQuery (und damit degradiert anmutig, wenn Anwender hat JavaScript deaktiviert):

<form id="someform" action="someservlet" method="post">
    <input type="text" name="foo" />
    <input type="text" name="bar" />
    <input type="text" name="baz" />
    <input type="submit" name="submit" value="Submit" />
</form>

Können Sie schrittweise Verbesserung mit ajax wie folgt:

$(document).on("submit", "#someform", function(event) {
    var $form = $(this);

    $.post($form.attr("action"), $form.serialize(), function(response) {
        //...
    });

    event.preventDefault(); //Important! Prevents submitting the form.
});

Können Sie im servlet unterscheiden zwischen normalen Anforderungen und ajax-Anfragen wie folgt:

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String foo = request.getParameter("foo");
    String bar = request.getParameter("bar");
    String baz = request.getParameter("baz");

    boolean ajax = "XMLHttpRequest".equals(request.getHeader("X-Requested-With"));

    //...

    if (ajax) {
        //Handle ajax (JSON or XML) response.
    } else {
        //Handle regular (JSP) response.
    }
}

Den jQuery Form plugin tut mehr oder weniger das gleiche wie oben jQuery Beispiel, aber es hat zusätzliche transparente Unterstützung für multipart/form-data Formen, wie Sie durch Datei-uploads.

Manuelles senden des request-Parameter, um servlet

Wenn Sie nicht über ein Formular, sondern wollte nur die Interaktion mit dem servlet "in den hintergrund", wobei Sie VERÖFFENTLICHEN möchten einige Daten, dann können Sie mit jQuery $.param() Sie leicht umwandeln ein JSON-Objekt an einen URL-kodierten query-string.

var params = {
    foo: "fooValue",
    bar: "barValue",
    baz: "bazValue"
};

$.post("someservlet", $.param(params), function(response) {
    //...
});

Den gleichen doPost() Methode, wie hier gezeigt, über wiederverwendet werden können. Bitte beachten Sie, dass diese syntax funktioniert auch mit $.get() in jQuery und doGet() im servlet.

Manuelles senden JSON-Objekt an servlet

Wenn Sie jedoch beabsichtigen, zu senden, die das JSON-Objekt als ganzes und nicht als einzelne request-Parameter aus irgendeinem Grund, dann würden Sie brauchen, um es zu serialisieren, um einen string mit Hilfe JSON.stringify() (nicht Teil von jQuery) und weisen jQuery zu setzen request content-type application/json anstelle von (Standard -) application/x-www-form-urlencoded. Dies kann nicht getan werden, über $.post() Komfort-Funktion, die aber getan werden muss, um über $.ajax() als unten.

var data = {
    foo: "fooValue",
    bar: "barValue",
    baz: "bazValue"
};

$.ajax({
    type: "POST",
    url: "someservlet",
    contentType: "application/json", //NOT dataType!
    data: JSON.stringify(data),
    success: function(response) {
        //...
    }
});

Tun, beachten Sie, dass eine Menge der Vorspeisen-mix contentType mit dataType. Die contentType stellt die Art der Anfrage Körper. Die dataType stellt die (erwartete) Art der Antwort Körper, die in der Regel nicht notwendig, da jQuery bereits autodetects es aufgrund der Reaktion der Content-Type header.

Dann, um die JSON-Objekt in das servlet, die nicht gesendet werden als einzelne request-Parameter, sondern als eine ganze JSON-string in der oben beschriebenen Weise, müssen Sie nur manuell Parsen der Anfrage Körper mithilfe einer JSON-tool statt mit getParameter() den üblichen Weg. Nämlich, servlets nicht unterstützt application/json formatierte Anfragen, aber nur application/x-www-form-urlencoded oder multipart/form-data formatierte Anfragen. Gson unterstützt auch das Parsen einer JSON-string in ein JSON-Objekt.

JsonObject data = new Gson().fromJson(request.getReader(), JsonObject.class);
String foo = data.get("foo").getAsString();
String bar = data.get("bar").getAsString();
String baz = data.get("baz").getAsString();
//...

Tun, beachten Sie, dass dies alles ist mehr plump als nur mit $.param(). Normalerweise, die Sie verwenden möchten JSON.stringify() nur, wenn der Ziel-service ist z.B. eine JAX-RS (RESTful) Dienstleistung, die aus irgendeinem Grund nur in der Lage, konsumieren von JSON-strings und nicht regelmäßig request-Parameter.

Sendet einen redirect von servlet

Wichtig zu erkennen und zu verstehen ist, dass jede sendRedirect() und forward() Anruf von der servlet auf eine ajax-Anfrage nur weiterleiten oder umleiten der ajax-request selbst und nicht das Haupt-Dokument/Fenster, wo der ajax-request stammt. JavaScript/jQuery würde in einem solchen Fall nur abrufen, die umgeleitet/weitergeleitet-Antwort als responseText variable in der callback-Funktion. Wenn es gibt eine ganze HTML-Seite und nicht um eine ajax-spezifische XML-oder JSON-Antwort, dann alles, was Sie tun können, ist zum ersetzen des aktuellen Dokuments mit.

document.open();
document.write(responseText);
document.close();

Beachten Sie, dass Sie diese nicht ändern, dass die URL als enduser sieht im browser die Adresse bar. So gibt es Probleme mit bookmarkability. Also, es ist viel besser, einfach nur wieder eine "bauanleitung" für JavaScript/jQuery, um eine Umleitung durchzuführen, anstatt den gesamten Inhalt der umgeleiteten Seite. E. g. durch Rückgabe eines boolean oder eine URL.

String redirectURL = "http://example.com";

Map<String, String> data = new HashMap<>();
data.put("redirect", redirectURL);
String json = new Gson().toJson(data);

response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);

function(responseJson) {
    if (responseJson.redirect) {
        window.location = responseJson.redirect;
        return;
    }

    //...
}

Siehe auch:

müssen zum Parsen der json auf das Letzte Beispiel.
NÖ. Wenn Sie die post Lesen von oben nach unten, erfahren Sie, warum.
Diese Antwort ist meine Lebensader für den letzten Monat oder so lol. Lernen eine Menge von ihm. Ich LIEBE das XML-Beispiel. Vielen Dank für die Umsetzung dieses zusammen! Eine noob Frage und zwar, wenn Sie Zeit haben. Gibt es einen Grund für die Umsetzung der xml-Ordner unter WEB-INF ?
So können Benutzer nicht downloaden.
Ihre XML-Beispiel ist Klasse, danke. Aber ich bin immer "Unable to get property 'ersetzen' von undefined oder null-Verweis" für $("#somediv").html($(responseXml).find("data").html()) dieser Linie. Es sagt auch "Falsche Anzahl an Argumenten oder ungültige eigenschaftszuweisung". Ich kann auch sehen, dass meine XML ist mit Daten gefüllt, wenn ich Debuggen. Irgendwelche Ideen ?

InformationsquelleAutor BalusC

14

Den richtigen Weg zur Aktualisierung der Seite aktuell angezeigt wird im browser des Benutzers (ohne UMLADUNG) haben einige code-Ausführung im browser aktualisieren die Seite DOM.

Dieser code wird in der Regel javascript-Code eingebettet oder über einen Link in der HTML-Seite, damit der AJAX-Vorschlag. (In der Tat, wenn wir davon ausgehen, dass der aktualisierte text stammt aus dem server über eine HTTP-Anforderung, dies ist ein klassisches AJAX.)

Ist es auch möglich zu implementieren, die diese Art der Sache mit einigen browser-plugin oder add-on, aber es kann schwierig sein, für ein plugin zu erreichen in der browser-Daten, Strukturen, die Aktualisierung der DOM. (Native-code-plugins Schreibe normalerweise auf einige Grafik-Rahmen, der in die Seite eingebettet.)

InformationsquelleAutor Stephen C

Zeige ich Euch eine ganze Beispiel-servlet - & wie ajax-call.

Hier, wir sind gehen zu erstellen, die einfaches Beispiel erstellen Sie das login-Formular mittels servlet.

index.html

<form>  
   Name:<input type="text" name="username"/><br/><br/>  
   Password:<input type="password" name="userpass"/><br/><br/>  
   <input type="button" value="login"/>  
</form>

Hier ist ajax Sample

       $.ajax
        ({
            type: "POST",           
            data: 'LoginServlet='+name+'&name='+type+'&pass='+password,
            url: url,
        success:function(content)
        {
                $('#center').html(content);           
            }           
        });

LoginServlet Servlet-Code :-

    package abc.servlet;

import java.io.File;


public class AuthenticationServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException
    {   
        doPost(request, response);
    }

    protected void doPost(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {

        try{
        HttpSession session = request.getSession();
        String username = request.getParameter("name");
        String password = request.getParameter("pass");

                ///Your Code
out.println("sucess /failer")
        } catch (Exception ex) {
            //System.err.println("Initial SessionFactory creation failed.");
            ex.printStackTrace();
            System.exit(0);
        } 
    }
}

InformationsquelleAutor Mitul Maheshwari

$.ajax({
type: "POST",
url: "url to hit on servelet",
data:   JSON.stringify(json),
dataType: "json",
success: function(response){
    //we have the response
    if(response.status == "SUCCESS"){
        $('#info').html("Info  has been added to the list successfully.<br>"+
        "The  Details are as follws : <br> Name : ");

    }else{
        $('#info').html("Sorry, there is some thing wrong with the data provided.");
    }
},
 error: function(e){
   alert('Error: ' + e);
 }
});

InformationsquelleAutor SUBZ

Ajax (auch AJAX), ein Akronym für Asynchronous JavaScript and XML) ist eine Gruppe von miteinander verbundenen web-development-Techniken auf der client-Seite zu erstellen, asynchrone web-Anwendungen. Mit Ajax web-Anwendungen können Daten senden und abrufen von Daten von einem server asynchron
Unten ist der Beispiel-code:

Jsp-Seite java-script-Funktion zum senden von Daten an servlet mit zwei Variablen firstName und lastName:

function onChangeSubmitCallWebServiceAJAX()
    {
      createXmlHttpRequest();
      var firstName=document.getElementById("firstName").value;
      var lastName=document.getElementById("lastName").value;
      xmlHttp.open("GET","/AJAXServletCallSample/AjaxServlet?firstName="
      +firstName+"&lastName="+lastName,true)
      xmlHttp.onreadystatechange=handleStateChange;
      xmlHttp.send(null);

    }

Servlet zum Lesen von Daten senden Sie zurück zu jsp in xml-format ( Sie können text als gut. Nur Sie müssen sich ändern-response-Inhalte in text-und render-Daten, die auf javascript-Funktion.)

/**
 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
 */
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    String firstName = request.getParameter("firstName");
    String lastName = request.getParameter("lastName");

    response.setContentType("text/xml");
    response.setHeader("Cache-Control", "no-cache");
    response.getWriter().write("<details>");
    response.getWriter().write("<firstName>"+firstName+"</firstName>");
    response.getWriter().write("<lastName>"+lastName+"</lastName>");
    response.getWriter().write("</details>");
}

InformationsquelleAutor user3468976

5

Normalerweise Sie nicht aktualisieren Sie eine Seite von einem servlet. Client (browser) hat auf Anfrage ein update. Entweder client lädt eine ganz neue Seite oder ist es eine Aktualisierung anfordert, um einen Teil einer bestehenden Seite. Diese Technik nennt sich Ajax.

InformationsquelleAutor Peter Knego

Verwendung von bootstrap-multi-wählen Sie

Ajax

function() { $.ajax({
    type : "get",
    url : "OperatorController",
    data : "input=" + $('#province').val(),
    success : function(msg) {
    var arrayOfObjects = eval(msg); 
    $("#operators").multiselect('dataprovider',
    arrayOfObjects);
    //$('#output').append(obj);
    },
    dataType : 'text'
    });}
}

In Servlet

request.getParameter("input")

InformationsquelleAutor Thakhani Tharage

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Kickoff Beispiel bei der Rückkehr String als plain text

Rückkehr List<String> als JSON

Rückkehr Map<String, String> als JSON

Rückkehr List<Entity> als JSON

Rückkehr List<Entity> als XML

Ajaxifying ein vorhandenes Formular

Manuelles senden des request-Parameter, um servlet

Manuelles senden JSON-Objekt an servlet

Sendet einen redirect von servlet

Siehe auch:

Kickoff Beispiel bei der Rückkehr `String` als plain text

Rückkehr `List<String>` als JSON

Rückkehr `Map<String, String>` als JSON

Rückkehr `List<Entity>` als JSON

Rückkehr `List<Entity>` als XML