Jak wywołać interfejs API usługi internetowej REST z JavaScript?

166

Mam stronę HTML z przyciskiem. Kiedy klikam ten przycisk, muszę wywołać interfejs API usługi sieci Web REST. Wszędzie próbowałem wyszukiwać w Internecie. Żadnych wskazówek. Czy ktoś może dać mi wskazówkę / Headstart w tej sprawie? Bardzo cenione.

javascript html rest web-services Shaik Syed Ali
źródło
Twoje wywołanie usługi REST to tylko żądanie do serwera, myślę, że będzie to żądanie AJAX. Użyj jQuery na przykład api.jquery.com/jquery.ajax
ikos23

Odpowiedzi:

172

Dziwię się, że nikt nie wspomniał o nowym Fetch API, obsługiwanym przez wszystkie przeglądarki oprócz IE11 w momencie pisania. Upraszcza składnię XMLHttpRequest, którą widzisz w wielu innych przykładach.

API zawiera o wiele więcej , ale zacznij od fetch()metody. Wymaga dwóch argumentów:

  1. Adres URL lub obiekt reprezentujący żądanie.
  2. Opcjonalny obiekt init zawierający metodę, nagłówki, treść itp.

Proste POBIERZ:

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
}

Odtworzenie poprzedniej najlepszej odpowiedzi , 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
źródło
2
Jak wygląda akcja przycisku w tym rozwiązaniu?
asmaier
3
A co z DELETE i PUT?
Krzysztof
2
@asmaier, czy dostałeś odpowiedź, jak będzie wyglądać działanie przycisku? Dzięki
Angel Esguerra
1
button.addEventListener('click', userAction);lub<button onclick="userAction()" />
Brendan McGill
105

Twój 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");
}

Twoja akcja przycisku:

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

Aby uzyskać więcej informacji, kliknij poniższy link (zaktualizowany 2017/01/11)

Abhishek
źródło
19
Synchroniczne XMLHttpRequest w głównym wątku jest przestarzałe ze względu na jego szkodliwy wpływ na środowisko użytkownika końcowego. Aby uzyskać dodatkową pomoc, xhr.spec.whatwg.org
jeet.chanchawat
Ponieważ wykonujesz połączenie synchroniczne, musisz zadzwonić xhttp.open("POST", "Your Rest URL Here", false);, w przeciwnym razie xhttp.responseText nie będzie zawierał wyniku. Ale jak już powiedziano, wkrótce zostanie wycofany.
Alexandre Fenyo
Jeśli jest to żądanie POST, gdzie właściwie umieszczasz dane?
EFC
„ xhttp.setRequestHeader("Content-type", "application/json");” - To kłamstwo. Nie przekazujesz żadnego kodu JSON do send()metody.
Quentin,
Edytowałeś ten kod, więc żądanie nie jest już synchroniczne, ale próbujesz odczytać odpowiedź tak, jakby była.
Quentin,
17

Oto kolejne wywołanie API REST JavaScript z uwierzytelnianiem przy użyciu 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
źródło
czy nie napotkałeś żadnych problemów między domenami? Wywołuję interfejs API hostowany w innym miejscu z hosta lokalnego i powoduje problemy między domenami.
Harit Vishwakarma
Mam też ten sam problem z corsami..plz help
Nitin Wahale
@HaritVishwakarma - będzie, jeśli wywoływany interfejs API nie ma Access-Control-Allow-Origin dla Twojej domeny (localhost). Spróbuj utworzyć własne proxy, wyślij żądanie do serwera proxy i przekieruj żądanie do miejsca docelowego. Ponieważ będzie to komunikacja między serwerami, żądanie nie zostanie zablokowane (mechanizm CORS jest blokowany przez przeglądarki). Odeślij tę odpowiedź z nagłówkiem allow-origin ustawionym na all
sss999
@HaritVishwakarma i NitinWahale oraz przyszli programiści mogą wyłączyć zabezpieczenia internetowe w lokalnej przeglądarce tylko w celach testowych - to nie zadziała jako rozwiązanie produkcyjne. Zobacz tutaj: 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
źródło
8

Myślę, że dodanie, jeśli (this.readyState == 4 && this.status == 200) czekać, jest lepsze:

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
źródło
To nie zadziała, jeśli klient i API nie są w tej samej domenie, prawda?
David Brossard
0

Zanim spróbujemy umieścić cokolwiek w interfejsie strony, otwórzmy połączenie API. Zrobimy to za pomocą obiektów XMLHttpRequest, które są sposobem na otwieranie plików i wysyłanie żądania HTTP.

Stworzymy zmienną żądania i przypiszemy do niej nowy obiekt XMLHttpRequest. Następnie otworzymy nowe połączenie metodą open () - w argumentach określimy typ żądania jako GET oraz adres URL punktu końcowego API. Żądanie jest zakończone i możemy uzyskać dostęp do danych wewnątrz funkcji onload. Kiedy skończymy, wyślemy prośbę.
// Utwórz zmienną żądania i przypisz do niej nowy obiekt XMLHttpRequest. var request = nowy 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
źródło
1
Podobne odpowiedzi udzielono już wcześniej. Dlaczego dodałeś swoją odpowiedź? Może pomóc krótki opis
slfan
-1

Zwykłym sposobem jest korzystanie z PHP i Ajax. Ale dla twoich wymagań poniżej będzie działać dobrze.

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

źródło