How to Invoke the REST API from the Visual Force Page in Salesforce

Problem:
We usually making a lot of API calls from Salesforce to External systems to get the some data or to pass the some updates to External Systems.All these calls will be made from the Apex class to External systems. What if you have situation like where you need to make a call to external systems from the visual force page.

Solution:
No need to worry still we have option to make an REST API call from the page directly.How?As we already know that Salesforce has introduced a concept called AJAX ToolKit.This is an frame which will be used to make all the operations from JavaScript similar to APEX. With help of this tool kit you can make an REST API call from the Script in Visual Force Page

Flow Diagram:
 

Sample Source Code:

<apex:page standardController="Account">
<apex:includeScript value="//code.jquery.com/jquery-1.11.1.min.js" />
<script src="../../soap/ajax/40.0/connection.js" type="text/javascript"></script>

<script>
function makeAPICall() 
{
    var weblink = //Your API endpoint 'https://www.yourednpoint/';
 
    $j.ajax({
  url: weblink,
  type: 'GET', // Type POST or GET
  dataType: 'json',
  beforeSend: function(request) {
      // Add All your Headers Here if Any
   request.setRequestHeader('HeaderString','HeaderValue');
   //Sample Headers 
   request.setRequestHeader('Country', 'IND');
   request.setRequestHeader('Currency', 'INR');
  },

  crossDomain: true,
  
  //If Successfully executed 
  success: function(result) {
   
   //Response will be stored in result variable in the form of Object.Please use result variable for processing
    console.log('Response Result'+result); 
    
      //If you want to convert JSResponse Object to JSON response 
    var jsonResp = JSON.stringify(result));

  },
  
  //If any Error
  
  error: function(jqXHR, textStatus, errorThrown) {
   
   // alert('ErrorThrown: ' + errorThrown);
  }
    });
}
</script>
<apex:form>
  call javaScript method from here to make an api call invocation
</apex:form>
</apex:page>

Hope this helps you....Enjoy!