How to call a REST web service API from JavaScript

Question

I have an HTML page with a button on it  When I click on that button  I need to call a REST Web Service API  I tried searching online everywhere  No clue whatsoever  Can someone give me a lead Headstart on this  Very much appreciated

User · Answer

Usual way is to go with PHP and ajax  But for your requirement  below will work fine    lt body gt   https   www google com controller Add 2 2 lt br gt  https   www google com controller Sub 5 2 lt br gt  https   www google com controller Multi 3 2 lt br gt  lt br gt    lt input type  text  id  url  placeholder  RESTful URL    gt   lt input type  button  id  sub  value  Answer    gt   lt p gt   lt div id  display  gt  lt  div gt   lt  body gt    lt script type  text javascript  gt   document getElementById  sub   onclick   function     var url   document getElementById  url   value  var controller   null   var method   null   var parm           validating URLs function URLValidation url   if  url indexOf  http         0    url indexOf  https         0    var x   url split       controller   x 3   method   x 4    parm 0    x 5    parm 1    x 6           Calculations function Add a b   return Number a   Number b     function Sub a b   return Number a  Number b     function Multi a b   return Number a  Number b          JSON Response function ResponseRequest status res   var res    status  status  response  res   document getElementById  display   innerHTML   JSON stringify res         Process function ProcessRequest     if method   Add        ResponseRequest  200  Add parm 0  parm 1      else if method   Sub        ResponseRequest  200  Sub parm 0  parm 1      else if method   Multi       ResponseRequest  200  Multi parm 0  parm 1      else       ResponseRequest  404   Not Found           URLValidation url   ProcessRequest         lt  script gt

User · Answer

Before we try to put anything on the front end of the website  let s open a connection the API  We ll do so using XMLHttpRequest objects  which is a way to open files and make an HTTP request   We ll create a request variable and assign a new XMLHttpRequest object to it  Then we ll open a new connection with the open   method - in the arguments we ll specify the type of request as GET as well as the URL of the API endpoint  The request completes and we can access the data inside the  onload function  When we re done  we ll send the request      Create a request variable and assign a new XMLHttpRequest object to it      var request   new XMLHttpRequest       Open a new connection  using the GET request on the URL endpoint request open  GET    https   ghibliapi herokuapp com films   true   request onload   function           Begin accessing JSON data here           Send request request send

User · Answer

I think add  if  this readyState    4  amp  amp  this status    200  to wait is better   var xhttp   new XMLHttpRequest    xhttp onreadystatechange   function         if  this readyState    4  amp  amp  this status    200              Typical action to be performed when the document is ready          var response   xhttp responseText          console log  ok  response            xhttp open  GET    your url   true    xhttp send

User · Answer

Here is another Javascript REST API Call with authentication using json    lt script type  text javascript  language  javascript  gt   function send         var urlvariable       urlvariable    text        var ItemJSON       ItemJSON             Id   1      ProductID    1       Quantity   1             Id   1      ProductID    2       Quantity   2             URL    https   testrestapi com additems var     urlvariable     Your URL      var xmlhttp   new XMLHttpRequest        xmlhttp onreadystatechange   callbackFunction xmlhttp       xmlhttp open  POST   URL  false       xmlhttp setRequestHeader  Content-Type    application json        xmlhttp setRequestHeader  Authorization    Basic     window btoa  apiusername apiuserpassword       in prod  you should encrypt user name and password and provide encrypted keys here instead      xmlhttp onreadystatechange   callbackFunction xmlhttp       xmlhttp send ItemJSON       alert xmlhttp responseText       document getElementById  div   innerHTML   xmlhttp statusText         xmlhttp status     lt BR gt  lt textarea rows  100  cols  100  gt     xmlhttp responseText     lt  textarea gt       function callbackFunction xmlhttp           alert xmlhttp responseXML      lt  script gt     lt html gt   lt body id  bod  gt  lt button type  submit  onclick  javascript send    gt call lt  button gt   lt div id  div  gt    lt  div gt  lt  body gt   lt  html gt

User · Answer

Without a doubt  the simplest method uses an invisible FORM element in HTML specifying the desired REST method  Then the arguments can be inserted into input type hidden value fields using JavaScript and the form can be submitted from the button click event listener or onclick event using one line of JavaScript  Here is an example that assumes the REST API is in file REST php   lt body gt   lt h2 gt REST-test lt  h2 gt   lt input type button onclick  quot document getElementById  a   submit    quot      value  quot Do It quot  gt   lt form id a action  quot REST php quot  method post gt   lt input type hidden name  quot arg quot  value  quot val quot  gt   lt  form gt   lt  body gt   Note that this example will replace the page with the output from page REST php  I m not sure how to modify this if you wish the API to be called with no visible effect on the current page  But it s certainly simple

User · Answer

button   on  click  function            console log  hii            ajax           headers                 key   your key         Accept   application json    depends on your api        Content-type   application x-www-form-urlencoded   depends on your api              url  url you need           success function response             var r JSON parse response                 main   html r base

User · Answer

I m surprised nobody has mentioned the new Fetch API  supported by all browsers except IE11 at the time of writing  It simplifies the XMLHttpRequest syntax you see in many of the other examples   The API includes a lot more  but start with the fetch   method  It takes two arguments    A URL or an object representing the request  Optional init object containing the method  headers  body etc    Simple GET   const userAction   async      gt      const response   await fetch  http   example com movies json      const myJson   await response json      extract JSON from the http response      do something with myJson     Recreating the previous top answer  a POST   const userAction   async      gt      const response   await fetch  http   example com movies json         method   POST       body  myBody     string or object     headers           Content-Type    application json                const myJson   await response json      extract JSON from the http response      do something with myJson

User · Answer

Your Javascript   function UserAction         var xhttp   new XMLHttpRequest        xhttp onreadystatechange   function              if  this readyState    4  amp  amp  this status    200                 alert this responseText                         xhttp open  POST    Your Rest URL Here   true       xhttp setRequestHeader  Content-type    application json        xhttp send  Your JSON Data Here        Your Button action     lt button type  submit  onclick  UserAction    gt Search lt  button gt    For more info go through the following link  Updated 2017 01 11

[javascript] How to call a REST web service API from JavaScript?

Examples related to javascript

Examples related to html

Examples related to rest

Examples related to web-services