Ir para o conteúdo principal

Fazer solicitações a servidores ou sites externos

Forma de invocar a função loadExternalAjax()A função descrita a seguir será útil para fazer solicitações a seus servidores ou a sites externos que o permitam e obter as informações necessárias para implementá-las.

Essa função pode ser implementada nos JavaScripts personalizados que foram utilizados na personalização das plataformas, para que a solicitação possa ser invocada automaticamente e manipular os dados da plataforma com o que foi obtido

Existem 2 formas de mostrar as informações obtidas por meio da função; seja de forma flutuante através de: 'Modal' ou exibindo na barra lateral da plataforma: 'Sidebar'

Modal:
api_ajaxExterno1.jpg

Exemplo do modal onde será mostrado o resultado da solicitação AJAX externa.

Observações: O retângulo VERMELHO marca o título do modal, o retângulo AZUL indica o 'body' do modal, onde se pode inserir HTML que venha da solicitação ou que seja indicado nos argumentos ao chamar a função. O retângulo LARANJA indica o 'footer' do modal, que pode ser editado e modificado com as informações obtidas pela solicitação

Sidebar:

api_ajaxExterno2.jpg

Exemplo do sidebar que aparece na plataforma onde será mostrado o resultado da solicitação AJAX externa.

Observações: O retângulo AZUL indica o 'body' do sidebar, onde se pode inserir HTML que venha da solicitação ou que seja indicado nos argumentos ao chamar a função. O retângulo LARANJA indica o 'footer' do sidebar, que pode ser editado e modificado com as informações obtidas pela solicitação

Forma de invocar a função loadExternalAjax()

Para poder invocar a função, deve-se chamar a variável global que já está habilitada 'customPlaform' e, em seguida, acessar seu atributo/função 'loadExternalAjax', a qual recebe como argumentos certos parâmetros para seu correto funcionamento.

NOTA: Esta função é assíncrona e possui uma promessa de retorno, portanto, é possível usar '.then(function(response){})' para realizar a manipulação do DOM tanto do 'modal' quanto do 'sidebar' com base nos dados obtidos desta solicitação.

OBSERVAÇÃO: Tanto o 'modal' quanto o 'sidebar' compartilham o mesmo DOM, que pode ser personalizado, e sua estrutura é a que está mostrada a seguir; para inserir dados em cada seção, simplesmente aponte para os 'ID' de cada elemento genérico.

ADVERTÊNCIA: Para realizar solicitações a sites externos, deve-se ter habilitado o CORS 'Access-Control-Allow-Origin' em seu servidor; caso contrário, as solicitações serão rejeitadas e nenhuma informação será exibida.

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

Exemplo passo a passo

1. Primeiro, definimos o objeto com os argumentos necessários para a solicitação

NOTA: Se você colocar o 'dataType', lembre-se de tratar o 'response' de acordo com o formato especificado e conforme configurou a resposta em seu servidor; se, por outro lado, não for colocado nenhum e for omitido, o response sempre chegará em formato 'Texto', portanto, você deverá tratar essa string posteriormente de acordo com suas necessidades

let argumentos = {
  url: 'https://plataforma.service24gps.com/loadExternalAjaxHTML.php', // URL para a qual a solicitação será feita (OBRIGATÓRIO).
  type: 'GET', // Tipo de solicitação: GET / POST (OBRIGATÓRIO)
  dataType: 'JSON', //O tipo de dado de retorno da solicitação por DEFAULT é 'JSON' (opcional). Ex.: 'html', 'JSON', etc.
  data: {}, // OBJETO com os dados necessários para a solicitação, Ex.: {'apiKey':123456789,'token':AbcDeF123456789}; por DEFAULT é {} (opcional)
  target: 'sidebar', // String de como se deseja mostrar os dados, seja em 'modal' ou 'sidebar', são as únicas opções; por DEFAULT é 'modal' (opcional)
  async: false, //booleano que indica se a solicitação AJAX será assíncrona ou não; por DEFAULT é false (opcional)
  title: 'Título de la Ventana del Modal', //Título do Modal que deseja que apareça, não se aplica para 'sidebar'; se não colocar, por DEFAULT é 'Visualizador'.
  innerHtml: '<b>PRUEBA HTML</b>', //HTML que deve ser carregado primeiro no 'body', tanto no 'modal' quanto no 'sidebar'; isso é útil se você tiver seu próprio HTML que deseja manipular assim que a solicitação for concluída e entrar na seção do 'THEN()'; por DEFAULT não é inserido nenhum HTML (opcional).
heigthModal: '570', // Altura do 'modal' em pixels, não se aplica para o 'sidebar'; por DEFAULT é '570' (opcional).
  widthModal: '60%', //Largura do 'modal' em porcentagem, não se aplica para o 'sidebar'; por DEFAULT é '60%' (opcional)

2. Chamar a função

customPlaform.loadExternalAjax(argumentos).then(function (response) {
  //AQUI VAI O CÓDIGO A SER EXECUTADO APÓS A SOLICITAÇÃO.
})

3. Dentro da seção do 'then()', você pode colocar qualquer código JS para manipular o DOM do 'modal' ou do 'sidebar' com as informações recebidas em 'response

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

4. Por último, uma vez que a função esteja montada, você pode implementá-la em 'Plataformas Personalizadas', na seção 'Cliente' em 'JavaScript Personalizado', para que seja executada automaticamente toda vez que a plataforma iniciar.

Aqui deixamos o exemplo de código completo. Para testá-lo, basta colá-lo no console.

NOTA: Neste exemplo, contém um setTimeout para evitar que, ao carregar a plataforma, ele 'sobreponha'

//EXEMPLOS

//HTML
setTimeout(() => {
  let argumentos = {
    url: 'https://plataforma.service24gps.com/loadExternalAjaxHTML.php',
    type: 'GET',
    data: {},
    target: 'modal',
    async: false,
    title: 'Título da Janela do Modal.',
    innerHtml: '<b>PRUEBA HTML</b>',
    heigthModal: '570',
    widthModal: '60%',
  }
  customPlaform.loadExternalAjax(argumentos).then(function (res) {
    $('#bodyResult').append(res);//ESPECIFICA-SE QUE O QUE SE ESPERA RECEBER COMO RESPOSTA DO SERVIDOR É UM JSON PARA AUTOTRANSFORMAR O TIPO DE DADO.
  })
}, 5000);

//JSON
setTimeout(() => {
  let argumentos = {
    url: 'https://plataforma.service24gps.com/loadExternalAjaxJSON.php',
    type: 'GET',
    dataType: 'JSON',//ESPECIFICA-SE QUE O QUE SE ESPERA RECEBER COMO RESPOSTA DO SERVIDOR É UM JSON PARA AUTOTRANSFORMAR O TIPO DE DADO.
    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);//NESTE CASO, COMO O SERVIDOR RETORNA UM OBJETO COM A CHAVE 'msg' ONDE VEM O HTML COMO STRING, PROCEDE-SE A ACESSÁ-LA PARA INSERIR NO DOM.
  })
}, 5000);

Assim, o código seria adicionado na implementação do JavaScript personalizado na personalização das plataformas

javascrip.png

Exemplo de um arquivo PHP para ser configurado em seu servidor e aceitar solicitações externas

Lembre-se de que esses cabeçalhos são importantes para serem configurados a fim de realizar as solicitações ao seu servidor corretamente.

//EXEMPLOS
<?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 É simplesmente o texto de preenchimento das imprensas e arquivos de texto. Lorem Ipsum tem sido o texto padrão de preenchimento das indústrias desde o ano 1500, quando um impressor (Nota do tradutor: pessoa que se dedica à impressão) desconhecido usou uma galeria de textos e os misturou de tal forma que conseguiu fazer um livro de textos modelo. Não só sobreviveu 500 anos, mas também se tornou um texto de preenchimento em documentos eletrônicos, permanecendo essencialmente igual ao original. Foi popularizado nos anos 60 com a criação das folhas 'Letraset', que continham trechos de Lorem Ipsum, e mais recentemente com softwares de autoedição, como por exemplo o Aldus PageMaker, que inclui versões de Lorem Ipsum
    </div>
  </body>
</html>
 
Voltar ao topo