Como chamar uma API de serviço da web REST a partir do JavaScript?

166

Eu tenho uma página HTML com um botão. Quando clico nesse botão, preciso chamar uma API de serviço web REST. Eu tentei pesquisar online em qualquer lugar. Nenhuma pista. Alguém pode me dar uma vantagem / Headstart sobre isso? Muito apreciado.

javascript html rest web-services Shaik Syed Ali
fonte
Sua chamada para o serviço REST é apenas uma solicitação para o servidor, acho que será uma solicitação ajax. Use jQuery por exemplo api.jquery.com/jquery.ajax
ikos23

Respostas:

173

Estou surpreso que ninguém tenha mencionado a nova API de busca, suportada por todos os navegadores, exceto o IE11, no momento em que este foi escrito. Ele simplifica a sintaxe XMLHttpRequest que você vê em muitos dos outros exemplos.

A API inclui muito mais , mas comece com o fetch()método São necessários dois argumentos:

  1. Um URL ou um objeto que representa a solicitação.
  2. Objeto init opcional que contém o método, cabeçalhos, corpo etc.

GET simples:

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
}

Recriando a resposta superior anterior , um 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
}
Brendan McGill
fonte
2
Como é a ação do botão nesta solução?
asmaier 16/01
3
E quanto a DELETE e PUT?
Krzysztof
2
@asmaier, você recebeu uma resposta sobre como será a ação do botão? Obrigado
Angel Esguerra
1
button.addEventListener('click', userAction);ou<button onclick="userAction()" />
Brendan McGill
105

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

Sua ação no botão ::

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

Para mais informações, acesse o seguinte link (Atualizado em 11/01/2017)

Abhishek
fonte
19
O XMLHttpRequest síncrono no encadeamento principal foi descontinuado por causa de seus efeitos prejudiciais à experiência do usuário final. Para obter mais ajuda xhr.spec.whatwg.org
jeet.chanchawat
Como você está fazendo uma chamada sincronizada, é necessário ligar xhttp.open("POST", "Your Rest URL Here", false);, caso contrário, xhttp.responseText não conterá o resultado. Mas, como já foi dito, em breve será preterido.
Alexandre Fenyo 31/01
Se essa é uma solicitação POST, onde você está realmente postando os dados?
EFC
" xhttp.setRequestHeader("Content-type", "application/json");" - Isso é mentira. Você não está passando nenhum JSON para o send()método
Quentin
Você editou esse código para que a solicitação não seja mais sincronizada, mas você está tentando ler a resposta como se fosse.
Quentin
17

Aqui está outra chamada à API REST Javascript com autenticação usando 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>
user1713008
fonte
você não enfrentou problemas entre domínios? Estou chamando uma API hospedada em outro lugar pelo localhost e está dando problemas entre domínios.
Harit Vishwakarma
Estou também enfrentam mesmas coros issue..plz ajuda
Nitin Wahale
@HaritVishwakarma - terá se a API que você está chamando não tiver acesso-controle-permissão-origem para o seu domínio (localhost). Tente criar seu próprio proxy, envie req ao proxy e encaminhe a solicitação ao seu destino. Como essa será uma comunicação servidor a servidor, a solicitação não será bloqueada (o CORS é bloqueado pelos navegadores). Envie de volta esta resposta com o cabeçalho allow-origin definido como all
sss999 11/03
@HaritVishwakarma e NitinWahale e futuros desenvolvedores, você pode desativar a segurança da Web no navegador local apenas para fins de teste - isso não funcionará como uma solução de produção. Ref: aqui stackoverflow.com/questions/3102819/…
KDT 29/04
12 
    $("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);
        }
      });
});
aayushi
fonte
8

Eu acho que adicionar se (this.readyState == 4 && this.status == 200) esperar é melhor:

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();
martinwang1985
fonte
Isso não funcionará se o cliente e a API não estiverem no mesmo domínio, certo?
David Brossard
0

Antes de tentarmos colocar alguma coisa no front-end do site, vamos abrir uma conexão com a API. Faremos isso usando objetos XMLHttpRequest, que é uma maneira de abrir arquivos e fazer uma solicitação HTTP.

Criaremos uma variável de solicitação e atribuiremos um novo objeto XMLHttpRequest a ela. Em seguida, abriremos uma nova conexão com o método open () - nos argumentos, especificaremos o tipo de solicitação como GET, bem como a URL do terminal da API. A solicitação é concluída e podemos acessar os dados dentro da função onload. Quando terminarmos, enviaremos a solicitação.
// Crie uma variável de solicitação e atribua um novo objeto XMLHttpRequest a ela. 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()
Roshini Dasari
fonte
1
Respostas semelhantes foram dadas antes. Por que você adicionou sua resposta? Uma breve descrição poderia ajudar
slfan
-1

A maneira usual é ir com PHP e ajax. Mas para sua exigência, abaixo funcionará bem.

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

fonte