Activity Forums Salesforce® Discussions How to Invoke Rest Service from Visualforce page?

  • shradha jain

    Member
    August 24, 2018 at 12:48 pm

    Hello Madhulika,

    All of the APIs are available on the visualforce.com domain, so you can access them without a cross-domain request. Do not include the server URL. You should use the domain that you are on.

    var weblink = "/services/apexrest/v1/restResourceTest";
    Your browser will understand this as an attempt to use the current host name, which will work. Here's a  example  that works:

    <apex:page >
    <script>
    var s = '{!GETSESSIONID()}';
    var x = new XMLHttpRequest();
    x.open('GET','/services/data');
    x.setRequestHeader('Authorization','Bearer '+s);
    x.onload = function() { alert(this.response); }
    x.send(null);
    </script>
    </apex:page>

    Thanks.

  • shariq

    Member
    September 17, 2018 at 10:07 pm

    Hi,

    Usually we make Rest API calls from Salesforce to External systems to get the data or to pass the updates to External Systems, using Apex class. But sometimes we can have a situation, like where we need to make a call to external systems from the visual force page.

    Salesforce has introduced a concept called AJAX ToolKit, which help us to make REST API call from the JavaScript in Visualforce Page. Here is an example to invoke REST API from Visualforce Page. In below example I’m using http://fixer.io/ web service HTTP callout and send a GET request to get the foreign exchange rates. The foreign exchange rates service sends the response in JSON format.

    <apex:page>
    <apex:includeScript value="//code.jquery.com/jquery-1.11.1.min.js" />
    <script>
    function apiCall() {
    //Get a reference to jQuery that we can work with
    $j = jQuery.noConflict();
    //endpoint URL
    var weblink = "https://api.fixer.io/latest?base=USD";

    $j.ajax({
    url: weblink,
    type: 'GET', //Type POST or GET
    dataType: 'json',
    beforeSend: function(request) {
    //Add all API Headers here if any
    //request.setRequestHeader('Type','Value');
    },

    crossDomain: true,
    //If Successfully executed
    success: function(result) {
    //Response will be stored in result variable in the form of Object.
    console.log('Response Result' + result);

    //Convert JSResponse Object to JSON response
    var jsonResp = JSON.stringify(result);
    document.getElementById("apiData").innerHTML = jsonResp;
    },

    //If any Error occured
    error: function(jqXHR, textStatus, errorThrown) {
    //alert('ErrorThrown: ' + errorThrown);
    }
    });
    }
    </script>
    <apex:form>
    <!--call javaScript-->
    <input type="button" value="Call API" onclick="apiCall()" />
    <div id="apiData">
    </div>
    </apex:form>
    </apex:page>

    Hope this helps.

  • Parul

    Member
    September 18, 2018 at 8:13 pm

    Hi

    Salesforce has introduced a concept called AJAX ToolKit, which help us to make REST API call from the JavaScript in Visualforce Page. Here is an example to invoke REST API from Visualforce Page. In below example I’m using http://fixer.io/ web service HTTP callout and send a GET request to get the foreign exchange rates. The foreign exchange rates service sends the response in JSON format.

    Here is the code snippet:

    <apex:page>
    <apex:includeScript value="//code.jquery.com/jquery-1.11.1.min.js" />
    <script>
    function apiCall() {
    //Get a reference to jQuery that we can work with
    $j = jQuery.noConflict();
    //endpoint URL
    var weblink = "https://api.fixer.io/latest?base=USD";

    $j.ajax({
    url: weblink,
    type: 'GET', //Type POST or GET
    dataType: 'json',
    beforeSend: function(request) {
    //Add all API Headers here if any
    //request.setRequestHeader('Type','Value');
    },

    crossDomain: true,
    //If Successfully executed
    success: function(result) {
    //Response will be stored in result variable in the form of Object.
    console.log('Response Result' + result);

    //Convert JSResponse Object to JSON response
    var jsonResp = JSON.stringify(result);
    document.getElementById("apiData").innerHTML = jsonResp;
    },

    //If any Error occured
    error: function(jqXHR, textStatus, errorThrown) {
    //alert('ErrorThrown: ' + errorThrown);
    }
    });
    }
    </script>
    <apex:form>
    <!--call javaScript-->
    <input type="button" value="Call API" onclick="apiCall()" />
    <div id="apiData">
    </div>
    </apex:form>
    </apex:page>

Log In to reply.

Popular Salesforce Blogs

Popular Salesforce Videos