Как скрыть местоположение пути при использовании внешнего Javascript для обновления HTML с помощью внешнего текстового документа

Question

Я работаю над созданием динамической страницы на моем сайте, где нажатие кнопки «Дополнительная информация» вызывает скрипт loadBCW.js, который обновляет <div> ' s innerHTML с использованием текстового файла, сохраненного в другом месте. У меня есть, что прекрасно работает с помощью этого loadBCW.js:

document.getElementById("loadBCW").addEventListener('click',function(){ 
var url = "/wp-content/themes/DICE/js/descriptionBCW"; 
var xhttp = new XMLHttpRequest(); 
xhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
    document.getElementById("demo").innerHTML = 
    this.responseText; 
    } 
}; 
xhttp.open("GET", url, true); 
xhttp.send(); 
document.getElementById("demo").innerHTML = url; 
}, false); 

Мой вопрос, когда я нажимаю один из «Подробнее» кнопки для того, чтобы изменить <div> «s innerHTML, он будет мигать переменная url в <div>, то правильные элементы перезаписывают его.

Как я могу проинструктировать js, чтобы НЕ пропустить переменную url на экране перед фактическим обновлением <div>?

Answer 1

Может быть, избавиться от кода, который устанавливает содержание div в качестве URL-адреса в первую очередь? Я закомментировать строку, которую следует удалить:

document.getElementById("loadBCW").addEventListener('click',function(){ 
    var url = "/wp-content/themes/DICE/js/descriptionBCW"; 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (this.readyState == 4 && this.status == 200) { 
      document.getElementById("demo").innerHTML = 
      this.responseText; 
     } 
    }; 
    xhttp.open("GET", url, true); 
    xhttp.send(); 
    // document.getElementById("demo").innerHTML = url; 
}, false); 

Вы делаете асинхронный запрос к внешнему источнику, так что код внутри xhttp.onreadystatechange не будет работать, пока файл не был успешно восстановлен. На самом деле вы ничего не можете сделать, кроме как оптимизировать свой сайт, чтобы работать быстрее, чем. Поэтому, если вы не хотите, чтобы URL-адрес был видимым, нет смысла устанавливать его в первую очередь.

Однако, это было бы еще хуже, если бы это был запрос синхронизации, так как не только это замедляет работу, но так как document.getElementById("demo").innerHTML = url; является после вашей функции, это гарантировано закончится замена содержимого с URL.