web-dev-qa-db-ja.com

JavaScriptからJavaサーブレットを呼び出す

MVCデザインパターンを使用してWebアプリケーションを作成しようとしています。 GUIパーツでは、JavaScriptを使用します。コントローラーの場合Javaサーブレット。

JavaScriptを実際に使用したことがないので、JavaScriptからJavaサーブレットを呼び出す方法と、サーブレットから応答を取得する方法を見つけるのに苦労しています。

誰か助けてくれますか？

javajavascriptajaxweb-applicationsservlets
34
woolagaroo

あなたは Ajax サーブレットの呼び出しを起動したいですか？そのためには、JavaScriptの XMLHttpRequest オブジェクトが必要です。 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>

ただし、これは非常に冗長であり、実際にはクロスブラウザ互換ではありません。ブラウザー間で互換性のある方法でAjaxicalリクエストを発行し、HTML DOMツリーを走査するには、 jQuery を取得することをお勧めします。上記はjQueryで書き直したものです。

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

どちらの場合でも、サーバー上のサーブレットはurl-patternの/myservletにマップし（好みに応じて変更できます）、少なくとも doGet() を実装してデータを書き込む必要があります次のように応答します。

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

これにより、JavaScriptアラートにHello World!が表示されます。

もちろん doPost() を使用することもできますが、xhr.open()で'POST'を使用するか、jQueryで $.post() の代わりに $.get() を使用する必要があります。

次に、HTMLページにデータを表示するには、 HTML DOM を操作する必要があります。たとえば、あなたは

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

応答データを表示するHTMLで、最初の例のalert(data)の代わりに表示できます。

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

JQueryの例では、これをより簡潔で素敵な方法で行うことができます。

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

さらにステップを進めるには、より複雑なデータを転送するための簡単にアクセスできるデータ形式が必要です。一般的な形式はXMLとJSONです。最後の方がより簡潔で、JavaとJavaScriptの両方で非常に簡単な方法で使用できます。Javaでは、 Google Gson を使用して、完全なJavaオブジェクトをJSONに、またはその逆に変換します。

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

JavaScriptでは、jQueryの $.getJSON() を使用して「即座に」取得できます。 <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);
    });
});

以下も参照してください：

67
BalusC

ここのコードは、AJAX=を使用して、テキストをHTML5文書に動的に印刷します（Ajaxコードは、本のインターネットとWWW（Deitel）に似ています））：

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

サーブレット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)");
    }
}

HTML文書

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

編集

Webプログラミングを初めて使用したときに、上記の回答を書きました。そのままにしておきますが、javascriptの部分は間違いなくjQueryにする必要があり、生のjavascriptよりも10倍簡単です。

4
Johan Lund

JavaScript呼び出しには jquery を使用し、コントローラーに委任するサービス層には jersey のようなJSR311の実装を使用することをお勧めします。

これは、HTTP呼び出しとデータのシリアル化を処理するための基礎となるすべてのロジックで役立ちます。これは大きな助けになります。

1
migsho

申し訳ありませんが、javascriptではなくjspを読みました。次のようなことをする必要があります（これは相対URLであり、このjavascriptが含まれているドキュメントのURLによって異なる場合があります）。

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

Web.xmlのservlet-mappingは次のようになります。

<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