Comment utiliser les Servlets et Ajax?

Je suis très nouveau pour les applications web et les Servlets et ma question est la suivante:

Chaque fois que j'imprime quelque chose à l'intérieur de la servlet et de l'appeler par le webbrowser, il retourne une nouvelle page contenant que du texte. Est-il possible d'imprimer le texte de la page en cours à l'aide d'Ajax?

InformationsquelleAutor Amir Rachum | 2010-11-06

548

En effet, le mot clé est "ajax": Asynchronous JavaScript and XML. Cependant, les dernières années, c'est plus que souvent Asynchronous JavaScript et JSON. Fondamentalement, vous laissez JS exécuter une requête HTTP asynchrone et mise à jour le DOM HTML arbre basé sur les données de réponse.

Car il est à peu un fastidieux de travail à faire pour travailler dans tous les navigateurs (en particulier Internet Explorer par rapport à d'autres), il y a beaucoup de bibliothèques JavaScript qui simplifie le travail dans les fonctions individuelles et couvre autant que possible un navigateur spécifique bugs/défauts sous le capot, comme jQuery, Prototype, Mootools. Depuis jQuery est plus populaire ces jours-ci, je vais l'utiliser dans les exemples ci-dessous.

Kickoff exemple de retour `String` en tant que texte brut

Créer un /some.jsp comme ci-dessous (remarque: le code ne prévoit pas que le fichier JSP être placé dans un sous-dossier, si vous le faites, alter URL du servlet en conséquence):

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

Créer un servlet avec un doGet() méthode qui ressemble à ceci:

@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.
}

Carte cette servlet sur un modèle d'URL de /someservlet ou /someservlet/* comme ci-dessous (à l'évidence, le modèle d'URL est libre de votre choix, mais vous auriez besoin de modifier les someservlet URL dans le code JS exemples sur toutes lieu en conséquence):

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

Ou lorsque vous n'êtes pas sur un Servlet 3.0 compatible contenant encore (Tomcat 7, Glassfish 3, JBoss as, 6, etc ou plus récent), puis la carte dans web.xml à l'ancienne (voir aussi nos Servlets page wiki):

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

Maintenant, ouvrez le http://localhost:8080/context/test.jsp dans le navigateur et appuyez sur le bouton. Vous verrez que le contenu de la div mis à jour avec la réponse de servlet.

Retour `List<String>` JSON

Avec JSON au lieu de clair que la forme de la réponse, vous pouvez même obtenir quelques étapes supplémentaires. Cela donne plus de dynamique. Tout d'abord, vous souhaitez disposer d'un outil pour convertir entre des objets Java et les chaînes JSON. Il ya beaucoup d'entre eux (voir le bas de cette page pour un aperçu). Mon préféré est Google Gson. Télécharger et mettre son fichier JAR dans /WEB-INF/lib dossier de votre webapplication.

Voici un exemple qui affiche List<String> comme <ul><li>. La 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);
}

Le code JS:

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

Ne remarque que jQuery analyse automatiquement la réponse en JSON et vous donne directement un objet JSON (responseJson) comme argument de fonction lorsque vous définissez le contenu de la réponse à application/json. Si vous oubliez de le définir ou de s'appuyer sur un défaut de text/plain ou text/html, puis le responseJson argument ne serait pas vous donner un objet JSON, mais un simple vanille chaîne et que vous devez manuellement bricoler avec JSON.parse() après, ce qui est donc totalement inutile si vous avez défini le type de contenu à droite à la première place.

Retour `Map<String, String>` JSON

Voici un autre exemple qui affiche Map<String, String> comme <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);
}

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

avec

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

Retour `List<Entity>` JSON

Voici un exemple qui affiche List<Product> dans un <table> où la Product classe a les propriétés Long id, String name et BigDecimal price. La 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);
}

Le code JS:

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

Retour `List<Entity>` XML

Voici un exemple qui n'est effectivement la même chose que l'exemple précédent, mais avec XML au lieu de JSON. Lors de l'utilisation de JSP que XML de sortie du générateur, vous verrez que c'est moins fastidieux code de la table et tous. JSTL est de cette façon beaucoup plus utiles que vous pouvez réellement utiliser pour effectuer une itération sur les résultats et d'effectuer de côté de serveur de mise en forme des données. La 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);
}

Le code JSP (remarque: si vous placez le <table> dans un <jsp:include>, il peut être réutilisable ailleurs dans une non-réponse ajax):

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

Le code JS:

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

Vous aurez alors probablement comprendre pourquoi XML est tellement plus puissant que JSON pour l'usage particulier de la mise à jour d'un document HTML à l'aide d'Ajax. JSON est drôle, mais après tout, en général, seulement utile pour soi-disant "services web publics". MVC, frameworks comme JSF utilisation de XML sous les couvertures pour leurs ajax magie.

Ajaxifying un formulaire existant

Vous pouvez utiliser jQuery $.serialize() facilement ajaxify après les formes sans bidouiller avec la collecte et le dépassement de la forme individuelle des paramètres d'entrée. Dans l'hypothèse d'un formulaire existant qui fonctionne parfaitement bien sans JavaScript/jQuery (et donc dégrade gracieusement lorsque l'utilisateur a désactivé JavaScript):

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

Vous pouvez renforcer progressivement avec l'ajax comme ci-dessous:

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

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

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

Vous le pouvez dans le servlet de distinction entre les demandes normales et les requêtes ajax comme ci-dessous:

@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.
    }
}

La jQuery Forme de plugin fait moins ou plus de la même chose que ci-dessus jQuery exemple, mais il a plus de support transparente pour multipart/form-data les formes requises par les uploads de fichier.

Envoyant manuellement les paramètres de la demande de servlet

Si vous n'avez pas de forme du tout, mais je voulais juste interagir avec la servlet "arrière-plan" dans lequel vous souhaitez POSTER quelques données, vous pouvez utiliser jQuery $.param() de convertir facilement un objet JSON à une URL-encodé de la chaîne de requête.

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

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

La même doPost() méthode comme indiqué ci-dessus peut être réutilisé. Notez que la syntaxe ci-dessus fonctionne également avec $.get() en jQuery et doGet() dans le servlet.

Manuellement l'envoi d'objet JSON à servlet

Si vous prévoyez d'envoyer l'objet JSON comme un tout plutôt que comme personne les paramètres de la demande pour une raison quelconque, alors vous auriez besoin de sérialiser une chaîne à l'aide JSON.stringify() (ne faisant pas partie de jQuery) et de charger jQuery pour définir demande type de contenu à application/json au lieu de (par défaut) application/x-www-form-urlencoded. Cela ne peut être fait via $.post() fonction de commodité, mais qui doit être fait via $.ajax() comme ci-dessous.

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

Ne remarque que beaucoup de débutants mélange contentType avec dataType. Le contentType représente le type de l' demande corps. Le dataType représente l' (prévu) type de réponse corps, qui est généralement inutile comme jQuery déjà détecte automatiquement sur la base de la réponse du Content-Type en-tête.

Ensuite, pour le traitement de l'objet JSON dans la servlet, qui n'est pas envoyé comme personne les paramètres de la demande, mais comme un ensemble de la chaîne JSON de la façon décrite ci-dessus, vous ne devez manuellement analyser le corps de la requête à l'aide d'un JSON outil au lieu d'utiliser getParameter() la manière habituelle. À savoir, les servlets ne prennent pas en charge application/json formaté demandes, mais seulement application/x-www-form-urlencoded ou multipart/form-data des requêtes au format. Gson prend également en charge l'analyse d'une chaîne JSON dans un objet JSON.

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();
//...

Ne remarque que tout cela est plus maladroit que de simplement en utilisant $.param(). Normalement, vous souhaitez utiliser JSON.stringify() seulement si le service est par exemple un JAX-RS (RESTful) service de qui est, pour quelques raisons, seule capable de consommer de chaînes JSON et non l'ensemble des paramètres de la requête.

L'envoi d'une redirection à partir de servlet

Important de réaliser et de comprendre, c'est que tout sendRedirect() et forward() appel de la servlet sur une requête ajax serait seulement de l'avant ou de les rediriger la requête ajax lui-même et non pas le document principal/de la fenêtre où la requête ajax à l'origine. JavaScript/jQuery serait dans ce cas de récupérer uniquement la redirigés/a transmis la réponse que responseText variable dans la fonction de callback. Si elle représente un ensemble de page HTML et non pas un spécifique ajax XML ou JSON réponse, alors tout ce que vous pourriez faire est de remplacer le document en cours avec elle.

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

Noter que cela ne modifie pas l'URL que l'utilisateur final voit dans la barre d'adresse du navigateur. Donc, il y a des problèmes avec bookmarkability. Par conséquent, il est beaucoup mieux de simplement retourner une "instruction" de JavaScript/jQuery pour effectuer une redirection au lieu de renvoyer l'ensemble du contenu de la redirection de la page. E. g. en retournant un booléen, ou d'une 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;
    }

    //...
}

Voir aussi:

besoin de parser le json sur le dernier exemple.
nope. Si vous lisez le post du haut vers le bas, vous allez apprendre pourquoi.
Cette réponse a été ma bouée de sauvetage pour le dernier mois ou lol. L'apprentissage d'un tas d'elle. J'ADORE l'exemple de XML. Merci de mettre cela ensemble! Une question de noob mais si vous avez le temps. Est-il une raison pour mettre le xml dossier WEB-INF ?
Les utilisateurs ne peuvent pas télécharger.
votre exemple de XML est génial, merci. Mais je suis "Impossible d'obtenir la propriété 'remplacer' undefined ou référence null" pour $("#somediv").html($(responseXml).find("data").html()) cette ligne. Il dit aussi "Mauvais nombre d'arguments ou affectation de propriété non valide". Je vois aussi que mon XML est rempli avec des données quand je le déboguer. Des idées ?
peut-être que vous n'avez pas de <div id="somediv">?
Il a travaillé quand j'ouvre la page sur le Bord. Toutes les idées sur la façon de le faire fonctionner pour IE11 ainsi?

InformationsquelleAutor BalusC

14

La bonne façon de mettre à jour la page affichée dans le navigateur de l'utilisateur (sans rechargement) est d'avoir un code s'exécutant dans le navigateur de mise à jour de la page du DOM.

Que le code est généralement le javascript qui est incorporé ou lié à partir de la page HTML, d'où l'AJAX suggestion. (En fait, si nous supposons que la mise à jour du texte provient du serveur via une requête HTTP, c'est classique AJAX.)

Il est également possible de mettre en œuvre ce genre de chose à l'aide de certains navigateur plug-in ou add-on, mais il peut être difficile pour un plugin pour atteindre dans le navigateur de structures de données pour mettre à jour le DOM. (En code natif plugins écrire normalement pour certains graphiques du cadre, qui est intégré dans la page.)

InformationsquelleAutor Stephen C

Je vais vous montrer un ensemble de l'exemple de servlet & comment faire appel ajax.

Ici, nous allons créer l'exemple simple de créer le formulaire de connexion à l'aide de 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>

Voici ajax Échantillon

       $.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 (également AJAX) un acronyme pour Asynchronous JavaScript and XML) est un groupe cohérent de développement web, les techniques utilisées sur le côté client pour créer asynchrone applications web. Avec l'Ajax, les applications web peuvent envoyer des données et de récupération des données à partir d'un serveur de façon asynchrone
Ci-dessous est un exemple de code:

Page Jsp java script la fonction de soumettre des données à la servlet avec deux variable firstName et 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 pour lire les données à envoyer à jsp au format xml ( Vous pouvez utiliser du texte ainsi. Vous devez simplement modifier le contenu de la réponse de texte et de rendre les données sur la fonction javascript.)

/**
 * @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

Normalement, vous ne pouvez pas mettre à jour une page à partir d'une servlet. Le Client (navigateur) doit demander une mise à jour. Eiter des charges des clients une toute nouvelle page ou il demande une mise à jour d'une partie d'une page existante. Cette technique est appelée Ajax.

InformationsquelleAutor Peter Knego

En utilisant bootstrap multi sélectionnez

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

Dans Le Servlet

request.getParameter("input")

InformationsquelleAutor Thakhani Tharage

Vous devez vous connecter pour publier un commentaire.

Kickoff exemple de retour String en tant que texte brut

Retour List<String> JSON

Retour Map<String, String> JSON

Retour List<Entity> JSON

Retour List<Entity> XML

Ajaxifying un formulaire existant

Envoyant manuellement les paramètres de la demande de servlet

Manuellement l'envoi d'objet JSON à servlet

L'envoi d'une redirection à partir de servlet

Voir aussi:

Kickoff exemple de retour `String` en tant que texte brut

Retour `List<String>` JSON

Retour `Map<String, String>` JSON

Retour `List<Entity>` JSON

Retour `List<Entity>` XML