如何使用Servlets和Ajax?

时间:2010-11-06 10:12:14

标签: java ajax jsp servlets

我是网络应用程序和Servlet的新手,我有以下问题:

每当我在servlet中打印一些东西并通过webbrowser调用它时,它都会返回一个包含该文本的新页面。有没有办法使用Ajax打印当前页面中的文本?

7 个答案:

答案 0 :(得分:539)

答案 1 :(得分:14)

更新当前显示在用户浏览器中的页面(无需重新加载)的正确方法是在浏览器中执行一些代码更新页面的DOM。

该代码通常是嵌入HTML页面或从HTML页面链接的javascript,因此是AJAX建议。 (事实上​​,如果我们假设更新的文本是通过HTTP请求来自服务器的,那么这就是经典的AJAX。)

使用某些浏览器插件或插件也可以实现这种功能,尽管插件可能很难进入浏览器的数据结构来更新DOM。 (本机代码插件通常会写入页面中嵌入的某些图形框架。)

答案 2 :(得分:12)

我将向您展示servlet&的完整示例。怎么做ajax。

在这里,我们将创建一个使用servlet创建登录表单的简单示例。

<强>的index.html

<form>  
   Name:<input type="text" name="username"/><br/><br/>  
   Password:<input type="password" name="userpass"/><br/><br/>  
   <input type="button" value="login"/>  
</form>  

这是ajax示例

       $.ajax
        ({
            type: "POST",           
            data: 'LoginServlet='+name+'&name='+type+'&pass='+password,
            url: url,
        success:function(content)
        {
                $('#center').html(content);           
            }           
        });

LoginServlet Servlet代码: -

    package abc.servlet;

import java.io.File;


public class AuthenticationServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException
    {   
        doPost(request, response);
    }

    protected void doPost(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {

        try{
        HttpSession session = request.getSession();
        String username = request.getParameter("name");
        String password = request.getParameter("pass");

                /// Your Code
out.println("sucess / failer")
        } catch (Exception ex) {
            // System.err.println("Initial SessionFactory creation failed.");
            ex.printStackTrace();
            System.exit(0);
        } 
    }
}

答案 3 :(得分:7)

$.ajax({
type: "POST",
url: "url to hit on servelet",
data:   JSON.stringify(json),
dataType: "json",
success: function(response){
    // we have the response
    if(response.status == "SUCCESS"){
        $('#info').html("Info  has been added to the list successfully.<br>"+
        "The  Details are as follws : <br> Name : ");

    }else{
        $('#info').html("Sorry, there is some thing wrong with the data provided.");
    }
},
 error: function(e){
   alert('Error: ' + e);
 }
});

答案 4 :(得分:7)

Ajax(也是AJAX)是Asynchronous JavaScript和XML的首字母缩写词)是一组在客户端用于创建异步Web应用程序的相互关联的Web开发技术。使用Ajax,Web应用程序可以异步地向服务器发送数据和从服务器检索数据 以下是示例代码:

Jsp页面java脚本函数使用两个变量firstName和lastName:

向servlet提交数据
function onChangeSubmitCallWebServiceAJAX()
    {
      createXmlHttpRequest();
      var firstName=document.getElementById("firstName").value;
      var lastName=document.getElementById("lastName").value;
      xmlHttp.open("GET","/AJAXServletCallSample/AjaxServlet?firstName="
      +firstName+"&lastName="+lastName,true)
      xmlHttp.onreadystatechange=handleStateChange;
      xmlHttp.send(null);

    }

用于读取数据的Servlet以xml格式发送回jsp(您也可以使用文本。只需要将响应内容更改为文本并在javascript函数上呈现数据。)

/**
 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
 */
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    String firstName = request.getParameter("firstName");
    String lastName = request.getParameter("lastName");

    response.setContentType("text/xml");
    response.setHeader("Cache-Control", "no-cache");
    response.getWriter().write("<details>");
    response.getWriter().write("<firstName>"+firstName+"</firstName>");
    response.getWriter().write("<lastName>"+lastName+"</lastName>");
    response.getWriter().write("</details>");
}

答案 5 :(得分:5)

通常,您无法从servlet更新页面。客户端(浏览器)必须请求更新。 Eiter客户端加载一个全新的页面,或者它请求更新现有页面的一部分。这种技术称为Ajax。

答案 6 :(得分:4)

使用bootstrap multi select

<强>的Ajax

function() { $.ajax({
    type : "get",
    url : "OperatorController",
    data : "input=" + $('#province').val(),
    success : function(msg) {
    var arrayOfObjects = eval(msg); 
    $("#operators").multiselect('dataprovider',
    arrayOfObjects);
    // $('#output').append(obj);
    },
    dataType : 'text'
    });}
}

在Servlet中

request.getParameter("input")