The question is purely for educational purposes, this is not a problem.
When processing onreadystatechange 3 packages arrive (if I understand correctly, responseText - that is where the text of the packages is stored in a representative form).
The first one is empty ( why?, By the way).
The second one displays all the artworks.json .
The third displays the same thing as the second ( why? ).
Maybe it's in json? And yet such a thing as a controlling stake comes to mind (I don’t know how I know about this). Please clarify what is happening here)

Here is my function that performs ajax:

 function artAjaxRequest(pageSrc) { var artworks; var xhr = new XMLHttpRequest(); xhr.open('GET', '/artworks/artworks.json', true); xhr.send(); xhr.onload = function(){ artworks = JSON.parse(this.responseText); }; xhr.onreadystatechange = function(){ alert(this.responseText); }; return function() { // Заглушка }; }

Purely for reference artworks.json itself:

 { "sketches": [ { "title": "какой-то тайтл 1-го арта", "description": "какое-то описание 1-го", "date": "23.02.2017 19:42", "src": "1.png" }, { "title": "какой-то тайтл 2-го арта", "description": "какое-то описание 1-го арта", "date": "23.02.2017 19:43", "src": "2.png" }, { "title": "какой-то тайтл 3-го арта", "description": "какое-то описание 1-го арта", "date": "23.02.2017 19:43", "src": "3.png" } ], "somethingserious": [ { "title": "какой-то тайтл 3-го арта", "description": "какое-то описание 1-го арта", "date": "23.02.2017 19:44", "src": "1.png" }, { "title": "какой-то тайтл 3-го арта", "description": "какое-то описание 1-го арта", "date": "23.02.2017 19:44", "src": "2.png" }, { "title": "какой-то тайтл 3-го арта", "description": "какое-то описание 1-го арта", "date": "23.02.2017 19:41", "src": "3.png" } ] }

    1 answer 1

    Let's read the specification :

    An event handler (EventHandler) that is called whenever the state of the readyState property changes. The XMLHttpRequest.onreadystatechange property contains an event handler triggered when the readystatechange event occurs, whenever the readyState property of the XMLHttpRequest request changes . The callback function is launched from the user interface thread.

    In other words, you expect from this handler that it will be called only when the request is successful, but in fact it works every time when you change the state of the xhr object, or rather its readyState property, which is generally the same same in your case. Check out the sample code for the same link:

     var xhr = new XMLHttpRequest(), method = "GET", url = "https://developer.mozilla.org/"; xhr.open(method, url, true); xhr.onreadystatechange = function () { if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { console.log(xhr.responseText); }; }; xhr.send();

    Especially on what is checked in the condition, namely xhr.readyState and xhr.status . Only by checking these two points using the method above will you get the code you need.

    In other words, three times you have triggered because:

     // первый раз вы просто создаете объект, именно тут обработчик дает вам пустой ответ var xhr = new XMLHttpRequest(); // тут у вас есть уже json xhr.open('GET', '/artworks/artworks.json', true); // и тут у вас опять же есть уже json xhr.send();

    Perhaps, I do not quite correctly interpret what is happening in your code, and the event is called differently, but in general it is very similar to that. But what is written above about checking the status and completeness of a request is, on the whole, exactly the answer you are looking for.

    • how can "// the first time you just create an object, this is where the handler gives you an empty answer" if the onreadystatechange handler is not already assigned? - Igor
    • This is absolutely not the answer to the question I asked. I asked: why is the first packet empty, and the third repeats the contents of the second? I did not (!) Ask how to make sure that he did not display the result of the query three times. You read the question fluently and answered the wrong thing. - VostokSisters
    • @VostokSisters about what package is it? I truly understood that we are talking about what the alert displays? - Stanislav Belichenko
    • How to make the execution of the script for the successful completion of the request, I know. And by the way, this is not done in this way. For a successful final execution of the request, a handler was invented, it is called onload , see the same specification in which I found out about it. - VostokSisters
    • one
      @VostokSisters as for the right or wrong handler, the example just shows how to do it on the basis of such an option on the same onload - Stanislav Belichenko