Bagaimana cara memanggil API layanan web REST dari JavaScript?

166

Saya memiliki halaman HTML dengan tombol di atasnya. Ketika saya mengklik tombol itu, saya perlu memanggil REST Web Service API. Saya mencoba mencari online di mana-mana. Tidak ada petunjuk sama sekali. Bisakah seseorang memberi saya petunjuk / Headstart tentang ini? Sangat dihargai.

javascript html rest web-services Shaik Syed Ali
sumber
Panggilan Anda ke layanan REST hanya permintaan ke server, saya kira itu akan menjadi permintaan ajax. Gunakan jQuery misalnya api.jquery.com/jquery.ajax
ikos23

Jawaban:

173

Saya terkejut tidak ada yang menyebutkan API Ambil baru, didukung oleh semua browser kecuali IE11 pada saat penulisan. Ini menyederhanakan sintaks XMLHttpRequest yang Anda lihat di banyak contoh lainnya.

API mencakup lebih banyak , tetapi mulai dengan fetch()metode. Dibutuhkan dua argumen:

  1. URL atau objek yang mewakili permintaan.
  2. Objek init opsional yang berisi metode, header, tubuh, dll.

DAPATKAN Sederhana:

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
}

Menciptakan jawaban teratas sebelumnya , sebuah 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
sumber
2
Bagaimana tindakan tombol terlihat seperti dengan solusi ini?
asmaier
3
Bagaimana dengan DELETE dan PUT?
Krzysztof
2
@asmaier apakah Anda mendapatkan jawaban tentang bagaimana tindakan tombol akan terlihat? Terima kasih
Angel Esguerra
1
button.addEventListener('click', userAction);atau<button onclick="userAction()" />
Brendan McGill
105

Javascript Anda:

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

Aksi Tombol Anda ::

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

Untuk info lebih lanjut, buka tautan berikut (Diperbarui 2017/01/11)

Abhishek
sumber
19
Sinkronisasi XMLHttpRequest pada utas utama sudah usang karena efeknya yang merugikan bagi pengalaman pengguna akhir. Untuk bantuan lebih lanjut xhr.spec.whatwg.org
jeet.chanchawat
Karena Anda melakukan panggilan tersinkronisasi, Anda perlu menelepon xhttp.open("POST", "Your Rest URL Here", false);, jika tidak xhttp.responseText tidak akan berisi hasilnya. Tetapi seperti yang dikatakan sebelumnya, itu akan segera ditinggalkan.
Alexandre Fenyo
Jika ini adalah permintaan POST, di mana Anda sebenarnya memposting data?
EFC
" xhttp.setRequestHeader("Content-type", "application/json");" - Ini bohong. Anda tidak melewatkan JSON apa pun ke send()metode.
Quentin
Anda telah mengedit kode ini sehingga permintaan tidak lagi sinkron, tetapi Anda mencoba membaca respons seolah-olah itu.
Quentin
17

Berikut ini adalah Panggilan API REST Javascript lainnya dengan otentikasi menggunakan 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>
pengguna1713008
sumber
tidakkah Anda menghadapi masalah lintas domain? Saya memanggil api yang di-host di tempat lain dari localhost dan memberikan masalah lintas domain.
Harit Vishwakarma
Saya juga menghadapi masalah kors yang sama .. tolong bantu
Nitin Wahale
@HaritVishwakarma - itu akan terjadi jika api yang Anda panggil tidak memiliki Access-Control-Allow-Origin untuk domain Anda (localhost). Coba buat proxy Anda sendiri, kirim req ke proxy dan teruskan permintaan ke tujuan Anda. Karena ini akan menjadi komunikasi server ke server, permintaan tidak akan diblokir (CORS diblokir oleh browser). Kirim kembali respons ini dengan header allow-origin diatur ke semua
sss999
@HaritVishwakarma dan NitinWahale dan pengembang masa depan Anda dapat menonaktifkan keamanan web di browser lokal Anda hanya untuk tujuan pengujian - ini tidak akan berfungsi sebagai solusi produksi. Ref di sini: 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
sumber
8

Saya pikir tambahkan if (this.readyState == 4 && this.status == 200) untuk menunggu lebih baik:

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
sumber
Itu tidak akan berfungsi jika klien dan API tidak berada di domain yang sama, bukan?
David Brossard
0

Sebelum kami mencoba meletakkan apa pun di ujung depan situs web, mari kita buka koneksi API. Kami akan melakukannya menggunakan objek XMLHttpRequest, yang merupakan cara untuk membuka file dan membuat permintaan HTTP.

Kami akan membuat variabel permintaan dan menetapkan objek XMLHttpRequest baru untuknya. Kemudian kami akan membuka koneksi baru dengan metode open () - dalam argumen kami akan menentukan jenis permintaan sebagai GET serta URL titik akhir API. Permintaan selesai dan kami dapat mengakses data di dalam fungsi onload. Setelah selesai, kami akan mengirimkan permintaan.
// Buat variabel permintaan dan tetapkan objek XMLHttpRequest baru untuknya. var request = XMLHttpRequest baru ()

// 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
sumber
1
Jawaban serupa telah diberikan sebelumnya. Mengapa Anda menambahkan jawaban Anda? Deskripsi singkat mungkin membantu
slfan
-1

Cara biasa adalah menggunakan PHP dan ajax. Tetapi untuk kebutuhan Anda, di bawah ini akan berfungsi dengan baik.

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

sumber