Best practices for consuming external webservice in SharePoint Online

Question

How can i consume an external rest webservice from Sharepoint Online?

Answer 1

The short answer is using the web proxy

The long answer :

When you are building SharePoint Add-ins, you usually have to incorporate data from various sources. For security reasons, there are blocking mechanisms that prevent cross-domain communication. When you use the web proxy, the webpages in your add-in can access data in your remote domain and the SharePoint domain.

The web proxy can be used with the JavaScript object model or with JQuery ajax

1. using the web proxy by using the JavaScript object model :

   //Categories from the Northwind database exposed as an OData service: 
   
   <!-- Placeholder for the remote content -->
   <span id="categories"></span>
   
   <!-- Add references to the JavaScript libraries. -->
   <script 
       type="text/javascript" 
       src="../_layouts/15/SP.Runtime.js">
   </script>
   <script 
       type="text/javascript" 
       src="../_layouts/15/SP.js">
   </script>
   <script type="text/javascript">
   (function () {
       "use strict";
   
       // Prepare the request to an OData source
       // using the GET verb.
       var context = SP.ClientContext.get_current();
       var request = new SP.WebRequestInfo();
       request.set_url(
           "http://services.odata.org/Northwind/Northwind.svc/Categories"
           );
       request.set_method("GET");
   
       // We need the response formatted as JSON.
       request.set_headers({ "Accept": "application/json;odata=verbose" });
       var response = SP.WebProxy.invoke(context, request);
   
       // Let users know that there is some
       // processing going on.
       document.getElementById("categories").innerHTML =
                   "<P>Loading categories...</P>";
   
       // Set the event handlers and invoke the request.
       context.executeQueryAsync(successHandler, errorHandler);
   
       // Event handler for the success event.
       // Get the totalResults node in the response.
       // Render the value in the placeholder.
       function successHandler() {
   
           // Check for status code == 200
           // Some other status codes, such as 302 redirect
           // do not trigger the errorHandler. 
           if (response.get_statusCode() == 200) {
               var categories;
               var output;
   
               // Load the OData source from the response.
               categories = JSON.parse(response.get_body());
   
               // Extract the CategoryName and Description
               // from each result in the response.
               // Build the output as a list.
               output = "<UL>";
               for (var i = 0; i < categories.d.results.length; i++) {
                   var categoryName;
                   var description;
                   categoryName = categories.d.results[i].CategoryName;
                   description = categories.d.results[i].Description;
                   output += "<LI>" + categoryName + ":&nbsp;" +
                       description + "</LI>";
               }
               output += "</UL>";
   
               document.getElementById("categories").innerHTML = output;
           }
           else {
               var errordesc;
   
               errordesc = "<P>Status code: " +
                   response.get_statusCode() + "<br/>";
               errordesc += response.get_body();
               document.getElementById("categories").innerHTML = errordesc;
           }
       }
   
       // Event handler for the error event.
       // Render the response body in the placeholder.
       // The body includes the error message.
       function errorHandler() {
           document.getElementById("categories").innerHTML =
               response.get_body();
       }
   })();
   </script>
   

2. Using the web proxy by using JQuery ajax :

   //Categories from the Northwind database exposed as an OData service: 
   
   <!-- Placeholder for the remote content -->
   <span id="categories"></span>
   
   <script 
       type="text/javascript" 
       src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js">
   </script>
   
   <script type="text/javascript">
   (function () {
       "use strict";
   
       // The Northwind categories endpoint.
       var url =
           "http://services.odata.org/Northwind/Northwind.svc/Categories";
   
       // Let users know that there is some
       // processing going on.
       document.getElementById("categories").innerHTML =
                   "<P>Loading categories...</P>";
   
       // Issue a POST request to the SP.WebProxy.Invoke endpoint.
       // The body has the information to issue a GET request
       // to the Northwind service.
       $.ajax({
           url: "../_api/SP.WebProxy.invoke",
           type: "POST",
           data: JSON.stringify(
               {
                   "requestInfo": {
                       "__metadata": { "type": "SP.WebRequestInfo" },
                       "Url": url,
                       "Method": "GET",
                       "Headers": {
                           "results": [{
                               "__metadata": { "type": "SP.KeyValue" },
                               "Key": "Accept",
                               "Value": "application/json;odata=verbose",
                               "ValueType": "Edm.String"
                           }]
                       }
                   }
               }),
           headers: {
               "Accept": "application/json;odata=verbose",
               "Content-Type": "application/json;odata=verbose",
               "X-RequestDigest": $("#__REQUESTDIGEST").val()
           },
           success: successHandler,
           error: errorHandler
       });
   
       // Event handler for the success event.
       // Get the totalResults node in the response.
       // Render the value in the placeholder.
       function successHandler(data) {
           // Check for status code == 200
           // Some other status codes, such as 302 redirect,
           // do not trigger the errorHandler. 
           if (data.d.Invoke.StatusCode == 200) {
               var categories;
               var output;
   
               // Load the OData source from the response.
               categories = JSON.parse(data.d.Invoke.Body);
   
               // Extract the CategoryName and Description
               // from each result in the response.
               // Build the output as a list
               output = "<UL>";
               for (var i = 0; i < categories.d.results.length; i++) {
                   var categoryName;
                   var description;
                   categoryName = categories.d.results[i].CategoryName;
                   description = categories.d.results[i].Description;
                   output += "<LI>" + categoryName + ":&nbsp;" +
                       description + "</LI>";
               }
               output += "</UL>";
   
               document.getElementById("categories").innerHTML = output;
           }
           else {
               var errordesc;
   
               errordesc = "<P>Status code: " +
                   data.d.Invoke.StatusCode + "<br/>";
               errordesc += response.get_body();
               document.getElementById("categories").innerHTML = errordesc;
           }
       }
   
       // Event handler for the error event.
       // Render the response body in the placeholder.
       // The 2nd argument includes the error message.
       function errorHandler() {
           document.getElementById("categories").innerHTML =
               arguments[2];
       }
   })();
   </script>
   

You can view the full tutorial in MSDN : https://msdn.microsoft.com/en-us/library/office/fp179895.aspx