Multi part javascript function

Question

The problem I am trying to solve is having a javascript function that will perform some functions in sequence.

Step 1) Web client/javascript does some functions locally to the browser.

Step 2) The browser calls a java class/application on the webserver which will perform a number of tasks that only the webserver itself (not the client) can perform.

Step 3) Have the results of step two added to the webpage and displayed in the browser without reloading all the HTML

N.B. Step 2 may take several minutes and it is ok for the client to be essentially inactive during this time.

I'd appreciate any advice or walk throughs/tutorials that may be relevant.

Kind Regards

Answer 1

Use jQuery to perform an asynchronous HTTP request(AJAX)

function YOURFUNCTION(){
//Calls servlet
$.post('ServletName',{parameter:value,parameter2:value2,...},function(results) {
  //displays results returned from servlet in specific div(resultsDiv)
  $('#resultsDiv').html(results);
});

}

You need to include the jQuery library on top of your HTML file as:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

You may find more info here

Simple as that.

Answer 2

i hope this concise explanation will give you an overview and the understanding you expect.

PART A

SERVER SIDE

In your web server application on your server, if using Java, you are to create a Java servlet class to process data that was submitted from client browser via script or form and to provide dynamic content such as the results of a database query from the client.

Read more on Servlets from:

1. http://docs.oracle.com/javaee/5/tutorial/doc/bnafe.html
2. http://en.wikipedia.org/wiki/Java_Servlet
3. What is Java Servlet?

Also read more about how to register your servlet on the server (web.xml for java Projects)

Example of a servlet:

-================-

@WebServlet(name = "MyServlet", urlPatterns = {"/calculator"}, asyncSupported = true)
public class MyServlet extends HttpServlet {

@Override
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    Enumeration e = request.getParameterNames(); // parsing the string from client

    while (e.hasMoreElements()) {
        String name = (String) e.nextElement();// eg. "command" from ajax
        String value = request.getParameter(name); // eg. getSum

        if (value.equals("getSum")) {
            // Instantiate a java class and call the method
            // that performs the addition and returns the value
            Calculator calc = new Calculator();

            String answer = (String) calc.getSum();

            if (answer != null) {
                // Set contentType of response to client or browser
                // so that jQuery knows what to expect.
                response.setContentType("text/plain");
                PrintWriter out = response.getWriter();
                // return answer to ajax calling method in browser
                out.print(answer); 
                out.close();
            }
        }
    } // END While LOOP


}

@Override
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // include method if you call POST in you ajax on client side
}

}

a Java Class for calculations on your server path

public class Calculator {
    public int getSum() {
        return 10+15;
    }
}

-

PART B

CLIENT SIDE – Your Browser

-======================-

You have to visit jQuery website, download and add the jQuery ajax script to your project. “jquery-ui.min.js” is sufficient for this purpose. Add this script to your html or jsp file using the following line:

 <script src="resources/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>

Within your external javascript file or inline javascript include a function to call the servlet and get the sum as follows:

function getSum(){
    $.ajax({
        type: 'GET',       //  type of request to make. method doGet of the Servlet will execute
        dataType: 'text',  // specifying the type of data you're expecting back from the server
        url: 'calculator', // the URL to send the request to. see annotation before class declaration
        data: "command="+"getSum", // Data to be sent to the server (query string)

        // if request fails this method executes
        error: 
        function(e){
            alert('Error. Unable to get response from server');
        },

        // when request is successful, this function executes
        // display the data from server in an alert
        success: 
            function(result){
                if(result) {
                    alert(result);
                }
            }    

   });
}