Функция нескольких частей javascript

Question

Проблема, которую я пытаюсь решить, состоит в том, что функция javascript выполняет некоторые функции в последовательности.

Шаг 1) Веб-клиент/javascript выполняет некоторые функции локально в браузере.

Шаг 2) Браузер вызывает Java-класс/приложение на веб-сервере, который выполнит ряд задач, которые могут выполнять только сам веб-сервер (а не клиент).

Шаг 3) Есть результаты шага два добавленных на веб-страницу и отображается в браузере без перезагрузки всей HTML

нотабене Шаг 2 может занять несколько минут, и это нормально для клиента, чтобы быть практически неактивным в течение этого времени.

Буду признателен за любые советы или прохождение/учебники, которые могут иметь значение.

С наилучшими пожеланиями

Answer 1

Использование JQuery для выполнения асинхронного запроса HTTP (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); 
}); 

} 

Вам необходимо включить библиотеку JQuery на верхней части HTML-файла, как:

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

Вы можете найти более подробную информацию here

Просто как это.

Answer 2

Надеюсь, это краткое объяснение даст вам обзор и понимание, которое вы ожидаете.

ЧАСТЬ А

SERVER SIDE

В приложении веб-сервера на сервере, при использовании Java, вы должны создать класс Java сервлетов для обработки данных, который был представлен от клиента браузер через скрипт или форму и предоставлять динамический контент, такой как результаты запроса базы данных от клиента.

Подробнее о сервлетов из:

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

Также читайте о том, как зарегистрировать свой сервлет на сервере (веб.XML для проектов Java)

Пример сервлета:

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

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

}

Ява класс для вычислений на вашем пути сервера

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

-

ЧАСТЬ B

КЛИЕНТ SIDE - Ваш браузер

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

Вы должны посетить сайт jQuery, загрузить и добавить сценарий jQuery ajax в свой проект. Для этого достаточно «jquery-ui.min.js». Добавьте этот скрипт в HTML или файл JSP с помощью следующей строки:

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

В вашем внешнем файл JavaScript или инлайн Javascript включают в себя функцию для вызова сервлета и получить сумму следующим образом:

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

    }); 
}