массив из XML-запроса не является глобальным

Question

Я запрашиваю у сервера имена из учителя таблицы и ответ, который я получаю, в порядке, но массив Учителей в приведенном ниже коде не может быть доступен из другой функции, показывающей Teachers.length = 0 .Это вызвано из-за какой-то задержки обработки XML-запроса, пожалуйста, объясните, спасибо.

document.onreadystatechange = function() { 
if (document.readyState === "complete") { // PAGE HAS BEEN LOADED 

    Teachers = []; 
    var object = []; 
    var request = new XMLHttpRequest(); 
    request.onreadystatechange = function() { 
    if (request.readyState === XMLHttpRequest.DONE) { 
     if (request.status === 200) { 
     object = JSON.parse(request.responseText); 
     for(var i = 0 ; i < object.length; i++){ 
      Teachers.push(object[i].name.toString()); 
      console.log("*" + Teachers.length); 
     } 
     } 
     console.log(Teachers.length); 
    } 
    }; 

    request.open('GET', 'http://localhost:3000/names', true); 
    request.send(null); 

    CreateRow(); 
    for(var i = 0; i < absentTeachers.length; i++){ 
    PrepareRow(i, "row"+(i+1)); 
    } 
}} 

функция, такая как CreateRow использует учитель, но его показ, чтобы быть пустыми, но когда я протоколирование длиной Учителя в функции обработки запросов ее показывает изменения.

Answer 1

У вас возникают проблемы с кодом, потому что вы ожидаете синхронной работы. Однако запросы Ajax обрабатываются асинхронно.

Обычно JS начинается в верхней части вашего кода и работает до самого низа. Это функциональность, к которой вы привыкли. Если ваш запрос будет обрабатываться синхронно, ваш код будет работать без проблем. Однако: Javascript начинается сверху, добирается до запроса, отправляет его и прогрессирует с остальной частью вашего кода. В этот момент ваш массив Teachers по-прежнему пуст, и ничего не произойдет.

Что вам нужно сделать, это подождать, пока запрос не будет завершен, и данные будут доступны. (Фактически вы можете заметить, что console.log с пустым массивом происходит до того, как вы получите журнал заполненного массива).

Это происходит из-за того, что вы вызываете console.log, как только ваш запрос дойдет до этого пункта. (Опять же, сверху вниз внутри запроса). Поэтому, чтобы исправить вашу проблему, создайте функцию, а затем вызовите эту функцию внутри вашего запроса Ajax.

document.onreadystatechange = function() { 
if (document.readyState === "complete") { // PAGE HAS BEEN LOADED 

    Teachers = []; 
    var object = []; 

    function createRow() { 
    for(var i = 0; i < absentTeachers.length; i++){ 
     PrepareRow(i, "row"+(i+1)); 
    } 
    } 

    var request = new XMLHttpRequest(); 
    request.onreadystatechange = function() { 
    if (request.readyState === XMLHttpRequest.DONE) { 
     if (request.status === 200) { 
     object = JSON.parse(request.responseText); 
     for(var i = 0 ; i < object.length; i++){ 
      Teachers.push(object[i].name.toString()); 
      console.log("*" + Teachers.length); 
     } 
     } 
     createRow(); 
    } 
    }; 

    request.open('GET', 'http://localhost:3000/names', true); 
    request.send(null); 
}} 

Надеюсь, это решит вашу проблему.