In this demo I would like to show how to call a servlet in SAP UI5 using JQuery Ajax. Here Servlet returns a single value.

Pre-Requisites for this demo :  

  1. a) Eclipse  with  SAP UI5 Installed
  2. b) Tomcat server 7.0
  3. c) javax.servlet.jar


Step 1 :    Creating Application Project with with java script view.

File -> New->Other-> SAP UI5 Application Development -> Application Project


Capture_1.JPG

Enter project name :  SAPUI5_JQUERY_AJAX_DEMO ,

select library as “sap.ui.commons”

Click Next -> Enter view name as “callServletUsingJqueryAjax”  -> select “Java Script” ->Click Finish


Capture_2.JPG


Step 2:   A new  dynamic web project is created


Capture_3.JPG


Step 3:   Enter the below code in “index.html” .

<!DOCTYPE HTML>

<html>

       <head>

              <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>

              <meta http-equiv=‘Content-Type’ content=‘text/html;charset=UTF-8’/>

           

              <script src=“resources/sap-ui-core.js”

                           id=“sap-ui-bootstrap”

                           data-sap-ui-libs=“sap.ui.commons”

                           data-sap-ui-theme=“sap_bluecrystal”>

              </script>

              <!– add sap.ui.table,sap.ui.ux3 and/or other libraries to ‘data-sap-uilibs‘ if required –>

              <script>

                           sap.ui.localResources(“sapui5_jquery_ajax_demo”);

                           var view = sap.ui.view({id:“idcallServletUsingJqueryAjax1”, viewName:“sapui5_jquery_ajax_demo.callServletUsingJqueryAjax”, type:sap.ui.core.mvc.ViewType.JS});

                           view.placeAt(“jqueryajaxGetUserServletResponse”);

              </script>

       </head>

       <body class=“sapUiBody” role=“application”>

        <form>

Enter Your Name: <input type=“text” id=“userName” />

    </form>

    <br>

    <br>

    <strong>SAP UI5 Demo – Calling Servlet using Jquery Ajax Response</strong>:

    <div id=“jqueryajaxGetUserServletResponse”></div>

           

       </body>

</html>




Step 4:    Enter the below JQuery Ajax code in  “callServletUsingJqueryAjax.view.js”

  1. sap.ui.jsview(“sapui5_jquery_ajax_demo.callServletUsingJqueryAjax”, {

       /** Specifies the Controller belonging to this View.

       * In the case that it is not implemented, or that “null” is returned, this View does not have a Controller.

       * @memberOf sapui5_jquery_ajax_demo.callServletUsingJqueryAjax

       */

       getControllerName : function() {

              return “sapui5_jquery_ajax_demo.callServletUsingJqueryAjax”;

       },

       /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

       * Since the Controller is given to this method, its event handlers can be attached right away.

       * @memberOf sapui5_jquery_ajax_demo.callServletUsingJqueryAjax

       */

       createContent : function(oController) {

           

              $(document).ready(function() {

                  $(‘#userName’).blur(function(event) {

                          var name = $(‘#userName’).val();

                          $.get(‘GetUserServlet’, {

                                  userName : name

                          }, function(responseText) {

                                  $(‘#jqueryajaxGetUserServletResponse’).text(responseText);

                          });

                  });

              });

       }

});



Step 5:    Import the jar file “javax.servlet.jar”  into WebContent->WEB-INF->lib

Simplest way to do this is to drag and drop “javax.servlet.jar”  file into lib directory.Select  “Copy Files” an press “OK”.


Capture_4.JPG


Step 6 :  In Src folder .create a class file “GetUserServlet.java” in package “com.journaldev.servlets;”. Enter the  following code:

package com.journaldev.servlets;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@WebServlet(“/GetUserServlet”)

public class GetUserServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

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

String userName = request.getParameter(“userName”).trim();

if(userName == null || “”.equals(userName)){

userName = “Guest”;

}

String greetings = “Hello “ + userName;

response.setContentType(“text/plain”);

response.getWriter().write(greetings);

}

}

Capture_5.JPG



Step 7 : Now deploy the project on to  Tomcat server. Right click on “index.html” -> “Run On Server”->Choose “Tomcat Server 7.0” ->Click Finish

Capture_6.JPG


Capture_7.JPG


Enter some text in “Text Box”  and place the cursor on text below.The below page will be displayed:




Capture_8.JPG

To report this post you need to login first.

8 Comments

You must be Logged on to comment or reply to a post.

    1. varun boyina Post author

      Hi Tom Cole ,

      Sorry for the late reply.

      Yes the above application can be deployed on Sap Hana Cloud Environment.

      Below is the image wherein I have deployed the application on Sap Hana Cloud Environment and response is as expected.

      Response_1.JPG

      Response.JPG

      (0) 
    1. varun boyina Post author

      Hi Simon Cabello ,

      Please create the package in “src” folder . Right click on “src” ->New->Java->Package->”enter name “com.journaldev.servlets” , then enter the code in step 6.


      Hope this helps.

      (0) 
      1. Simon Cabello

        Hi varun i follow all the steps but eclipse shows me many errors can you help me with this?

        Captura.JPG

        Captura1.JPG

        errors says: -The import javax.servlet.annotation cannot be resolved

                          -WebServlet cannot be resolved to a type

        thank you

        regards,

        Simón

        (0) 
        1. varun boyina Post author

          Hi Simon Cabello ,

          Looks like you have downloaded the older version of “javax.servlet.jar”. Please download the  servlet-3_0-final-jar_and_schema or above from online ,remove the old jar and recompile with the new one.

          Regards,

          Varun

          (0) 

Leave a Reply