calling a java servlet from javascript

woolagaroo :

I am trying to create a web application using the MVC design pattern. For the GUI part I would like to use JavaScript. And for the controller Java Servlets.

Now I have never really worked with JavaScript, so I'm having a hard time figuring out how to call a Java Servlet from JavaScript and how to get the response from the Servlet.

Can anybody help me out?

BalusC :

So you want to fire Ajax calls to the servlet? For that you need the XMLHttpRequest object in JavaScript. Here's a Firefox compatible example:

<script>
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            var data = xhr.responseText;
            alert(data);
        }
    }
    xhr.open('GET', '${pageContext.request.contextPath}/myservlet', true);
    xhr.send(null);
</script>

This is however very verbose and not really crossbrowser compatible. For the best crossbrowser compatible way of firing ajaxical requests and traversing the HTML DOM tree, I recommend to grab jQuery. Here's a rewrite of the above in jQuery:

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

Either way, the Servlet on the server should be mapped on an url-pattern of /myservlet (you can change this to your taste) and have at least doGet() implemented and write the data to the response as follows:

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

This should show Hello World! in the JavaScript alert.

You can of course also use doPost(), but then you should use 'POST' in xhr.open() or use $.post() instead of $.get() in jQuery.

Then, to show the data in the HTML page, you need to manipulate the HTML DOM. For example, you have a

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

in the HTML where you'd like to display the response data, then you can do so instead of alert(data) of the 1st example:

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

In the jQuery example you could do this in a more concise and nice way:

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

To go some steps further, you'd like to have an easy accessible data format to transfer more complex data. Common formats are XML and JSON. For more elaborate examples on them, head to How to use Servlets and Ajax?

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Calling Servlet from JavaScript

From Dev

calling a java servlet from javascript ajax post method

From Java

Calling a Servlet from a Java application

From Dev

Calling Firebird Stored procedure from Java Servlet

From Dev

Referencing a Java list from a Servlet in JavaScript

From Dev

HTTP POST from javascript to java servlet

From Dev

Reading array from java servlet in javascript

From Java

Calling Servlet Post from another Servlet

From Dev

Calling a Rest Service from a servlet

From Java

Calling Javascript functions from a Java Applet

From Java

Calling Java method from JavaScript using ScriptEngine

From Dev

Calling a javascript function from java method in Cordova

From Dev

Calling Java code from JavaScript (Spring boot)

From Dev

Run Javascript function before calling Servlet

From Dev

How to go about passing the data from Java Servlet to JavaScript

From Dev

calling servlet from php page using ajax

From Java

Calling a servlet from JSP file on page load

From Dev

Calling a servlet /logout from a template.xhtml

From Dev

calling Servlet from jsp <href> link is not working

From Dev

Httpclient response null when calling Java Servlet

From Dev

During Calling a servlet from another Servlet that contains session

From Dev

Calling javascript validation function before submiting and calling servlet

From Dev

Calling Dart from Javascript

From Dev

Calling Swift from JavaScript

From Dev

Calling JavaScript from Android

From Dev

Calling JavaScript from JSP

From Java

Calling Javascript function of .js file from java GWT code

From Dev

Large data from Javascript to servlet

From Dev

Pass values from javascript to Servlet

Related Related

HotTag

Archive