Consuming REST service through JavaScript Client in JDeveloper
Purpose:
This blog is intended to give you a basic idea on the application and usage of the new JavaScript client feature introduced in JDeveloper 12.2.1.0.0.
Usecase:
This usecase talks about using the RESTful JavaScript Client feature provided by JDeveloper to invoke a RESTful service. For this, we will be creating a javascript client for a service which gives us basic employee details, ie., id and name. We will also perform search operation on the employees and insert new employee data, using HTML and JavaScript at the front end, while talking to the service behind the scene.
Pre-requisites:
JDeveloper 12.2.1.0.0
Steps:
1) Run the attached service in integrated weblogic server. Copy the WADL URL.
2) Create a new Custom application. Invoke the new gallery wizard and select RESTful JavaScript Client as shown below. In the resulting dialog, enter the WADL URL of the service. Navigate to the next page of the wizard. Here, you can optionally rename the ‘Class Name’ to a more convenient name. In this sample, I have used the name as ‘EmpClient’. Finish the wizard. A client.js file will get auto generated for you at this stage. As we had renamed the Class name to ‘EmpClient’, the main variable and function in this js file will also be named in a similar fashion. This file contains all the javascript code required to invoke the RESTful service. All we need to do now is design an HTML page and invoke the operations.
3) To invoke the operations of the service, start off by creating a HTML page. Let’s call the html page as EmployeePage.html.
4) To use the variables and functions defined in client.js, we need to include it in our HTML page. client.js in turn uses jquery.min.js. Thus, we need to include it as well in our HTML file. Without jquery.min.js, you will end up with the error ‘$ is not defined’ at runtime.
5) To design the HTML page, add a button with an onClick event attached to it. A snippet of the auto-generated client.js file as well as the initial HTML page is shown below. The page also includes the skeletal structure of a table, which we will use to render the data returned from the service.
Snippet of client.js:
var EmpClientClient = {
rootUri : "http://localhost:7101/REST_Service-Model-context-root/resources/",
EmpClient : function()
{
var path0 = EmpClientClient.rootUri;
return {
Project1 : function()
{
var path1 = path0+"project1";
:
:
getAsJson : function(){
:
:
Initial HTML Structure:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
<title>Employee Page</title>
<script type="text/javascript" src="js/client.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div>
<button onclick="invokeGETOperation()">Invoke GET Operation</button>
</div>
<table border="1" id="tbl1" hidden="hidden">
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
</tr>
</thead><tbody></tbody>
</table>
</body>
</html>
6) We then create the invokeGETOperation() function within the script tags as shown.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
<title>Employee Page</title>
<script type="text/javascript" src="js/client.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function invokeGETOperation() {
$("tbody").children().remove(); //clear table body
var myJsonObj = EmpClientClient.EmpClient().Project1().getAsJson();
myJsonObj.success(function (data) {
populateResultTable(data);
});
}
function populateResultTable(data) {
var dataSize = data.list.length;
for (i = 0;i < dataSize;i++) {
var tbl = document.getElementById("tbl1").innerHTML;
var tableData = tbl + '<tr><td>' + data.list[i].id + '<\/td><td>' + data.list[i].name + '<\/td><\/tr>';
document.getElementById("tbl1").innerHTML = tableData;
}
document.getElementById("tbl1").hidden = false;
}
</script>
</head>
<body>
<div>
<button onclick="invokeGETOperation()">Invoke GET Operation</button>
</div>
<table border="1" id="tbl1" >
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
</tr>
</thead><tbody></tbody>
</table>
</body>
</html>
7) That’s it! Run the page.
NOTE: In the browser, change the URL from 127.0.0.1 to localhost. Otherwise, the request will not go through (you may need to use Access-Control-Allow-Origin header when hostnames of service and client are different).
HTML Output:
Similarly,
For PUT operation:
Code snippet to invoke Put operation:
//Create new JSON data and populate it with new user data
var newJsonData = new Object();
newJsonData.id = eId; // eId is taken from input text box using document.getElementById("empId").value;
newJsonData.name = ename;
var myJsonObj = EmpClientClient.EmpClient().Project1().putJson(newJsonData); //passing the employee JSON object to the put operation
For Search (GET) operation:
Code snippet to invoke Search operation (Uses PathParam and QueryParam):
var myJsonObj = EmpClientClient.EmpClient().Project1().SearchEmpId(eId).getAsJson(ename);
Final Output
A sample JavaScript client app can be found here.
ليست هناك تعليقات:
إرسال تعليق