SAP UI5 – Calling Servlet(which Returns Single Value) using JQUERY AJAX
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’/>
<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-ui–libs‘ 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”
- 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
Enter some text in “Text Box” and place the cursor on text below.The below page will be displayed:
Can this SAPUI5 application be deployed to the Fiori Launchpad and properly executed?
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.
good job!
Thank you Lan Xiao
Hi varun,
i dont have the package com.journaldev.servlets because of what can this posible?
thanks for your help.
regards,
Simón.
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.
Hi varun i follow all the steps but eclipse shows me many errors can you help me with this?
errors says: -The import javax.servlet.annotation cannot be resolved
-WebServlet cannot be resolved to a type
thank you
regards,
Simón
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