Como fazer uma requisição SOAP em JavaScript

Neste artigo você vai aprender a como fazer uma requisição SOAP em JavaScript, vem conferir como isso é simples!

Fala programador(a), beleza? Bora aprender mais sobre JavaScript e SOAP!

Introdução

O protocolo SOAP (Simple Object Access Protocol) é um padrão para troca de informações estruturadas em XML (eXtensible Markup Language) entre aplicações web.

Embora o REST (Representational State Transfer) seja mais comum atualmente, muitos serviços ainda usam SOAP, principalmente aqueles desenvolvidos antes do advento das APIs RESTful.

Neste artigo, vamos explorar como fazer uma requisição SOAP em JavaScript para consumir dados de um serviço web baseado em SOAP.

Passo 1: Construir o envelope SOAP

Antes de fazer a requisição SOAP, você precisa criar um envelope SOAP, que é um documento XML que contém as informações necessárias para a requisição.

Aqui está um exemplo básico de um envelope SOAP:

<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:web="http://example.com/webservice">
   <soapenv:Header/>
   <soapenv:Body>
      <web:GetData>
         <web:param>example_parameter</web:param>
      </web:GetData>
   </soapenv:Body>
</soapenv:Envelope>

Neste exemplo, o envelope SOAP contém um único elemento <web:GetData>, que representa a operação a ser executada no serviço web.

Substitua os namespaces e os elementos conforme necessário para se adequar ao serviço web SOAP que você está consumindo.

Passo 2: Criar a função de requisição SOAP

Em seguida, crie uma função para realizar a requisição SOAP utilizando a API XMLHttpRequest ou a API fetch. Neste exemplo, usaremos a XMLHttpRequest:

function soapRequest(url, envelope) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-Type', 'text/xml');
    xhr.setRequestHeader('SOAPAction', 'http://example.com/webservice/GetData');

    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(xhr.responseXML);
        } else {
          reject(new Error(`A requisição SOAP falhou: ${xhr.status}`));
        }
      }
    };

    xhr.send(envelope);
  });
}

A função soapRequest aceita dois argumentos: a URL do serviço web SOAP e o envelope SOAP a ser enviado.

A função retorna uma promessa que resolve com a resposta XML ou rejeita com um erro.

Passo 3: Executar a requisição SOAP e processar a resposta

Agora você pode executar a requisição SOAP chamando a função soapRequest com a URL do serviço web e o envelope SOAP:

const url = 'http://example.com/soapWebService.asmx';
const envelope = `
  <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:web="http://example.com/webservice">
     <soapenv:Header/>
     <soapenv:Body>
        <web:GetData>
           <web:param>example_parameter</web:param>
        </web:GetData>
     </soapenv:Body>
  </soapenv:Envelope>
`;

soapRequest(url, envelope)
  .then(responseXML => {
    console.log(responseXML);
    // Processar a resposta XML conforme necessário
  })
  .catch(error => {
    console.error(error);
  });

Neste exemplo, a função `soapRequest` é chamada com a URL do serviço web e o envelope SOAP.

A promessa resultante é resolvida com a resposta XML, que pode ser processada conforme necessário.

Em caso de erro, o erro será registrado no console.

Passo 4: Processar a resposta XML

Depois de receber a resposta XML, você pode processá-la e extrair os dados desejados. Vamos supor que a resposta XML tenha a seguinte estrutura:

<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
  <soap:Body>
    <GetDataResponse xmlns="http://example.com/webservice">
      <GetDataResult>
        <Item>
          <Id>1</Id>
          <Name>Example Item 1</Name>
        </Item>
        <Item>
          <Id>2</Id>
          <Name>Example Item 2</Name>
        </Item>
      </GetDataResult>
    </GetDataResponse>
  </soap:Body>
</soap:Envelope>

Para extrair os elementos <Item> e seus respectivos elementos <Id> e <Name>, você pode utilizar a API DOMParser para analisar a resposta XML e selecionar os elementos desejados:

function processResponse(responseXML) {
  const parser = new DOMParser();
  const xmlDoc = parser.parseFromString(responseXML, 'text/xml');
  const items = xmlDoc.getElementsByTagName('Item');

  const results = [];

  for (let i = 0; i < items.length; i++) {
    const id = items[i].getElementsByTagName('Id')[0].textContent;
    const name = items[i].getElementsByTagName('Name')[0].textContent;
    results.push({ id, name });
  }

  return results;
}

A função processResponse aceita a resposta XML e retorna um array de objetos contendo os dados extraídos dos elementos <Item>.

Passo 5: Integrar a requisição SOAP e o processamento da resposta

Finalmente, integre a requisição SOAP e o processamento da resposta em seu código:

soapRequest(url, envelope)
  .then(responseXML => {
    const results = processResponse(responseXML);
    console.log(results);
    // Utilizar os resultados conforme necessário
  })
  .catch(error => {
    console.error(error);
  });

Neste exemplo, a resposta XML é processada pela função processResponse e os resultados extraídos são exibidos no console. Você pode usar esses resultados conforme necessário em sua aplicação.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Neste artigo, demonstramos como fazer uma requisição SOAP em JavaScript utilizando a API XMLHttpRequest.

Mostramos como construir um envelope SOAP, criar uma função de requisição SOAP, executar a requisição e processar a resposta XML.

Essas técnicas são fundamentais para consumir serviços web baseados em SOAP com JavaScript e podem ser adaptadas para trabalhar com diferentes serviços web e estruturas XML.

Está buscando em evoluir como Programador? Confira o nossos cursos clicando aqui.

Nosso principal objetivo é tornar você um dev profissional que é capaz de resolver problemas de alta dificuldade e criar projetos complexos, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Cursos com vários projetos, exercícios, material apoio, comunidade de alunos e muito mais!