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.

Your call to REST service is just a request to the server , I guess it's gonna be an ajax request. Use jQuery for instance http://api.jquery.com/jquery.ajax/ — ikos23, May 02 '16 at 05:43

Brendan McGill · Accepted Answer · 2019-06-21T19:49:38.633

229

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 () => {
  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 () => {
  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
}

edited Jun 21 '19 at 19:49

answered Aug 15 '18 at 06:44

Brendan McGill

4,127
3
17
27

3

How does the button action look like with this solution? – asmaier Jan 16 '20 at 09:28
6

What about DELETE and PUT? – Krzysztof Feb 11 '20 at 16:46
2

@asmaier did you get an answer on how the button action will look like? Thanks – Angel Esguerra Jun 07 '20 at 12:35
3

`button.addEventListener('click', userAction);` or `` – Brendan McGill Jun 17 '20 at 01:18
Is there a way to use similar javascript inside stored procedure or UDF in CosmosDB ? – NEV Jul 30 '20 at 23:20

Abhishek · Answer 2 · 2018-07-26T10:26:56.667

116

Your Javascript:

function UserAction() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
         if (this.readyState == 4 && 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::

<button type="submit" onclick="UserAction()">Search</button>

For more info go through the following link (Updated 2017/01/11)

edited Jul 26 '18 at 10:26

answered May 02 '16 at 05:55

Abhishek

2,345
2
16
24

20

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/ – jeet.chanchawat Feb 24 '17 at 11:12
Since you are doing a synchronized call, you need to call `xhttp.open("POST", "Your Rest URL Here", false);`, otherwise xhttp.responseText will not contain the result. But as said before, it will be soon deprecated. – Alexandre Fenyo Jan 31 '18 at 09:39
If this is a POST request, where are you actually posting the data? – EFC May 15 '18 at 18:47
"`xhttp.setRequestHeader("Content-type", "application/json");`" — This is a lie. You aren't passing any JSON to the `send()` method. – Quentin Jul 10 '18 at 13:44
You've edited this code so the request is no longer syncronous, but you are trying to read the response as if it were. – Quentin Jul 10 '18 at 13:45
1

You will regret using an XMLHttpRequest object instead of using fetch() when you try to use Service Workers. There are polyfills for fetch() for use in older browsers. Learn to use fetch(). – John Deighan Mar 19 '20 at 12:52

score 18 · Answer 3 · edited Jan 11 '18 at 21:49

Here is another Javascript REST API Call with authentication using json:

<script type="text/javascript" language="javascript">

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 + "<BR><textarea rows='100' cols='100'>" + xmlhttp.responseText + "</textarea>";
}

function callbackFunction(xmlhttp) 
{
    //alert(xmlhttp.responseXML);
}
</script>


<html>
<body id='bod'><button type="submit" onclick="javascript:send()">call</button>
<div id='div'>

</div></body>
</html>

didn't you face any cross domain issues? I am calling an api hosted somewhere else from localhost and it is giving cross domain issues. — Harit Vishwakarma, May 30 '18 at 11:13
@HaritVishwakarma - it will if the api you are calling doesn't have Access-Control-Allow-Origin for your domain(localhost). Try creating your own proxy, send req to the proxy and forward the request to your destination. Since this will be a server to server communication, the request wont be blocked(CORS is blocked by browsers). Send back this response with the allow-origin header set to all — sss999, Mar 11 '20 at 20:04
@HaritVishwakarma and NitinWahale and future devs you can disable web security on your local browser for testing purposes only though - this won't work as a production solution. Ref here: https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome — KDT, Apr 29 '20 at 14:56

score 14 · Answer 4 · answered Mar 01 '17 at 18:11

    $("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);
        }
      });
});

score 8 · Answer 5 · answered Apr 12 '18 at 15:54

8

I think add if (this.readyState == 4 && this.status == 200) to wait is better:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && 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();

answered Apr 12 '18 at 15:54

martinwang1985

498
3
26
41

That won't work if the client and the API are not in the same domain, right? – David Brossard Nov 17 '18 at 19:54

Roshini Dasari · Answer 6 · 2019-06-17T06:33:53.550

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()

Similar answers have been given before. Why did you add your answer? A short description might help — slfan, Jun 17 '19 at 06:07

score -1 · Answer 7 · answered Mar 06 '19 at 06:58

Usual way is to go with PHP and ajax. But for your requirement, below will work fine.

<body>

https://www.google.com/controller/Add/2/2<br>
https://www.google.com/controller/Sub/5/2<br>
https://www.google.com/controller/Multi/3/2<br><br>

<input type="text" id="url" placeholder="RESTful URL" />
<input type="button" id="sub" value="Answer" />
<p>
<div id="display"></div>
</body>

<script type="text/javascript">

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();

};
</script>

David Spector · Answer 8 · 2020-08-09T01:07:25.823

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:

<body>
<h2>REST-test</h2>
<input type=button onclick="document.getElementById('a').submit();"
    value="Do It">
<form id=a action="REST.php" method=post>
<input type=hidden name="arg" value="val">
</form>
</body>

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.

How to call a REST web service API from JavaScript?

8 Answers8

Linked