How to use Servlets and Ajax

Question

I m very new to web apps and Servlets and I have the following question   Whenever I print something inside the servlet and call it by the webbrowser  it returns a new page containing that text  Is there a way to print the text in the current page using Ajax

User · Answer

Using 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               In Servlet  request getParameter  input

User · Answer

I will show you a whole example of servlet  amp  how do ajax call   Here  we are going to create the simple example to create the login form using servlet   index html   lt form gt       Name  lt input type  text  name  username   gt  lt br  gt  lt br  gt       Password  lt input type  password  name  userpass   gt  lt br  gt  lt br  gt        lt input type  button  value  login   gt     lt  form gt      Here is ajax Sample           ajax                        type   POST                          data   LoginServlet   name   amp name   type   amp pass   password              url  url          success function content                                center   html content                                                     LoginServlet Servlet Code  -      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

User · Answer

Indeed  the keyword is  quot ajax quot   Asynchronous JavaScript and XML  However  last years it s more than often Asynchronous JavaScript and JSON  Basically  you let JS execute an asynchronous HTTP request and update the HTML DOM tree based on the response data  Since it s pretty a tedious work to make it to work across all browsers  especially Internet Explorer versus others   there are plenty of JavaScript libraries out which simplifies this in single functions and covers as many as possible browser-specific bugs quirks under the hoods  such as jQuery  Prototype  Mootools  Since jQuery is most popular these days  I ll use it in the below examples  Kickoff example returning String as plain text Create a  some jsp like below  note  the code snippets in this answer doesn t expect the JSP file being placed in a subfolder  if you do so  alter servlet URL accordingly from  quot someservlet quot  to  quot   pageContext request contextPath  someservlet quot   it s merely omitted from the code snippets for brevity    lt  DOCTYPE html gt   lt html lang  quot en quot  gt       lt head gt           lt title gt SO question 4112686 lt  title gt           lt script src  quot http   code jquery com jquery-latest min js quot  gt  lt  script gt           lt script gt                document  on  quot click quot    quot  somebutton quot   function        When HTML DOM  quot click quot  event is invoked on element with ID  quot somebutton quot   execute the following function                      get  quot someservlet quot   function responseText         Execute Ajax GET request on URL of  quot someservlet quot  and execute the following function with Ajax response text                           quot  somediv quot   text responseText                Locate HTML DOM element with ID  quot somediv quot  and set its text content with the response text                                               lt  script gt       lt  head gt       lt body gt           lt button id  quot somebutton quot  gt press here lt  button gt           lt div id  quot somediv quot  gt  lt  div gt       lt  body gt   lt  html gt   Create a servlet with a doGet   method which look like this   Override protected void doGet HttpServletRequest request  HttpServletResponse response  throws ServletException  IOException       String text    quot some text quot        response setContentType  quot text plain quot        Set content type of the response so that jQuery knows what it can expect      response setCharacterEncoding  quot UTF-8 quot       You want world domination  huh      response getWriter   write text            Write response body     Map this servlet on an URL pattern of  someservlet or  someservlet   as below  obviously  the URL pattern is free to your choice  but you d need to alter the someservlet URL in JS code examples over all place accordingly   package com example    WebServlet  quot  someservlet   quot   public class SomeServlet extends HttpServlet                 Or  when you re not on a Servlet 3 0 compatible container yet  Tomcat 7  Glassfish 3  JBoss AS 6  etc or newer   then map it in web xml the old fashioned way  see also our Servlets wiki page    lt servlet gt       lt servlet-name gt someservlet lt  servlet-name gt       lt servlet-class gt com example SomeServlet lt  servlet-class gt   lt  servlet gt   lt servlet-mapping gt       lt servlet-name gt someservlet lt  servlet-name gt       lt url-pattern gt  someservlet   lt  url-pattern gt   lt  servlet-mapping gt   Now open the http   localhost 8080 context test jsp in the browser and press the button  You ll see that the content of the div get updated with the servlet response  Returning List lt String gt  as JSON With JSON instead of plaintext as response format you can even get some steps further  It allows for more dynamics  First  you d like to have a tool to convert between Java objects and JSON strings  There are plenty of them as well  see the bottom of this page for an overview   My personal favourite is Google Gson  Download and put its JAR file in  WEB-INF lib folder of your webapplication  Here s an example which displays List lt String gt  as  lt ul gt  lt li gt   The servlet   Override protected void doGet HttpServletRequest request  HttpServletResponse response  throws ServletException  IOException       List lt String gt  list   new ArrayList lt  gt         list add  quot item1 quot        list add  quot item2 quot        list add  quot item3 quot        String json   new Gson   toJson list        response setContentType  quot application json quot        response setCharacterEncoding  quot UTF-8 quot        response getWriter   write json      The JS code    document  on  quot click quot    quot  somebutton quot   function         When HTML DOM  quot click quot  event is invoked on element with ID  quot somebutton quot   execute the following function          get  quot someservlet quot   function responseJson          Execute Ajax GET request on URL of  quot someservlet quot  and execute the following function with Ajax response JSON            var  ul      quot  lt ul gt  quot   appendTo    quot  somediv quot        Create HTML  lt ul gt  element and append it to HTML DOM element with ID  quot somediv quot             each responseJson  function index  item       Iterate over the JSON array                 quot  lt li gt  quot   text item  appendTo  ul           Create HTML  lt li gt  element  set its text content with currently iterated item and append it to the  lt ul gt                            Do note that jQuery automatically parses the response as JSON and gives you directly a JSON object  responseJson  as function argument when you set the response content type to application json  If you forget to set it or rely on a default of text plain or text html  then the responseJson argument wouldn t give you a JSON object  but a plain vanilla string and you d need to manually fiddle around with JSON parse   afterwards  which is thus totally unnecessary if you set the content type right in first place  Returning Map lt String  String gt  as JSON Here s another example which displays Map lt String  String gt  as  lt option gt    Override protected void doGet HttpServletRequest request  HttpServletResponse response  throws ServletException  IOException       Map lt String  String gt  options   new LinkedHashMap lt  gt         options put  quot value1 quot    quot label1 quot        options put  quot value2 quot    quot label2 quot        options put  quot value3 quot    quot label3 quot        String json   new Gson   toJson options        response setContentType  quot application json quot        response setCharacterEncoding  quot UTF-8 quot        response getWriter   write json      And the JSP    document  on  quot click quot    quot  somebutton quot   function                      When HTML DOM  quot click quot  event is invoked on element with ID  quot somebutton quot   execute the following function          get  quot someservlet quot   function responseJson                       Execute Ajax GET request on URL of  quot someservlet quot  and execute the following function with Ajax response JSON            var  select      quot  someselect quot                                 Locate HTML DOM element with ID  quot someselect quot            select find  quot option quot   remove                                Find all child elements with tag name  quot option quot  and remove them  just to prevent duplicate options when button is pressed again             each responseJson  function key  value                     Iterate over the JSON object                 quot  lt option gt  quot   val key  text value  appendTo  select      Create HTML  lt option gt  element  set its value with currently iterated key and its text content with currently iterated item and finally append it to the  lt select gt                            with  lt select id  quot someselect quot  gt  lt  select gt   Returning List lt Entity gt  as JSON Here s an example which displays List lt Product gt  in a  lt table gt  where the Product class has the properties Long id  String name and BigDecimal price  The servlet   Override protected void doGet HttpServletRequest request  HttpServletResponse response  throws ServletException  IOException       List lt Product gt  products   someProductService list        String json   new Gson   toJson products        response setContentType  quot application json quot        response setCharacterEncoding  quot UTF-8 quot        response getWriter   write json      The JS code    document  on  quot click quot    quot  somebutton quot   function               When HTML DOM  quot click quot  event is invoked on element with ID  quot somebutton quot   execute the following function          get  quot someservlet quot   function responseJson                Execute Ajax GET request on URL of  quot someservlet quot  and execute the following function with Ajax response JSON            var  table      quot  lt table gt  quot   appendTo    quot  somediv quot        Create HTML  lt table gt  element and append it to HTML DOM element with ID  quot somediv quot             each responseJson  function index  product          Iterate over the JSON array                 quot  lt tr gt  quot   appendTo  table                         Create HTML  lt tr gt  element  set its text content with currently iterated item and append it to the  lt table gt                    append    quot  lt td gt  quot   text product id             Create HTML  lt td gt  element  set its text content with id of currently iterated product and append it to the  lt tr gt                    append    quot  lt td gt  quot   text product name           Create HTML  lt td gt  element  set its text content with name of currently iterated product and append it to the  lt tr gt                    append    quot  lt td gt  quot   text product price          Create HTML  lt td gt  element  set its text content with price of currently iterated product and append it to the  lt tr gt                            Returning List lt Entity gt  as XML Here s an example which does effectively the same as previous example  but then with XML instead of JSON  When using JSP as XML output generator you ll see that it s less tedious to code the table and all  JSTL is this way much more helpful as you can actually use it to iterate over the results and perform server side data formatting  The servlet   Override protected void doGet HttpServletRequest request  HttpServletResponse response  throws ServletException  IOException       List lt Product gt  products   someProductService list         request setAttribute  quot products quot   products       request getRequestDispatcher  quot  WEB-INF xml products jsp quot   forward request  response      The JSP code  note  if you put the  lt table gt  in a  lt jsp include gt   it may be reusable elsewhere in a non-ajax response    lt  xml version  quot 1 0 quot  encoding  quot UTF-8 quot   gt   lt   page contentType  quot application xml quot  pageEncoding  quot UTF-8 quot   gt   lt   taglib prefix  quot c quot  uri  quot http   java sun com jsp jstl core quot    gt   lt   taglib prefix  quot fmt quot  uri  quot http   java sun com jsp jstl fmt quot    gt   lt data gt       lt table gt           lt c forEach items  quot   products  quot  var  quot product quot  gt               lt tr gt                   lt td gt   product id  lt  td gt                   lt td gt  lt c out value  quot   product name  quot    gt  lt  td gt                   lt td gt  lt fmt formatNumber value  quot   product price  quot  type  quot currency quot  currencyCode  quot USD quot    gt  lt  td gt               lt  tr gt           lt  c forEach gt       lt  table gt   lt  data gt   The JS code    document  on  quot click quot    quot  somebutton quot   function                    When HTML DOM  quot click quot  event is invoked on element with ID  quot somebutton quot   execute the following function          get  quot someservlet quot   function responseXml                      Execute Ajax GET request on URL of  quot someservlet quot  and execute the following function with Ajax response XML               quot  somediv quot   html   responseXml  find  quot data quot   html        Parse XML  find  lt data gt  element and append its HTML to HTML DOM element with ID  quot somediv quot                You ll by now probably realize why XML is so much more powerful than JSON for the particular purpose of updating a HTML document using Ajax  JSON is funny  but after all generally only useful for so-called  quot public web services quot   MVC frameworks like JSF use XML under the covers for their ajax magic  Ajaxifying an existing form You can use jQuery   serialize   to easily ajaxify existing POST forms without fiddling around with collecting and passing the individual form input parameters  Assuming an existing form which works perfectly fine without JavaScript jQuery  and thus degrades gracefully when enduser has JavaScript disabled    lt form id  quot someform quot  action  quot someservlet quot  method  quot post quot  gt       lt input type  quot text quot  name  quot foo quot    gt       lt input type  quot text quot  name  quot bar quot    gt       lt input type  quot text quot  name  quot baz quot    gt       lt input type  quot submit quot  name  quot submit quot  value  quot Submit quot    gt   lt  form gt   You can progressively enhance it with ajax as below    document  on  quot submit quot    quot  someform quot   function event        var  form     this          post  form attr  quot action quot     form serialize    function response                                event preventDefault       Important  Prevents submitting the form       You can in the servlet distinguish between normal requests and ajax requests as below   Override protected void doPost HttpServletRequest request  HttpServletResponse response  throws ServletException  IOException       String foo   request getParameter  quot foo quot        String bar   request getParameter  quot bar quot        String baz   request getParameter  quot baz quot         boolean ajax    quot XMLHttpRequest quot  equals request getHeader  quot X-Requested-With quot                      if  ajax               Handle ajax  JSON or XML  response        else              Handle regular  JSP  response           The jQuery Form plugin does less or more the same as above jQuery example  but it has additional transparent support for multipart form-data forms as required by file uploads  Manually sending request parameters to servlet If you don t have a form at all  but just wanted to interact with the servlet  quot in the background quot  whereby you d like to POST some data  then you can use jQuery   param   to easily convert a JSON object to an URL-encoded query string  var params         foo   quot fooValue quot       bar   quot barValue quot       baz   quot bazValue quot        post  quot someservlet quot     param params   function response                    The same doPost   method as shown here above can be reused  Do note that above syntax also works with   get   in jQuery and doGet   in servlet  Manually sending JSON object to servlet If you however intend to send the JSON object as a whole instead of as individual request parameters for some reason  then you d need to serialize it to a string using JSON stringify    not part of jQuery  and instruct jQuery to set request content type to application json instead of  default  application x-www-form-urlencoded  This can t be done via   post   convenience function  but needs to be done via   ajax   as below  var data         foo   quot fooValue quot       bar   quot barValue quot       baz   quot bazValue quot        ajax       type   quot POST quot       url   quot someservlet quot       contentType   quot application json quot      NOT dataType      data  JSON stringify data       success  function response                              Do note that a lot of starters mix contentType with dataType  The contentType represents the type of the request body  The dataType represents the  expected  type of the response body  which is usually unnecessary as jQuery already autodetects it based on response s Content-Type header  Then  in order to process the JSON object in the servlet which isn t being sent as individual request parameters but as a whole JSON string the above way  you only need to manually parse the request body using a JSON tool instead of using getParameter   the usual way  Namely  servlets don t support application json formatted requests  but only application x-www-form-urlencoded or multipart form-data formatted requests  Gson also supports parsing a JSON string into a JSON object  JsonObject data   new Gson   fromJson request getReader    JsonObject class   String foo   data get  quot foo quot   getAsString    String bar   data get  quot bar quot   getAsString    String baz   data get  quot baz quot   getAsString            Do note that this all is more clumsy than just using   param    Normally  you want to use JSON stringify   only if the target service is e g  a JAX-RS  RESTful  service which is for some reason only capable of consuming JSON strings and not regular request parameters  Sending a redirect from servlet Important to realize and understand is that any sendRedirect   and forward   call by the servlet on an ajax request would only forward or redirect the ajax request itself and not the main document window where the ajax request originated  JavaScript jQuery would in such case only retrieve the redirected forwarded response as responseText variable in the callback function  If it represents a whole HTML page and not an ajax-specific XML or JSON response  then all you could do is to replace the current document with it  document open    document write responseText   document close     Note that this doesn t change the URL as enduser sees in browser s address bar  So there are issues with bookmarkability  Therefore  it s much better to just return an  quot instruction quot  for JavaScript jQuery to perform a redirect instead of returning the whole content of the redirected page  E g  by returning a boolean  or an URL  String redirectURL    quot http   example com quot    Map lt String  String gt  data   new HashMap lt  gt     data put  quot redirect quot   redirectURL   String json   new Gson   toJson data    response setContentType  quot application json quot    response setCharacterEncoding  quot UTF-8 quot    response getWriter   write json     function responseJson        if  responseJson redirect            window location   responseJson redirect          return                       See also   Call Servlet and invoke Java code from JavaScript along with parameters Access Java   Servlet   JSP   JSTL   EL variables in JavaScript How to switch easily between ajax-based website and basic HTML website  How to upload files to server using JSP Servlet and Ajax

User · Answer

Normally you cant update a page from a servlet  Client  browser  has to request an update  Eiter client loads a whole new page or it requests an update to a part of an existing page  This technique is called Ajax

User · Answer

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  lt br gt             The  Details are as follws    lt br gt  Name             else              info   html  Sorry  there is some thing wrong with the data provided               error  function e      alert  Error      e

User · Answer

Ajax  also AJAX  an acronym for Asynchronous JavaScript and XML  is a group of interrelated web development techniques used on the client-side to create asynchronous web applications  With Ajax  web applications can send data to  and retrieve data from  a server asynchronously  Below is example code   Jsp page java script function to submit data to servlet with two variable firstName and lastName   function onChangeSubmitCallWebServiceAJAX               createXmlHttpRequest          var firstName document getElementById  firstName   value        var lastName document getElementById  lastName   value        xmlHttp open  GET    AJAXServletCallSample AjaxServlet firstName          firstName   amp lastName   lastName true        xmlHttp onreadystatechange handleStateChange        xmlHttp send null            Servlet to read data send back to jsp in xml format   You could use text as well  Just you need to change response content to text and render data on javascript function            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   lt details gt         response getWriter   write   lt firstName gt   firstName   lt  firstName gt         response getWriter   write   lt lastName gt   lastName   lt  lastName gt         response getWriter   write   lt  details gt

User · Answer

The right way to update the page currently displayed in the user s browser  without reloading it  is to have some code executing in the browser update the page s DOM     That code is typically javascript that is embedded in or linked from the HTML page  hence the AJAX suggestion    In fact  if we assume that the updated text comes from the server via an HTTP request  this is classic AJAX    It is also possible to implement this kind of thing using some browser plugin or add-on  though it may be tricky for a plugin to reach into the browser s data structures to update the DOM    Native code plugins normally write to some graphics frame that is embedded in the page

[java] How to use Servlets and Ajax?

Examples related to java

Examples related to ajax

Examples related to jsp

Examples related to servlets