কীভাবে জাভাস্ক্রিপ্ট থেকে একটি আরএসটি ওয়েব পরিষেবা এপিআই কল করবেন?

Question

আমার একটি HTML পৃষ্ঠা রয়েছে যার উপর একটি বোতাম রয়েছে। আমি যখন সেই বোতামটি ক্লিক করি তখন আমাকে একটি রেস্ট ওয়েব সার্ভিস এপিআই কল করতে হবে। আমি সর্বত্র অনলাইন অনুসন্ধান করার চেষ্টা করেছি। যাই হোক না কেন কোন ক্লু। কেউ কি আমাকে এই বিষয়ে নেতৃত্ব দিতে পারে? খুব বেশি প্রশংশিত.

Comments

REST পরিষেবাদিতে আপনার কলটি সার্ভারের কাছে কেবল একটি অনুরোধ, আমার ধারণা এটি একটি এজাক্স অনুরোধ হবে। উদাহরণস্বরূপ jQuery ব্যবহার করুন api.jquery.com/jquery.ajax

— ikos23

Answer 1

আমি আশ্চর্য হয়েছি লেখার সময় IE11 ব্যতীত অন্য সকল ব্রাউজার দ্বারা সমর্থিত নতুন ফেচ এপিআই'র কথা কেউ উল্লেখ করেনি। এটি অন্যান্য অন্যান্য উদাহরণের মধ্যে আপনি দেখতে পান XMLHttpRequest বাক্য গঠনটি সহজ করে।

এপিআইতে আরও অনেক কিছু অন্তর্ভুক্ত থাকে তবে fetch()পদ্ধতিটি দিয়ে শুরু করুন । এটি দুটি যুক্তি লাগে:

1. একটি ইউআরএল বা অনুরোধ প্রতিনিধিত্বকারী একটি বস্তু।
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

এই সমাধানটির সাথে বোতামের ক্রিয়াটি কেমন দেখাচ্ছে?

— asmaier

ডিলেট এবং পুট সম্পর্কে কী?

— ক্রিজিসটফ

@ এসমায়ার আপনি কীভাবে বোতামটির ক্রিয়াটি দেখতে পাবেন তার একটি উত্তর পেয়েছেন? ধন্যবাদ

— অ্যাঞ্জেল এসগুয়েরা

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

মূল থ্রেডের সিঙ্ক্রোনাস এক্সএমএলএইচটিপিআরকেস্টটি শেষ ব্যবহারকারীর অভিজ্ঞতার ক্ষতিকারক প্রভাবের কারণে হ্রাস পেয়েছে। আরও সহায়তার জন্য xhr.spec.whatwg.org

— jeet.chanchawat

যেহেতু আপনি একটি সিঙ্ক্রোনাইজড কল করছেন, আপনার কল করা দরকার xhttp.open("POST", "Your Rest URL Here", false);, অন্যথায় xhttp.responseText এর ফলাফল থাকবে না। তবে পূর্বে যেমন বলা হয়েছে, তা শীঘ্রই হ্রাস করা হবে।

— আলেকজান্দ্রে ফেনিয়ো

যদি এটি কোনও পোস্টের অনুরোধ হয় তবে আপনি কোথায় ডেটা পোস্ট করছেন?

— ইএফসি

" xhttp.setRequestHeader("Content-type", "application/json");" - এই একটি মিথ্যা। আপনি send()পদ্ধতিতে কোনও JSON পাস করছেন না ।

— কোয়ান্টিন

আপনি এই কোডটি সম্পাদনা করেছেন তাই অনুরোধটি আর সিঙ্ক্রোনাস নয়, তবে আপনি প্রতিক্রিয়াটি এমনভাবে পড়ার চেষ্টা করছেন যেন তা ছিল।

— কোয়ান্টিন

Answer 3

এখানে json ব্যবহার করে প্রমাণীকরণ সহ আরও একটি জাভাস্ক্রিপ্ট REST এপিআই কল রয়েছে:

<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

আপনি কোনও ক্রস ডোমেন সমস্যার সম্মুখীন হন নি? আমি লোকালহোস্ট থেকে অন্য কোথাও নিমন্ত্রিত একটি এপিআই ডাকছি এবং এটি ক্রস ডোমেনের সমস্যা দিচ্ছে।

— হরিত বিশ্বকর্মা

আমিও একই কর্স ইস্যুতে মুখোমুখি আছি..প্লিজ সহায়তা

— নিতিন ওয়াহাল

@ হরিত বিশ্বকর্মা - এটি আপনি যদি ডেকেছেন যে এপি আপনার ডোমেনের (লোকালহোস্ট) অ্যাক্সেস-কন্ট্রোল-মঞ্জুরি-অরিজিন না রাখে তা হবে। আপনার নিজস্ব প্রক্সি তৈরি করার চেষ্টা করুন, প্রক্সিটিতে রেক প্রেরণ করুন এবং অনুরোধটি আপনার গন্তব্যে প্রেরণ করুন। যেহেতু এটি সার্ভার যোগাযোগের জন্য একটি সার্ভার হবে, তাই অনুরোধটি ব্লক করা হবে না (ব্রাউজারগুলির দ্বারা সিওআরএস অবরুদ্ধ করা হয়েছে)। সকলকে অনুমতি-উত্স শিরোনাম সেট সহ এই প্রতিক্রিয়াটি ফেরত পাঠান

— sss999

@ হারিত বিশ্বকর্মা এবং নিতিনওয়াহাল এবং ভবিষ্যতের ডেভস আপনি কেবলমাত্র পরীক্ষার উদ্দেশ্যে আপনার স্থানীয় ব্রাউজারে ওয়েব সুরক্ষা অক্ষম করতে পারবেন - এটি উত্পাদন সমাধান হিসাবে কাজ করবে না। এখানে রেফ করুন: স্ট্যাকওভারফ্লো.com

— প্রশ্নগুলি

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

আমি মনে করি অপেক্ষা করার জন্য (এটি.ডিয়ারস্টেট == 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

ওয়েবসাইটের সামনের প্রান্তে আমরা কিছু রাখার চেষ্টা করার আগে, API একটি সংযোগ খুলুন। আমরা XMLHttpRequest অবজেক্ট ব্যবহার করে এটি করব, যা ফাইলগুলি খোলার এবং এইচটিটিপি অনুরোধ করার একটি উপায়।

আমরা একটি অনুরোধ ভেরিয়েবল তৈরি করব এবং এটিতে একটি নতুন এক্সএমএলএইচটিপিআরকিউয়েস্ট অবজেক্ট বরাদ্দ করব। তারপরে আমরা ওপেন () পদ্ধতির সাথে একটি নতুন সংযোগটি খুলব - আর্গুমেন্টগুলিতে আমরা অনুরোধের প্রকারটি GET হিসাবে পাশাপাশি API এর শেষ পয়েন্টের URL নির্দিষ্ট করব। অনুরোধটি সম্পূর্ণ হয়ে যায় এবং আমরা লোড ফাংশনের অভ্যন্তরে ডেটা অ্যাক্সেস করতে পারি। আমাদের হয়ে গেলে, আমরা অনুরোধটি প্রেরণ করব।
// একটি অনুরোধ ভেরিয়েবল তৈরি করুন এবং এটিতে একটি নতুন এক্সএমএলএইচটিপিআরকিউয়েস্ট অবজেক্ট বরাদ্দ করুন। var অনুরোধ = নতুন এক্সএমএলএইচটিএইচপিআরপিওয়েস্ট ()

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

অনুরূপ উত্তর আগেও দেওয়া হয়েছে। আপনি কেন আপনার উত্তর যুক্ত করলেন? একটি সংক্ষিপ্ত বিবরণ সাহায্য করতে পারে

— slpan

Answer 7

সাধারন উপায় হল পিএইচপি এবং এজ্যাক্স সহ। তবে আপনার প্রয়োজনের জন্য, নীচে ঠিকঠাক কাজ করবে।

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