JavaScript'ten bir REST web hizmeti API'sini nasıl çağırırım?

167

Üzerinde bir düğme bulunan bir HTML sayfam var. Bu düğmeyi tıkladığımda bir REST Web Hizmeti API'sını çağırmam gerekiyor. Her yerde çevrimiçi arama yapmayı denedim. Hiçbir ipucu yok. Birisi bana bu konuda yol gösterebilir mi? Çok müteşekkirim.

— Shaik Syed Ali
kaynak

REST servisine yaptığınız çağrı sadece sunucuya bir istek, sanırım bu bir ajax isteği olacak. Örneğin jQuery kullanın api.jquery.com/jquery.ajax

— ikos23

176

Kimse yazma sırasında IE11 hariç tüm tarayıcılar tarafından desteklenen yeni Fetch API, bahsetmedi şaşırdım. Diğer örneklerin çoğunda gördüğünüz XMLHttpRequest sözdizimini basitleştirir.

API çok daha fazlasını içerir , ancak fetch()yöntemle başlayın . İki argüman alır:

İsteği temsil eden bir URL veya nesne.
Yöntemi, başlıkları, gövdeyi vb. İçeren isteğe bağlı init nesnesi.

Basit ALIN:

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
}

Bir önceki üst cevabı yeniden yaratan bir 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
kaynak

2

Düğme çözümü bu çözümle nasıl görünüyor?

— asmaier

3

DELETE ve PUT ne olacak?

— Krzysztof

2

@asmaier, düğme işleminin nasıl görüneceğine dair bir cevap aldınız mı? Teşekkürler

— Angel Esguerra

1

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

— Brendan McGill

105

Javascriptiniz:

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

Düğme eyleminiz ::

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

Daha fazla bilgi için aşağıdaki bağlantıyı inceleyin (Güncellendi 2017/01/11)

— Abhishek
kaynak

19

Ana iş parçasındaki zaman uyumlu XMLHttpRequest, son kullanıcının deneyimine zararlı etkileri nedeniyle kullanımdan kaldırılmıştır. Daha fazla yardım için xhr.spec.whatwg.org

— jeet.chanchawat

Senkronize bir çağrı yaptığınızdan, aramanız gerekir xhttp.open("POST", "Your Rest URL Here", false);, aksi takdirde xhttp.responseText sonucu içermez. Ancak daha önce de belirtildiği gibi, yakında kullanımdan kaldırılacak.

— Alexandre Fenyo

Bu bir POST isteğiyse, verileri gerçekte nereye gönderiyorsunuz?

— EFC

" xhttp.setRequestHeader("Content-type", "application/json");" - Bu bir yalan. send()Yönteme herhangi bir JSON iletmiyorsunuz .

— Quentin

Bu kodu, istek artık senkronize olmayacak şekilde düzenlediniz, ancak yanıtı sanki sanki okumaya çalışıyorsunuz.

— Quentin

17

İşte json kullanarak kimlik doğrulaması ile başka bir Javascript REST API çağrısı:

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

alanlar arası sorunlarla karşılaşmadınız mı? Localhost başka bir yerde barındırılan bir api çağırıyorum ve etki alanları arası sorunlar veriyor.

— Harit Vishwakarma

Ben de aynı cors sorunu ile karşı karşıya ... plz yardım

— Nitin Wahale

@HaritVishwakarma - Aradığınız api'de alan adınız için Access-Control-Allow-Origin yoksa (localhost) olacaktır. Kendi proxy'nizi oluşturmayı deneyin, proxy'ye req gönderin ve isteği hedefinize iletin. Bu sunucudan sunucuya iletişim olacağından, istek engellenmez (CORS tarayıcılar tarafından engellenir). Bu yanıtı, izin verilen başlangıç başlığı herkese ayarlanmış olarak geri gönderin

— sss999

@HaritVishwakarma ve NitinWahale ve gelecekteki geliştiriciler, yerel tarayıcınızda web güvenliğini yalnızca test amacıyla devre dışı bırakabilirsiniz - bu bir üretim çözümü olarak çalışmaz. Burada

— referans

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
kaynak

8

Ben beklemek (this.readyState == 4 && this.status == 200) beklemek daha iyi olduğunu düşünüyorum:

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
kaynak

İstemci ve API aynı alanda değilse bu işe yaramaz, değil mi?

— David Brossard

0

Web sitesinin ön ucuna herhangi bir şey koymaya çalışmadan önce, API'yı açalım. Bunu, dosyaları açmanın ve bir HTTP isteği yapmanın bir yolu olan XMLHttpRequest nesnelerini kullanarak yapacağız.

Bir istek değişkeni oluşturacağız ve ona yeni bir XMLHttpRequest nesnesi atayacağız. Ardından, open () yöntemiyle yeni bir bağlantı açacağız - argümanlarda istek türünü GET olarak ve API uç noktasının URL'sini belirteceğiz. İstek tamamlanır ve yükleme fonksiyonu içindeki verilere erişebiliriz. İşimiz bittiğinde, isteği göndeririz.
// Bir istek değişkeni oluşturun ve bu değişkene yeni bir XMLHttpRequest nesnesi atayın. var request = yeni 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
kaynak

1

Benzer cevaplar daha önce verilmiştir. Cevabınızı neden eklediniz? Kısa bir açıklama yardımcı olabilir

— slfan

-1

Her zamanki yol PHP ve ajax ile gitmektir. Ama ihtiyaçlarınız için, aşağıda iyi çalışacaktır.

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