Cinque Terre

Saltar la navegación

Contenido 1: Versión del API de Murachí

Objetivos

Esta sección tiene como objetivo realizar un primera interacción con el sistema Murachí, muestra la forma en que se consume el servicio: Versión del API Murachí.

Conocimiento previo

  • Manejo de protocolo web
  • Nociones básicas de programación
  • Programación web

Para los ejercicios se necesita una series de paquetes de javascript y lo pueden descargar en el siguiente enlace:  Paquetes disponibles

Actividad

1.- Versión del API de Murachí

El primer ejercicio a realizar es consultar la versión del sistema Murachí.

Para esto, se necesita tener instalado el servidor WEB  Apache y disponer del paquete “jquery.min.js” ya que se va a trabajar con el método $.ajax.

En este ejercicio se genera en HTML un formulario que contenga un botón tipo Submit que llama a una función javascript donde, a través del método $.ajax se realiza el consumo del servicio versión del API de Murachí.


Para el método $.ajax vamos a usar dos propiedades esenciales y obligatorias para cada una de las peticiones que se van a realizar:

  •     xhrFields: {withCredentials: true} esta característica puede usarse para establecer la propiedad de 'withCredentials'. Si se establece TRUE permite que se pase los cookies al servidor y permitir solicitudes de dominios cruzados.
  •     headers: {"Authorization":"Basic YWRtaW46YWRtaW4="} autenticación básica HTTP

Característica del formulario HTML

Control:

  • Botón de envío (Submit button)

Atributos:

  • action: función de javaScript que procesa el formulario

Código del formulario HTML

<form enctype="multipart/form-data" action="javaScript:version_Murachi()" method="post" id="version" name="Version">
    <h2>Version de Murach&iacute;</h2>
    <br>
    <button type="submit" class="btn btn-primary">Enviar</button>
    <br>
    <div id="respuesta"> </div>
</form>

El elemento <div> del formulario con id = "respuesta" se utiliza para presentar el resultado luego de procesar el formulario (consumo del servicio a Murachí)

Función javaScript version_Murachi()

Se utiliza el método $ajax para realizar la petición al servicio Murachí

Opciones de configuración de la petición:

  • ulr: Establece la URL en donde se realiza la petición, para esta actividad es "https://murachi.cenditel.gob.ve/Murachi/0.1/archivos/version"
  • type: Establece el tipo de petición, para esta actividad vamos a utilizar "GET"
  • contentType: Establece el tipo de codificación que se va a utilziar, para esta actividad es "application/json"
  • xhrFields y headers: ya indicado al principio de esta sección

Código de la función javaScript "version_Murachi"

function version_Murachi() {

    $.ajax({
        url: "https://murachi.cenditel.gob.ve/Murachi/0.1/archivos/version",
        type: "GET",
        contentType: 'application/json',
        xhrFields: {withCredentials: true},
        headers: {"Authorization":"Basic YWRtaW46YWRtaW4="},
    }).done(function(response) {
        var responseString = JSON.stringify(response);
        document.getElementById("respuesta").innerHTML = responseString;
    });
}
</script>

La repuesta a la solicitud se procesa por el método .done a través del argumento response donde podemos acceder al valor del JSON con la función JSON.stringify

A continuación se muestra el código completo de la página HTML de esta actividad

Código de la página HTML

<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">

function version_Murachi() {

    $.ajax({
        url: "https://murachi.cenditel.gob.ve/Murachi/0.1/archivos/version",
        type: "GET",
        contentType: 'application/json',
        xhrFields: {withCredentials: true},
        headers: {"Authorization":"Basic YWRtaW46YWRtaW4="},
    }).done(function(response) {
        var responseString = JSON.stringify(response);
        document.getElementById("respuesta").innerHTML = responseString;
    });
}
</script>
</head>
<body>
<form enctype="multipart/form-data" action="javaScript:version_Murachi()" method="post" id="version" name="Version">
    <h2>Version de Murach&iacute;</h2>
    <br>
    <button type="submit" class="btn btn-primary">Enviar</button>
    <br>
    <div id="respuesta"> </div>
</form>
</body>
</html>

La respuesta del sistema Murachí indica la versión del API en un Json

Ejemplo: {"murachiVersion":"0.1.0"}

Puede descargar el código del siguiente enlace: VersionApiMurachi.html

Obra Publicada con Licencia Creative Commons Reconocimiento – No Comercial – Compartir Igual – 3.0 Venezuela (https://creativecommons.org/licenses/by-nc-sa/3.0/ve/deed.es_ES)

Material Educativo basado en los resultados del proceso de investigación y desarrollo del Proyecto Seguridad Informática de la Fundación Centro Nacional de Desarrollo e Investigación en Tecnologías Libres (CENDITEL), ente adscrito al Ministerio del Poder para Educación Universitaria, Ciencia y Tecnología, ubicada en Mérida – Venezuela.