from - ¿Cómo llamar a una API de servicio web REST desde JavaScript?
rest api from javascript (7)
Antes de intentar poner algo en el front-end del sitio web, abramos una conexión a la API. Lo haremos utilizando objetos XMLHttpRequest, que es una forma de abrir archivos y realizar una solicitud HTTP.
Crearemos una variable de solicitud y le asignaremos un nuevo objeto XMLHttpRequest.
Luego, abriremos una nueva conexión con el método open (); en los argumentos especificaremos el tipo de solicitud como GET, así como la URL del punto final de la API.
La solicitud se completa y podemos acceder a los datos dentro de la función de carga.
Cuando hayamos terminado, le enviaremos la solicitud.
// Cree una variable de solicitud y asígnele un nuevo objeto 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()
Tengo una página HTML con un botón. Cuando hago clic en ese botón, necesito llamar a una API de servicio web REST. Intenté buscar en línea en todas partes. No tengo idea alguna. ¿Alguien me puede dar una pista / Headstart sobre esto? Muy apreciado.
Aquí hay otra llamada API REST de Javascript con autenticación usando 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>
Creo que agregar if (this.readyState == 4 && this.status == 200) para esperar es mejor:
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();
La forma habitual es ir con PHP y ajax. Pero para su requerimiento, a continuación funcionará bien.
<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>
Me sorprende que nadie haya mencionado la nueva API Fetch, compatible con todos los navegadores, excepto IE11 en el momento de la escritura. Simplifica la sintaxis XMLHttpRequest que ve en muchos de los otros ejemplos.
La API incluye
mucho más
, pero comienza con el método
fetch()
.
Se necesitan dos argumentos:
- Una URL o un objeto que representa la solicitud.
- Objeto init opcional que contiene el método, encabezados, cuerpo, etc.
OBTENER simple:
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
}
Recreando la respuesta superior anterior, una 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
}
Su 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");
}
Su acción del botón ::
<button type="submit" onclick="UserAction()">Search</button>
Para obtener más información, visite el siguiente link (Actualizado 2017/01/11)
$("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);
}
});
});