Web API call using JavaScript

In Oracle APEX we have a feature to call Web API which gives data in JSON format. Along with the native features we can use JavaScript also to call a Web API in APEX.

Here, I will demonstrate a small example how to build the code for the same.

Step 1: We create a static type region and two page items, let's say P5_URL (Type: Text Field) and P5_RESPONSE (Type: Textarea) . One for giving the Web API and second is to get the response.

Step 2: Write the below JavaScript code in page property "Function and Global Variable Declaration"

function CALL_TO_WEBSERVICE() { var urlvariable; var ItemJSON; var v_url = apex.item("P5_URL").getValue(); URL = v_url ; var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = callbackFunction(xmlhttp); xmlhttp.open("GET", URL, false); xmlhttp.onreadystatechange = callbackFunction(xmlhttp); xmlhttp.send(ItemJSON); $x("P5_RESPONSE").value = xmlhttp.responseText; } function callbackFunction(xmlhttp) { // alert(xmlhttp.responseXML); }

• The XMLHttpRequest object can be used to exchange data with a web server.

• To send a request to a server, you can use the open() and send() methods of the XMLHttpRequest object.

• xmlhttp.onreadystatechange defines a function to be called when the readyState property changes

• xmlhttp.responseText, returns the response data as a string

Step 3: Create button "Call" & set the action property under Behavior as "Defined by Dynamic Action"

Step 4: Create a dynamic action on "Call" button as "Click" & set the True Action as "Execute JavaScript Code" and call the function written under JavaScript property at page level.

Step 5: Run the application. Put any Web API in item "P5_URL" and click the "Call" button.

Ex: Here I used a github public Web API https://api.github.com/users/oracle/repos

In the "response" item you can see the reply from the server.

Thanks for reading !!