web-dev-qa-db-fra.com

appeler une servlet Java à partir de javascript

J'essaie de créer une application Web à l'aide du modèle de conception MVC. Pour la partie graphique, j'aimerais utiliser JavaScript. Et pour le contrôleur Servlets Java.

Maintenant que je n'ai jamais vraiment travaillé avec JavaScript, j'ai du mal à comprendre comment appeler un servlet Java à partir de JavaScript et comment obtenir la réponse de ce dernier. 

Quelqu'un peut-il m'aider?

javajavascriptajaxweb-applicationsservlets
34
woolagaroo

Vous voulez donc déclencher Ajax des appels à la servlet? Pour cela, vous avez besoin de l'objet XMLHttpRequest en JavaScript. Voici un exemple compatible avec Firefox:

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

Ceci est cependant très prolixe et pas vraiment compatible avec crossbrowser. Pour le meilleur moyen compatible avec plusieurs navigateurs de déclencher des requêtes ajaxiques et de parcourir l’arborescence DOM HTML, je recommande de saisir jQuery . Voici une réécriture de ce qui précède dans jQuery:

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

Dans les deux cas, le servlet sur le serveur doit être mappé sur un url-pattern de /myservlet (vous pouvez le modifier à votre goût) et avoir au moins doGet() et écrire les données dans la réponse comme suit:

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

Cela devrait afficher Hello World! dans l'alerte JavaScript.

Vous pouvez bien sûr aussi utiliser doPost() , mais vous devrez alors utiliser 'POST' dans xhr.open() ou utiliser $.post() au lieu de $.get() dans jQuery.

Ensuite, pour afficher les données dans la page HTML, vous devez manipuler le HTML DOM . Par exemple, vous avez un 

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

dans le HTML où vous souhaitez afficher les données de réponse, vous pouvez le faire à la place de alert(data) du premier exemple:

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

Dans l'exemple jQuery, vous pouvez le faire d'une manière plus concise et agréable:

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

Pour aller plus loin, vous souhaitez un format de données facilement accessible pour transférer des données plus complexes. Les formats courants sont XML et JSON. Le dernier est le plus préféré, car il est plus concis et peut être utilisé très facilement en Java et en JavaScript. En Java, vous pouvez utiliser Google Gson pour convertir des objets Java complets en JSON et inversement. 

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

En JavaScript, vous pouvez utiliser $.getJSON() de jQuery pour l'obtenir "instantanément". Montrons-le dans un <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);
    });
});

Voir également:

67
BalusC

Le code utilisé ici utilisera AJAX pour imprimer le texte dans un document HTML5 de manière dynamique (Le code Ajax est similaire au livre Internet & WWW (Deitel)):

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

Code Java du servlet:

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

Document HTML

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

MODIFIER

J'ai écrit réponse ci-dessus quand j'étais nouveau avec la programmation Web. Je le laisse tenir, mais la partie javascript doit absolument être dans jQuery à la place, c'est 10 fois plus facile que le javascript brut.

4
Johan Lund

Je vous recommande vraiment d'utiliser jquery pour les appels javascript et une implémentation de JSR311 comme jersey pour la couche service, qui déléguerait à vos contrôleurs. 

Cela vous aidera avec toute la logique sous-jacente de traitement des appels HTTP et de votre sérialisation des données, ce qui est une aide précieuse.

1
migsho

Désolé, j'ai lu jsp pas javascript. Vous devez faire quelque chose comme (notez qu'il s'agit d'une URL relative et qu'elle peut être différente selon l'URL du document dans lequel se trouve le javascript):

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

Où votre servlet-mapping dans web.xml ressemble à ceci:

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