How can I make ten different requests to a server per ajax?

Question

How can I make ten different requests to a server per ajax?

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

0

Hello, I have a server that gives me a random word and when creating a loop, it always gives me the same word and I do not know how to make me give me ten different words. Here the code:

var palabra = "";

function Creapalabra() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            palabra = JSON.parse(this.responseText).word;
            palabra = palabra.replace(/á/gi, "a");
            palabra = palabra.replace(/é/gi, "e");
            palabra = palabra.replace(/í/gi, "i");
            palabra = palabra.replace(/ó/gi, "o");
            palabra = palabra.replace(/ú/gi, "u");
            palabra = palabra.replace(/ü/gi, "u");
        }
    }
    xhttp.open("GET", "http://daw.aitordb.com:4000", true);
    xhttp.send();
}


function inicio() {

    for (var i = 0; i < 10; i++) {
        Creapalabra();
        document.getElementById("palabra" + i).innerHTML = palabra;
    }
}

javascript html ajax

asked by Juankaxx 17.12.2017 в 16:12

source

3 answers

1

Try to isolate the result so that the word value is unique for each request using a callback:

function Creapalabra(callback) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var palabra = JSON.parse(this.responseText).word;
            palabra = palabra.replace(/á/gi, "a");
            palabra = palabra.replace(/é/gi, "e");
            palabra = palabra.replace(/í/gi, "i");
            palabra = palabra.replace(/ó/gi, "o");
            palabra = palabra.replace(/ú/gi, "u");
            palabra = palabra.replace(/ü/gi, "u");

            callback(palabra);
        }
    }
    xhttp.open("GET", "http://daw.aitordb.com:4000", true);
    xhttp.send();
}


function inicio() {

    for (var i = 0; i < 10; i++) {
        Creapalabra(function(palabra){
              document.getElementById("palabra" + i).innerHTML += palabra;
        });
    }
}

Probably the values of the variable palabra are being written because it is global and since the requests are asynchronous, they are not necessarily executed in order.

answered by 17.12.2017 в 16:27

0

You can do recursion when the request finishes so you do not overload the server. Something like that would be:

function Creapalabra(i) {
  var xhttp = new XMLHttpRequest();      
  xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
          var palabra = JSON.parse(this.responseText).word;
          palabra = palabra.replace(/á/gi, "a");
          palabra = palabra.replace(/é/gi, "e");
          palabra = palabra.replace(/í/gi, "i");
          palabra = palabra.replace(/ó/gi, "o");
          palabra = palabra.replace(/ú/gi, "u");
          palabra = palabra.replace(/ü/gi, "u");

          document.getElementById("palabra" + i).innerHTML += palabra;
          if (i < 10) Creapalabra(i++);
      }
  } 
  xhttp.open("GET", "http://daw.aitordb.com:4000", true);
  xhttp.send();  
}

function inicio() {
    Creapalabra(1);        
}

answered by 18.12.2017 в 18:07

how to put a JSON in a Spinner? How to show hidden table in phpmyadmin?

score 1 · Accepted Answer

Good, the problem you're having is that the requests are asynchronous, one solution is to create a promise and show it when they arrive.

Solution

function Creapalabra(i) {
    return new Promise((resolve, reject) => {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var palabra = JSON.parse(this.responseText).word;
            palabra = palabra.replace(/á/gi, "a");
            palabra = palabra.replace(/é/gi, "e");
            palabra = palabra.replace(/í/gi, "i");
            palabra = palabra.replace(/ó/gi, "o");
            palabra = palabra.replace(/ú/gi, "u");
            palabra = palabra.replace(/ü/gi, "u");

           resolve({palabra, numero: i});
        }
    }
    xhttp.open("GET", "http://daw.aitordb.com:4000", true);
    xhttp.send();
         });
}

    function inicio() {
        for (var i = 0; i < 10; i++) {
            Creapalabra(i).then((data) => {
                document.getElementById("palabra" + data.numero).innerHTML += data.palabra;
            });
        }
    }