How to Invoke Rest Service from Visualforce page?

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.

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>