How to make XHR requests in a loop and process the answer in a callback with a random name?

Question

Loop for asynchronous XMLHttpRequest requests:

I generate the random callback name, which will be returned in response.
I do xhr.open for XMLHttpRequest, where the newly generated callback is substituted in the url.
The reply comes with the newly generated MyRandomCallback({"field": [{"id": "9283657325", .....}]});
It is necessary to extract data from the reply with my randomly generated callback.

Example:

var f = (function(){
var xhr = [], i;
for(i = 1; i <= 100; i++){
    (function(i){
        xhr = new XMLHttpRequest();
        var callback = "jQuery"+getRandomStr(1000000,9999999); // getRandomStr - my function and it works well.
        xhr.open("GET", "https://example.com/1.html?callback="+callback, true);
        xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(WHAT????);
        }
    })(i);
}
})();

How to get '9283657325'?

Sounds like you're trying to reinvent [JSONP](https://en.wikipedia.org/wiki/JSONP). — JLRishe, Jan 11 '19 at 19:38
This reads like a blog post: asking a question in the title, answering it in the question. I guess. — , Jan 11 '19 at 19:42
It maskes no sense why you would have a callback. Why are you not just making a JSONP call? https://stackoverflow.com/questions/6132796/how-to-make-a-jsonp-request-from-javascript-without-jquery — epascarello, Jan 11 '19 at 20:28
@epascarello, I know that it make no sense but the task is to get '9283657325' with a random callback. But as usual you guys put minuses, and only then you begin to understand that the question is not entirely simple. — williamzo, Jan 11 '19 at 20:32
It is still JSONP..... you should not be using an Ajax call if it returns a function back. — epascarello, Jan 11 '19 at 20:34
@epascarello, No, this is an extension. I can't append the reply. — williamzo, Jan 11 '19 at 20:48

epascarello · Answer 1 · 2019-01-11T21:10:38.750

1

What you are doing is JSONP. So you should handle it the JSONP way. It will execute the function you provide.

var counter = 1;
function makeCall (fnc) {
  var cb = 'callback' + counter++
  window[cb] = function (response) {
    console.log(response)
    // read the object here
    delete window[cb]
  }
  var script = document.createElement('script')
  script.src = 'https://example.com/1.html?callback=' + cb
  document.getElementsByTagName('head')[0].appendChild(script); 
}

If you really want to do it the non JSONP way, than you need to take the responseText from the XMLHttpRequest, remove the MyRandomCallback( and the trailing ) and than run JSON.parse. In that case there is no reason to generate a random number, just a string would do.

var xhr = new XMLHttpRequest();
var cb = 'foo'
xhr.open('GET', 'https://example.com/?callback=' + cb, true);
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var resp = xhr.responseText
    var json = resp.substring(cb.length, resp.length-2) // substring
    // var json = resp.match(/foo\((.*)\);/)[1]  // or reg exp
    var obj = JSON.parse(json)
    console.log(obj.field[0].id)
  }
}
xhr.send()

edited Jan 11 '19 at 21:10

answered Jan 11 '19 at 20:42

epascarello

204,599
20
195
236

This example doesn't feet me because I need a solution for an extension and I can't append the reply. – williamzo Jan 11 '19 at 20:49
"If you really want to do it the non JSONP way, than you need to take the responseText from the XMLHttpRequest, remove the MyRandomCallback( and the trailing ) and than run JSON.parse. In that case there is no reason to generate a random number, just a string would do." That was my own solution but I don't like it. I thought that there is a better solution. – williamzo Jan 11 '19 at 20:51
There is no other way unless you risk doing an eval() or new Function – epascarello Jan 11 '19 at 20:54
could you please describe a way with a new Function? – williamzo Jan 11 '19 at 20:57
same thing as eval `var foo = new Function(xhr.responseText); foo()` – epascarello Jan 11 '19 at 21:01
Thank you very much for all your replies. – williamzo Jan 11 '19 at 21:07

How to make XHR requests in a loop and process the answer in a callback with a random name?

1 Answers1