Friday 21 April 2017

Http Callout from Java Script | Rest Callout from Visual Force Page without Apex Class



Sample Code 1:- 

<apex:page>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="  crossorigin="anonymous"></script>
    
    <script>
    
        function Callout()
        {
            var JSONResponse = '';
            var JsonBody = '';
            JsonBody = '{Request Body}';
            console.log('--JsonBody ------->'+JsonBody );
            
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "END_POINT_URL", true);
            <!-- xhr.setRequestHeader("Authorization","Bearer {!AccessToken}" ); -->
            xhr.setRequestHeader("Content-type", "application/json;charset=UTF-8");
            xhr.setRequestHeader("Accept", "application/json");
            xhr.onload = function () 
            {
                JSONResponse = xhr.responseText;
                console.log('--JSONResponse ------->'+xhr.responseText);
            };
            xhr.send(JsonBody);
            setTimeout( function()
                {
                    if(xhr.status == 404){                     
                    }
                    else if(xhr.status == 401){
                    }
                    else if(xhr.status == 500){
                    }
                    else if(xhr.status == 200)
                    {
                        obj1 = JSON.parse(JSONResponse );
                        for(var x=0;x< obj1.length;x++)
                        {
                            var singleEle = obj1[x];
                            console.log('--singleEle ------->'+singleEle );
                        }
                    }
                },
            2000);
        }
        
    </script>   
    
    <apex:form>
        <apex:pageBlock>
             <apex:pageBlockButtons location="Top">
                <button type="button" onclick="Callout();" style="height:22px; width:150px" > 
     Make Callout 
                </button>
             </apex:pageBlockButtons>
        </apex:pageBlock>
    </apex:form>
    
</apex:page>

Sample Code 2:-

<html ng-app="demo">
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
 <script>
 
  angular.module('demo', [])
  .controller('Hello', function($scope, $http) 
  {
   var req = {
     method: 'GET',
     url: 'END_POINT_URL',
     headers: {
       'Content-Type': 'application/json',
       'accept':'application/json',
       'authorization':'Bearer TOKEN_VALUE'
     },
     body:{'test body'}
   };

   $http(req).then(function(response) {
      $scope.greeting = response.data;
     });
   
  });
 </script>

 <body>
  <div ng-controller="Hello">
   <p>Content is {{greeting}}</p>
  </div>
 </body>
</html>

You May get below error
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at END_POINT_URL. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

Solution :- To resolve the issue you need to request external system to add Salesforce Base URL in CORS

https://zinoui.com/blog/cross-domain-ajax-request
http://www.toppctech.com/best-fix-ssl_error_weak_server_ephemeral_dh_key-error/



Thanks
Amit Chaudhary

1 comment: