loadExternalAjax()

La función que se describe a continuación le será útil para poder realizar peticiones a sus servidores o a sitios externos que lo permitan y poder obtener la información necesaria e implementarla.

Esta función puede ser implementada en los JavaScript personalizados que se implementaron en la personalización de plataformas para que de forma automática pueda ser invocada la solicitud y manipular los datos de la plataforma con lo obtenido.


Existen 2 formas de mostrar la información obtenida mediante la función; ya sea de forma flotante mediante: 'Modal' o mostrarlo en la barra lateral de la plataforma: 'Sidebar'

Modal:
api_ajaxExterno1.jpg

Ejemplo del modal donde se mostrara el resultado de la petición AJAX externa

Observaciones: El recuadro ROJO marca el título del modal, el recuadro AZUL indica el 'body' del modal donde se puede insertar HTML que llegue de la petición o que se indique en los argumentos al llamar la función, el recuadro NARANJA indica el 'footer' del modal que puede ser editado y modificado mediante la información que se traiga con la petición

Sidebar:

api_ajaxExterno2.jpg

Ejemplo del sidebar que sale en plataforma donde se mostrara el resultado de la petición AJAX externa

Observaciones: El recuadro AZUL indica el 'body' del sidebar donde se puede insertar HTML que llegue de la petición o que se indique en los argumentos al llamar la función, el recuadro NARANJA indica el 'footer' del sidebar que puede ser editado y modificado mediante la información que se traiga con la petición


Forma de invocar la función loadExternalAjax()

Para poder invocar la función debe mandar a llamar la variable global que ya se encuentra habilitada 'customPlaform' y enseguida acceder a su atributo/función 'loadExternalAjax', la cual recibe como argumentos ciertos parámetros para su correcto. funcionamiento.

NOTA: Esta función es asíncrona y posee una promesa de retorno por lo que es posible usar '.then(function(response){})' para poder realizar la manipulación del DOM tanto del 'modal' como del 'sidebar' en base a los datos que se obtengan de esta petición.

OBSERVACIÓN: Tanto el 'modal' como el 'sidebar' comparten el mismo DOM que puede ser personalizado y que su estructura es la que se muestra a continuación; para ingresar datos en cada sección simplemente apunte a los 'ID' de cada elemento genérico.

ADVERTENCIA: Para realizar peticiones a sitios externos debe tener habilitado el CORS 'Access-Control-Allow-Origin' en su servidor, de lo contrario, serán rechazadas las solicitudes y no se mostrará ninguna información.

<div id="bodyResult">
</div>
<div id="footerResult">
</div>

Ejemplo paso a paso

1. Definimos primero el objeto con los argumentos necesarios para la petición.

NOTA: Si se coloca el 'dataType' recuerde que debe tratar el 'response' según el formato especificado y conforme configuro la respuesta en su servidor; si por el contrario, no se coloca ninguno y se omite, el response siempre llegara en formato 'Texto', por lo que deberá tratar esa cadena posteriormente según sus necesidades

let argumentos = {
  url: 'https://plataforma.service24gps.com/loadExternalAjaxHTML.php', // URL a la que se va a solicitar la petición (OBLIGATORIO)
  type: 'GET', // Tipo de petición: GET / POST (OBLIGATORIO)
  dataType: 'JSON', //Tipo de dato de retorno de la petición por DEFAULT es 'JSON'(opcional). Ej.: 'html','JSON', etc.
  data: {}, // OBJETO con datos necesarios para la petición, Ej.: {'apiKey':123456789,'token':AbcDeF123456789}; por DEFAULT es {} (opcional)
  target: 'sidebar', // String de como se quiere mostrar la data, ya sea en 'modal' ó 'sidebar', son las únicas opciones; por DEFAULT es 'modal' (opcional)
  async: false, // booleano que iníca si la petición AJAX va a ser asíncrona o no; por DEFAULT es false (opcional)
  title: 'Título de la Ventana del Modal', // Título del Modal que quiera que aparezca, no aplica para 'sidebar', sino pone ninguno por DEFAULT es 'Visualizador'
  innerHtml: '<b>PRUEBA HTML</b>', //HTML que se debe cargar primero en el 'body' tanto en el 'modal' como en el 'sidebar'; esto es útil si tiene su propio HTML que quiere manipular una vez se complete la petición y entre en el apartado del 'THEN()'; por default no se inserta ningún HTML (opcional)
  heigthModal: '570', //Alto del 'modal' en pixeles, no aplica para el 'sidebar'; por DEFAULT es '570' (opcional)
  widthModal: '60%', //Ancho del 'modal' en porcentaje, no aplica para el 'sidebar'; por DEFAULT es '60%' (opcional)
}

2. Mandar a llamar la función:

customPlaform.loadExternalAjax(argumentos).then(function (response) {
  // AQUI VA EL CÓDIGO A EJECUTAR DESPUES DE LA PETICIÓN
})

3. Dentro del apartado del 'then()', se puede poner cualquier código js para manipular el DOM del 'modal' o 'sidebar' con la información recibida en 'response'

customPlaform.loadExternalAjax(argumentos).then(function (response) {
  $('#bodyResult').append('<div id="divTest">Prueba: ' + response.atributo + '</div>');
})

4. Por último, una vez ya armada la función, la puede implementar en 'Plataformas Personalizadas', en el apartado de 'Cliente' en 'JavaScript Personalizado' para que se ejecute automáticamente cada vez que inicie la plataforma

Aquí les dejamos el ejemplo de código completo. Para probarlo solo lo deben pegar en la consola.

NOTA: En este ejemplo contiene un setTimeout para evitar que al cargar la plataforma lo 'sobre escriba'.

//EJEMPLOS

//HTML
setTimeout(() => {
  let argumentos = {
    url: 'https://plataforma.service24gps.com/loadExternalAjaxHTML.php',
    type: 'GET',
    data: {},
    target: 'modal',
    async: false,
    title: 'Título de la Ventana del Modal',
    innerHtml: '<b>PRUEBA HTML</b>',
    heigthModal: '570',
    widthModal: '60%',
  }
  customPlaform.loadExternalAjax(argumentos).then(function (res) {
    $('#bodyResult').append(res);//EN ESTE CASO COMO EL SERVIDOR DEVUELVE TODA LA CADENA DEL HTML, NO ES NECESARIO ACCEDER A UN ELEMENTO, POR LO QUE DIRECTAMENTE SE INSERTA LA RESPUESTA AL DOM
  })
}, 5000);

//JSON
setTimeout(() => {
  let argumentos = {
    url: 'https://plataforma.service24gps.com/loadExternalAjaxJSON.php',
    type: 'GET',
    dataType: 'JSON',//SE ESPECIFICA QUE LO QUE ESPERA RECIBIR COMO RESPUESTA DEL SERVIDOR ES UN JSON PARA AUTO TRASNFORMAR EL TIPO DE DATO
    data: {},
    target: 'modal',
    async: false,
    title: 'Título de la Ventana del Modal',
    innerHtml: '<b>PRUEBA HTML</b>',
    heigthModal: '570',
    widthModal: '60%',
  }
  customPlaform.loadExternalAjax(argumentos).then(function (res) {
    $('#bodyResult').append(res.msg);//EN ESTE CASO COMO EL SERVIDOR DEVUELVE UN OBJETO CON LA LLAVE 'msg' DONDE VIENE EL HTML COMO CADENA, SE PROCEDE A ACCEDER A ELLA PARA INSERTARLA EN EL DOM
  })
}, 5000);

Así se agregaría el código  en la implementación del Javascript personalizado en la personalización de plataformas.

api_ajaxExterno3.png


Ejemplo de un archivo PHP para ser configurado en su servidor y acepte peticiones externas

Recuerde que estos encabezados son importantes que se configuren para poder realizar las peticiones a su servidor correctamente

//EJEMPLO
<?php
  header('Access-Control-Allow-Origin: *');
  header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method");
  header("Access-Control-Allow-Methods: GET, POST");
  header("Allow: GET, POST");
  $method = $_SERVER['REQUEST_METHOD'];
  if($method == "OPTIONS") {
    die();
  }
?>
<html>
  <body>
  	<div>
  	Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
    </div>
  </body>
</html>