如何从JavaScript调用REST Web服务API？

Answers:

171

我很惊讶没有人提到新的Fetch API，在撰写本文时，除IE11之外，所有浏览器都支持该API。它简化了您在其他许多示例中看​​到的XMLHttpRequest语法。

该API包含更多内容，但从fetch()方法开始。它有两个参数：

  1. URL或代表请求的对象。
  2. 可选的初始化对象，包含方法，标头，正文等。

简单的GET：

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
}

重新创建先前的最高答案，即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
}
— 布伦丹·麦吉尔
source
2
此解决方案的按钮动作如何？
— asmaier
3
那DELETE和PUT呢？
— Krzysztof
2
@asmaier您是否对按钮操作的外观有答案？谢谢
— Angel Esguerra
1
button.addEventListener('click', userAction);或<button onclick="userAction()" />
— Brendan McGill
105

您的Javascript：

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）

— 阿比舍克
source
19
不赞成在主线程上使用同步XMLHttpRequest，因为它会对最终用户的体验产生不利影响。如需更多帮助，请xhr.spec.whatwg.org
— jeet.chanchawat
由于您正在进行同步调用，因此需要调用xhttp.open("POST", "Your Rest URL Here", false);，否则xhttp.responseText将不包含结果。但是如前所述，它将很快被弃用。
— 亚历山大·芬约
如果这是POST请求，那么您实际在哪里发布数据？
— EFC
” xhttp.setRequestHeader("Content-type", "application/json");“-这是个谎言。您没有向该send()方法传递任何JSON 。
— 昆汀
您已经编辑了此代码，因此请求不再是同步的，但是您试图像读取响应一样。
— 昆汀
17

这是另一个使用json进行身份验证的Javascript REST API调用：

<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>
— 用户名
source
您没有遇到任何跨域问题吗？我正在从本地主机调用托管在其他地方的api，它发出了跨域问题。
— 哈里特·威斯瓦卡玛
我也面临着同样的问题。.plz帮助
— Nitin Wahale，
@HaritVishwakarma-如果您正在调用的api没有针对您的域（本地主机）的Access-Control-Allow-Origin，它将执行此操作。尝试创建自己的代理，将请求发送到代理，然后将请求转发到目的地。由于这将是服务器到服务器的通信，因此不会阻止该请求（CORS被浏览器阻止）。发送此响应，并将allow-origin头设置为all
— sss999
@HaritVishwakarma和NitinWahale以及未来的开发人员，您只能出于测试目的而在本地浏览器上禁用网络安全性-但这不适用于生产解决方案。参考这里：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);
        }
      });
});
— ay
source
8

我认为添加if（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();
— 马丁王1985
source
如果客户端和API不在同一个域中，那将不起作用，对吗？
— 大卫·布罗萨德
0

在尝试将任何内容放置在网站的前端之前，我们先打开API的连接。我们将使用XMLHttpRequest对象这样做，这是一种打开文件并发出HTTP请求的方法。

我们将创建一个请求变量，并为其分配一个新的XMLHttpRequest对象。然后，我们将使用open（）方法打开一个新连接-在参数中，我们将请求的类型指定为GET以及API端点的URL。请求完成，我们可以访问onload函数中的数据。完成后，我们将发送请求。
//创建一个请求变量，并为其分配一个新的XMLHttpRequest对象。var request = new 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）
source
1
以前已经给出了类似的答案。为什么要添加答案？简短的描述可能会有所帮助
— slfan
-1

通常的方法是使用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>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.