Comment appeler une API de service Web REST à partir de JavaScript?

166

J'ai une page HTML avec un bouton dessus. Lorsque je clique sur ce bouton, je dois appeler une API de service Web REST. J'ai essayé de chercher en ligne partout. Aucun indice du tout. Quelqu'un peut-il me donner une piste / une longueur d'avance à ce sujet? Très apprécié.

— Shaik Syed Ali
source

Votre appel au service REST est juste une demande au serveur, je suppose que ce sera une demande ajax. Utilisez jQuery par exemple api.jquery.com/jquery.ajax

— ikos23

175

Je suis surpris que personne n'ait mentionné la nouvelle API Fetch, prise en charge par tous les navigateurs à l'exception d'IE11 au moment de la rédaction. Il simplifie la syntaxe XMLHttpRequest que vous voyez dans de nombreux autres exemples.

L'API comprend beaucoup plus , mais commencez par la fetch()méthode. Cela prend deux arguments:

Une URL ou un objet représentant la demande.
Objet init facultatif contenant la méthode, les en-têtes, le corps, etc.

GET simple:

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
}

Recréer la première réponse précédente , un 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
source

2

À quoi ressemble l'action du bouton avec cette solution?

— asmaier le

3

Qu'en est-il de DELETE et PUT?

— Krzysztof le

2

@asmaier avez-vous obtenu une réponse sur l'aspect de l'action du bouton? Merci

— Angel Esguerra

1

button.addEventListener('click', userAction);ou<button onclick="userAction()" />

— Brendan McGill le

105

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

Votre action Button:

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

Pour plus d'informations, cliquez sur le lien suivant (Mise à jour du 11/01/2017)

— Abhishek
source

19

XMLHttpRequest synchrone sur le thread principal est obsolète en raison de ses effets néfastes sur l'expérience de l'utilisateur final. Pour plus d'aide xhr.spec.whatwg.org

— jeet.chanchawat

Puisque vous effectuez un appel synchronisé, vous devez appeler xhttp.open("POST", "Your Rest URL Here", false);, sinon xhttp.responseText ne contiendra pas le résultat. Mais comme dit précédemment, il sera bientôt obsolète.

— Alexandre Fenyo

S'il s'agit d'une demande POST, où publiez-vous réellement les données?

— EFC

" xhttp.setRequestHeader("Content-type", "application/json");" - C'est un mensonge. Vous ne transmettez aucun JSON à la send()méthode.

— Quentin

Vous avez modifié ce code pour que la requête ne soit plus synchrone, mais vous essayez de lire la réponse comme si elle l'était.

— Quentin

17

Voici un autre appel d'API Javascript REST avec authentification à l'aide de 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
source

n'avez-vous rencontré aucun problème interdomaine? J'appelle une API hébergée ailleurs à partir de localhost et cela pose des problèmes entre domaines.

— Harit Vishwakarma

Je suis également confronté au même problème de cors..plz help

— Nitin Wahale

@HaritVishwakarma - ce sera le cas si l'API que vous appelez n'a pas Access-Control-Allow-Origin pour votre domaine (localhost). Essayez de créer votre propre proxy, envoyez une demande au proxy et transférez la demande à votre destination. Puisqu'il s'agira d'une communication serveur à serveur, la demande ne sera pas bloquée (CORS est bloqué par les navigateurs).

— Renvoyez

@HaritVishwakarma et NitinWahale et les futurs développeurs, vous pouvez désactiver la sécurité Web sur votre navigateur local à des fins de test uniquement - cela ne fonctionnera pas comme solution de production. Ref ici: stackoverflow.com/questions/3102819/…

— KDT

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
source

8

Je pense qu'additionner if (this.readyState == 4 && this.status == 200) attendre est mieux:

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
source

Cela ne fonctionnera pas si le client et l'API ne sont pas dans le même domaine, non?

— David Brossard

0

Avant d'essayer de mettre quoi que ce soit sur le front-end du site Web, ouvrons une connexion à l'API. Nous le ferons en utilisant des objets XMLHttpRequest, qui est un moyen d'ouvrir des fichiers et de faire une requête HTTP.

Nous allons créer une variable de requête et lui attribuer un nouvel objet XMLHttpRequest. Ensuite, nous ouvrirons une nouvelle connexion avec la méthode open () - dans les arguments, nous spécifierons le type de requête comme GET ainsi que l'URL du point de terminaison de l'API. La demande se termine et nous pouvons accéder aux données à l'intérieur de la fonction onload. Lorsque nous aurons terminé, nous enverrons la demande.
// Crée une variable de requête et lui assigne un nouvel objet XMLHttpRequest. 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
source

1

Des réponses similaires ont déjà été données. Pourquoi avez-vous ajouté votre réponse? Une courte description pourrait vous aider

— slfan

-1

La méthode habituelle consiste à utiliser PHP et ajax. Mais pour votre condition, ci-dessous fonctionnera bien.

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