जावास्क्रिप्ट से REST वेब सेवा एपीआई कैसे कॉल करें?

Question

मेरे पास एक HTML पेज है जिस पर एक बटन है। जब मैं उस बटन पर क्लिक करता हूं, तो मुझे REST वेब सेवा API को कॉल करना होगा। मैंने हर जगह ऑनलाइन सर्च करने की कोशिश की। कोई सुराग नहीं। क्या कोई मुझे इस पर लीड / हेडस्टार्ट दे सकता है? बहुत ज्यादा अधिमूल्यित।

Comments

REST सेवा पर आपका कॉल सर्वर के लिए केवल एक अनुरोध है, मुझे लगता है कि यह एक अजाक्स अनुरोध है। उदाहरण के लिए jQuery का प्रयोग करें api.jquery.com/jquery.ajax

— ikos23

Answer 1

मुझे आश्चर्य है कि किसी ने भी नई Fetch API का उल्लेख नहीं किया है, लेखन के समय IE11 को छोड़कर सभी ब्राउज़रों द्वारा समर्थित है। यह XMLHttpRequest सिंटैक्स को सरल करता है जिसे आप कई अन्य उदाहरणों में देखते हैं।

एपीआई में बहुत अधिक शामिल हैं , लेकिन fetch()विधि के साथ शुरू करें । इसमें दो तर्क दिए गए हैं:

1. अनुरोध का प्रतिनिधित्व करने वाला URL या ऑब्जेक्ट।
2. वैकल्पिक init ऑब्जेक्ट जिसमें विधि, हेडर, बॉडी आदि हैं।

सरल लाभ:

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
}

पिछले शीर्ष उत्तर को फिर से बनाना , एक पोस्ट:

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
}

Comments

बटन समाधान इस समाधान के साथ कैसा दिखता है?

— अस्माइर

DELETE और PUT के बारे में क्या?

— Krzysztof

@asmaier क्या आपको इस बात पर जवाब मिला कि बटन कार्रवाई कैसे दिखेगी? धन्यवाद

— एन्जिल Esguerra

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

— ब्रेंडन मैकगिल

Answer 2

आपकी जावास्क्रिप्ट:

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

आपका बटन कार्रवाई ::

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

अधिक जानकारी के लिए निम्न लिंक पर जाएं (अपडेट किया गया 2017/01/11)

Comments

मुख्य थ्रेड पर सिंक्रोनस XMLHttpRequest अंत उपयोगकर्ता के अनुभव के लिए हानिकारक प्रभावों के कारण हटा दिया गया है। अधिक मदद के लिए xhr.spec.whatwg.org

— jeet.chanchawat

चूंकि आप एक सिंक्रनाइज़ कॉल कर रहे हैं, आपको कॉल करने की आवश्यकता है xhttp.open("POST", "Your Rest URL Here", false);, अन्यथा xhttp.responseText में परिणाम नहीं होगा। लेकिन जैसा कि पहले कहा गया था, इसे जल्द ही हटा दिया जाएगा।

— एलेक्जेंडर फेनियो

यदि यह एक POST अनुरोध है, तो आप वास्तव में डेटा कहां पोस्ट कर रहे हैं?

— ईएफसी

" xhttp.setRequestHeader("Content-type", "application/json");" - यह एक झूठ है। आप किसी भी JSON को send()विधि से पास नहीं कर रहे हैं ।

— क्वेंटिन

आपने इस कोड को संपादित कर लिया है, इसलिए अनुरोध अब समवर्ती नहीं है, लेकिन आप प्रतिक्रिया को पढ़ने की कोशिश कर रहे हैं जैसे कि यह था।

— क्वेंटिन

Answer 3

यहाँ 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>

Comments

क्या आपने किसी भी क्रॉस डोमेन समस्या का सामना नहीं किया? मैं लोकलहोस्ट से कहीं और होस्ट किए गए एप को कॉल कर रहा हूं और यह क्रॉस डोमेन इश्यू दे रहा है।

— हरित विश्वकर्मा

मैं भी एक ही cors मुद्दे का सामना कर रहा हूँ..प्लस मदद

— नितिन वहीले

@HaritVishwakarma - यदि आप जिस एप को कॉल कर रहे हैं वह आपके डोमेन (लोकलहोस्ट) के लिए एक्सेस-कंट्रोल-अनुमति-मूल नहीं है। अपना खुद का प्रॉक्सी बनाने की कोशिश करें, प्रॉक्सी को रीक भेजें और अपने गंतव्य के लिए अनुरोध भेजें। चूँकि यह एक सर्वर से सर्वर संचार होगा, इसलिए अभ्यस्त को अवरुद्ध नहीं किया जाएगा (CORS को ब्राउज़रों द्वारा अवरोधित किया गया है)। अनुमति-मूल शीर्षलेख के साथ इस प्रतिक्रिया को सभी को भेजें

— sss999

@HaritVishwakarma और NitinWahale और भविष्य के देवता आप अपने स्थानीय ब्राउज़र पर वेब सुरक्षा को केवल परीक्षण उद्देश्यों के लिए अक्षम कर सकते हैं - यह उत्पादन समाधान के रूप में काम नहीं करेगा। यहां देखें: stackoverflow.com/questions/3102819/…

— केडीटी

Answer 4

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

Answer 5

मुझे लगता है कि जोड़ने के लिए अगर (this.readyState == 4 && this.status == 200) प्रतीक्षा करना बेहतर है:

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();

Comments

अगर क्लाइंट और एपीआई एक ही डोमेन में नहीं हैं, तो काम नहीं करेगा?

— डेविड ब्रॉस्वर्ड

Answer 6

इससे पहले कि हम वेबसाइट के सामने के छोर पर कुछ भी डालने की कोशिश करें, आइए एक कनेक्शन खोलें। हम XMLHttpRequest ऑब्जेक्ट का उपयोग करके ऐसा करेंगे, जो फ़ाइलों को खोलने और HTTP अनुरोध करने का एक तरीका है।

हम एक अनुरोध चर बनाएंगे और इसे एक नया XMLHttpRequest ऑब्जेक्ट असाइन करेंगे। फिर हम खुले () विधि के साथ एक नया कनेक्शन खोलेंगे - तर्कों में हम GET के साथ-साथ एपीआई एंडपॉइंट के URL के प्रकार का अनुरोध करेंगे। अनुरोध पूरा हो गया है और हम ऑनलोड फ़ंक्शन के अंदर डेटा तक पहुंच सकते हैं। जब हम काम पूरा कर लेंगे, हम अनुरोध भेज देंगे।
// एक अनुरोध चर बनाएं और इसे एक नया XMLHttpRequest ऑब्जेक्ट असाइन करें। var अनुरोध = नया 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()

Comments

इसी तरह के जवाब पहले भी दिए गए हैं। आपने अपना उत्तर क्यों जोड़ा? एक संक्षिप्त विवरण मदद कर सकता है

— 6

Answer 7

सामान्य तरीका PHP और AJAX के साथ जाना है। लेकिन आपकी आवश्यकता के लिए, नीचे ठीक काम करेगा।

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