HTML Javascript Web Service call from SAP BSP

Advertisements

Once you have your Web Service working using Postman or a similar API testing tool it is time to implement it within an SAP solution. At this point you have got a couple of options, one is to implement a JavaScript Web Service Call it within an SAP BSP/HTML web page and the other is within an ABAP program/class using the CL_HTTP_CLIENT SAP class functionality.

Advertisements

The method I am going to look at initially is to implement it within a web page(BSP). we can do this outside of SAP using a simple HTML page and the code that postman automatically generates for you.

If you check out the Postman article you will see that after you test the example REST web service (http://gturnquist-quoters.cfapps.io/api/random) it will auto generate some JavaScript code which looks like this.

Advertisements

var data = null;
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.addEventListener("readystatechange", function () {
if (this.readyState === 4) {
console.log(this.responseText
}
});
xhr.open("GEThhttp://gturnquist-quoters.cfapps.io/api/random");
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("Postman-Token", "9787d5ef-a7e8-bc49-6c77-69823052d2ee");
xhr.send(data);

Now simply create a new text(.txt) file on your PC and enter the following html code.

Advertisements

<!DOCTYPE html>
<html>
<head>
<body>
<h1>Test Web Service</h1>
<SCRIPT>
</SCRIPT>
</body>
</html>

Now enter the JS code from Postman in between the <SCRIPT> tags so your code looks like this.

Advertisements

<!DOCTYPE html>
<html>
<head>
<body>
<h1>Test Web Service</h1>
<SCRIPT>
var data = null;
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.addEventListener("readystatechange", function () {
if (this.readyState === 4) {
console.log(this.responseText);
}
});
xhr.open("GEThhttp://gturnquist-quoters.cfapps.io/api/random");
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("Postman-Token", "9787d5ef-a7e8-bc49-6c77-69823052d2ee");
xhr.send(data
</SCRIPT>
</body>
</html>

The last step is rename the file to a .htm file i.e. test.htm. Alternatively you can download this file as a template then rename it to a .htm or html file.

Advertisements