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




html web-services (6)

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


मुझे आश्चर्य है कि किसी ने भी नई 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
}

सामान्य तरीका 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>

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

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

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

हम एक अनुरोध चर बनाएंगे और इसे एक नया XMLHttpRequest ऑब्जेक्ट असाइन करेंगे। फिर हम खुले () विधि के साथ एक नया कनेक्शन खोलेंगे - तर्कों में हम GET के साथ-साथ API समापन बिंदु के 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()

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

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>

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





web-services