SAP UI5 - Calling Servlet(which Returns Single Val...

Technology Blogs by Members

Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!

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 :

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

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

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

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

Step 2: A new dynamic web project is created

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'/>

id="sap-ui-bootstrap"

data-sap-ui-libs="sap.ui.commons"

data-sap-ui-theme="sap_bluecrystal">

</script>

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

<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”

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”.

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

}

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