Appel d'une servlet Java à partir de javascript

Question

J'essaie de créer une application Web en utilisant le modèle de conception MVC. Pour la partie GUI, je voudrais utiliser JavaScript. Et pour le contrôleur Java Servlets.

Maintenant, je n'ai jamais vraiment travaillé avec JavaScript, donc j'ai du mal à trouver comment appeler une servlet Java à partir de JavaScript et comment obtenir la réponse de la servlet.

Quelqu'un peut-il m'aider?

Answer 1

Vous voulez donc appeler Ajax au servlet? Pour cela, vous avez besoin de l'objet XMLHttpRequest en JavaScript. Voici un exemple compatible 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 verbeux et pas vraiment compatible avec les navigateurs. Pour la meilleure façon compatible avec les navigateurs de lancer des requêtes ajaxiques et de parcourir l'arbre HTML DOM, 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> 

Quoi qu'il en soit, le Servlet sur le serveur doit être mis en correspondance sur un url-pattern de /myservlet (vous pouvez le modifier à votre goût) et ont au moins doGet() mises en œuvre et écrire le données à la réponse comme suit:

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

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

Vous pouvez bien sûr utiliser aussi doPost(), mais vous devez 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 HTML DOM.Par exemple, vous avez un

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

dans le code HTML où vous souhaitez afficher les données de réponse, vous pouvez le faire au lieu de alert(data) du 1er exemple:

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

Dans le jQuery exemple, vous pouvez faire cela dans un plus concis et agréable façon:

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

pour aller quelques pas plus loin, vous souhaitez avoir un format de données facilement accessible pour transférer des données plus complexes. Les formats communs sont XML et JSON. Le dernier est le plus préféré car il est plus concis et peut être utilisé à la fois en Java et JavaScript de manière très simple. En Java, vous pouvez utiliser Google Gson pour convertir des objets Java complets en JSON et vice versa.

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 jQuery de $.getJSON() 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 aussi:

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

Answer 2

Désolé, j'ai lu jsp pas javascript. Vous devez faire quelque chose comme (notez que ceci est une URL relative et peut être différent en fonction de l'URL du document est ce javascript dans):

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

Si votre servlet-mapping dans web.xml ressemble ceci:

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

Answer 3

Je recommande vraiment utiliser jquery pour les appels javascript et une mise en œuvre de JSR311 comme jersey pour la couche de service, qui déléguer à vos contrôleurs. Cela vous aidera avec toute la logique sous-jacente de la gestion des appels HTTP et de la sérialisation de vos données, ce qui est d'une grande aide.

Answer 4

Le code ci-dessous utilisera AJAX pour imprimer du texte à un document HTML5 dynamique (code Ajax est similaire à réserver 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); 

Servlet code java:

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> 

EDIT

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

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>