【问题标题】:Multi part javascript function多部分javascript函数
【发布时间】:2013-06-09 22:53:15
【问题描述】:

我要解决的问题是有一个 javascript 函数,它将按顺序执行一些功能。

第 1 步)Web 客户端/javascript 在浏览器本地执行一些功能。

第 2 步)浏览器调用 web 服务器上的 java 类/应用程序,它将执行一些只有 web 服务器本身(而不是客户端)才能执行的任务。

第 3 步)将第 2 步的结果添加到网页并显示在浏览器中,而无需重新加载所有 HTML

注意第 2 步可能需要几分钟时间,在此期间客户端基本上处于非活动状态是可以的。

如果有任何相关的建议或演练/教程,我将不胜感激。

亲切的问候

【问题讨论】:

标签: java javascript ajax


【解决方案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);
});

}

您需要在 HTML 文件的顶部包含 jQuery 库:

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

您可以找到更多信息here

就这么简单。

【讨论】:

    【解决方案2】:

    我希望这个简明的解释能给你一个概览和你所期望的理解。

    第一部分

    服务器端

    在您服务器上的 Web 服务器应用程序中,如果使用 Java,您将创建一个 Java servlet 类来处理从客户端浏览器通过脚本或表单提交的数据,并提供动态内容,例如数据库查询的结果来自客户。

    阅读更多关于 Servlet 的信息:

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

    还可以阅读有关如何在服务器上注册 servlet 的更多信息(java 项目的 web.xml)

    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
    }
    

    }

    用于计算服务器路径的 Java 类

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

    -

    第二部分

    客户端 - 您的浏览器

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

    您必须访问 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 中包含一个函数来调用 servlet 并按如下方式获取总和:

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

    【讨论】:

    • 谢谢,这很有帮助 :) 我对 Java/Web 开发非常陌生,虽然在 Windows 窗体应用程序方面有一些经验。你能描述一下你将如何实现你给出的例子吗?具体来说,你给了三块代码: Code Chunk 1 - 我不知道这是去哪里, Code chunk 2 似乎是一个需要单独编译的独立 java 类 - 如果是这样,位置应该是什么?代码块 3 似乎只是 javascript 并包含在 http 文档中?你可否确认?再次感谢。
    • Code Chunk 1 是一个 Servlet,是驻留在 web 服务器上的 java web 应用程序的一部分,其目的是响应通过浏览器应用程序上的 Ajax 从 javascript 发送的请求(根据您问题的第 2 步)。 Servlet 被创建为 java 类并驻留在您的 java web 应用程序项目的 "Source Package" 中。每当您创建 servlet 时,都必须设置 “URL 模式”。每当您来自客户端的 POST 或 GET 请求使用此“url 模式”时,侦听 servlet 就会执行。请参阅下面引用的链接。
    • 我使用 NetBeans。为了实现我的示例,创建一个新项目并选择“Java Web”类别,然后选择“Web Application”。在Netbeans Ajax QuickstartCode Chunk 2 上阅读有关如何使用 servlet 创建 Java Web 应用程序的更多信息,该代码块代表您的 Web 应用程序的业务逻辑。它通常应该驻留在您的 Web 应用程序的“源包”中。它在 servlet 中实例化并调用 getSum() 方法。如果该类与 servlet 类不在同一个包中,则必须导入该类。
    • Code Chunk 3 如您所说,是您的客户端项目的一部分;包含您的 javascript 和 ajax 的 html 文件。请注意,在我的 Ajax 示例中,“url”参数使用 servlet 指定的“URL 模式”。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-06-21
    • 1970-01-01
    • 2020-09-22
    • 1970-01-01
    • 1970-01-01
    • 2015-07-07
    • 2012-04-04
    相关资源
    最近更新 更多