2

Estou querendo fazer um numero indefinido de requisições ajax, conforme o numero de urls passas como parâmetro, só preciso saber como incrementar o (nome) da variável para que o response não se sobreponha ao anterior.

Cada requisição vai buscar um conteúdo html ou objeto json diferente e inseri-los em elementos diferentes do documento, sem alterar a variável todos os elementos são incrementados com a última resposta do laço. Obs, colocando o terceiro argumento 'false', no método open(); da certo, mas da um alerta no console dizendo que não é uma boa prática

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

Exemplo do que procuro:

A cada iteração quero que o nome da variável mude:

var a = new XHtmlHTTPrequest();

Na próxima iteração:

var b = new XHtmlHTTPrequest();
0

2 Respostas 2

8

Aqui fica um exemplo com a API da StarWars :)

As ideias importantes são:

  • passa o elemento a ser iterado para um novo contexto/escopo, assim essa variável fica guardada dentro da função.

  • encadeia o ajax e a função a aplicar aos elementos passando a função final como callback para o ajax chamar. Essa função já leva guardado o elemento como descrito acima.

function ajax(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onload = function() {
    if (xhr.status === 200) {
      callback(JSON.parse(xhr.responseText));
    } else {
      alert('O ajax falhou! ' + xhr.status);
    }
  };
  xhr.send();
}

function adicionarNomeDepois(el) {
  var label = el.querySelector('label');
  label.innerHTML = 'A carregar...';
  return function(data) {
    label.innerHTML = data.name;
    el.querySelector('p').innerHTML = data.starship_class;
  }
}

var base = 'https://swapi.co/api/starships/';
var divs = document.querySelectorAll('[data-nrnave]');
for (var i = 0; i < divs.length; i++) {
  var el = divs[i];
  var url = base + el.dataset.nrnave;
  ajax(url, adicionarNomeDepois(el));
}
div {
  border: 1px solid #666;
  padding: 10px;
}

label {
  font-weight: bold;
}
<div data-nrnave="15">
  <label></label>
  <p></p>
</div>
<div data-nrnave="5">
  <label></label>
  <p></p>
</div>
<div data-nrnave="9">
  <label></label>
  <p></p>
</div>
<div data-nrnave="10">
  <label></label>
  <p></p>
</div>
<div data-nrnave="11">
  <label></label>
  <p></p>
</div>
<div data-nrnave="12">
  <label></label>
  <p></p>
</div>

8
  • 1
    callback e assincrono sempre é um bom caminho +1. PS: Parabéns pelo 100k, sinônimo de empenho, a comunidade só tem a lhe agradecer.
    – Syzoth
    Commented 25/09/2017 às 17:40
  • 1
    @GuilhermeNascimento obrigado! E tu para lá caminhas também :)
    – Sergio
    Commented 25/09/2017 às 17:42
  • 1
    -1 por não usar Yoda Conditions com a API do Star Wars :D
    – bfavaretto
    Commented 25/09/2017 às 18:06
  • @bfavaretto haha :)
    – Sergio
    Commented 25/09/2017 às 18:07
  • não havia tentado com callback ainda, de fato o escopo da função vai isolar a variável e resolver o meu problema. contudo a dúvida permanece é possível auto incrementar o nome de uma variável? Commented 25/09/2017 às 18:15
4

Invés de mudar a variável você poderia usar uma lista, melhorando o controle sobre o código.

var a = [];
for (var i = 0; i < 4  ; i++) {
    var x = new XMLHttpRequest();
    a.push(x);
}

console.log(a);
4
  • Opá não sabia que isso era possível, deve resolver meu problema! Commented 25/09/2017 às 14:09
  • aparentemente não da certo não! Commented 25/09/2017 às 14:32
  • Corrigi o código, para incluir um item na array deve usar o método .push Commented 25/09/2017 às 14:55
  • Boa! me deu uma luz aqui, mas vou ter que fazer dois laços, um para criar o array e outro para executar as requisições ajax! Commented 25/09/2017 às 15:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .