如何使用 ajax javascript 调用服务？

Question

I'm learning programing, could you explain me how to call a service using ajax javascript?

Service information:

• Service type: REST
• Basic authentication
• Estructure: Application/JSON
• Url: https://osb.urosario.edu.co/uxxi-URO/WsFotografias/proxy/AdministradorFotografiasJsonPS/fotos/consultar
• User: Admi
• Password: admi
• Parameter JSON example: {"identificacion":["98122811999"]}

I've tested this service in postman

Service answer:

{
    "respuesta": [
        {
            "estado": "Correcto.",
            "identificacion": "98122811999",
            "imagen": "return string Base 64 format"
        }
    ]
}

Answer 1

Using JQuery:

 $.ajax({ type: 'POST', url: 'https://osb.urosario.edu.co/uxxi-URO/WsFotografias/proxy/AdministradorFotografiasJsonPS/fotos/consultar', dataType: 'json', data:{"identificacion":["98122811999"]} contentType: "application/json" beforeSend: function (xhr) { xhr.setRequestHeader('Authorization', make_base_auth("admi", "admi")); }, success: function (data,status) { //do what you want with the data after success //in this example the response will be promoted in the browser console console.log(data); }); }); function make_base_auth(user, password) { var tok = user + ':' + password; var hash = btoa(tok); return 'Basic ' + hash; }

Answer 2

You can call your above RestEndpoint using below:

xmlhttp.open("POST", "/EndpointURI", true);
 
xmlhttp.onreadystatechange = function() 
{
    if (this.readyState == 4 && this.status == 200) 
    {
        //Use parse() method to convert JSON string to JSON object
        var responseJsonObj = JSON.parse(this.responseText);
 
        //use response
    }
};
 
var jsonData = {"name" : "yourData"};
xmlhttp.send( JSON.stringify( jsonData ) ); 

For Authentication use this:

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://EndPointURI", true);
xhr.withCredentials = true;
xhr.setRequestHeader("Authorization", 'Basic ' + btoa('userName:password'));
xhr.onload = function () {
    console.log(xhr.responseText);
};
xhr.send();

For authentication part, use JQuery then it will easy for the implementation and as well for understanding. as now aday no body use basic xmlhttp for calling api in javascript, last time i used was a 2003 developed application.