Включенная страница javascript объем

Question

Я работаю над весенним проектом. Мы вложили вложенные страницы. Некоторые чистые jsp, некоторые чистые js, а некоторые представляют собой смесь обоих. Мы используем библиотеку тегов JSP. У нас есть страница, которая в настоящее время во время работы имеет довольно низкую производительность, я говорю о том, чтобы время от времени загружаться по 30 секунд. Поэтому я пытался решить эту проблему производительности. Эта конкретная страница имеет дело с профилями и является довольно сложной и сложной. Само собой разумеется, что принятый подход состоял в том, чтобы загрузить все страницы одновременно и пролистать их, используя разделы. Во многом это связано с тем, что внесение изменений в один раздел / вкладку повлияет на другие вкладки. Если бы все это управлялось на стороне сервера, это не было бы проблемой.

Я заметил, что профили, которые, кажется, имеют худшую производительность, всегда имели несколько адресов, и при подсчете количества элементов dom, только что созданный профиль имеет около 10 тыс., в среднем около 40 тыс., но у медленных профилей более 90 тыс., и большая часть различий заключается в количестве перечисленных адресов. Поэтому я решил, что займусь этим и посмотрю результаты.

Я получил примерный фрагмент кода, работающий на отдельной странице. Три раскрывающихся списка, один для страны, провинции и города. Выбор страны заселения провинции и тд. Исходная страница использует ajax звонки, чтобы заполнить все это, что означает много вперед и назад. Поэтому для моего подхода я загрузил один XML файл, содержащий всю эту информацию.

Моя проблема заключается в том, что когда я пытаюсь загрузить страну. xml это не удается. Чистые страницы js не повторяют команду taglibrary JSP, которая устанавливает путь к ресурсу, и когда я перемещаю только этот раздел на более высокую страницу, функция выдает нулевые ошибки из переменной, которая должна содержать xml data.

Итак, вот как это работает на странице примера

<script type="text/javascript">
var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "<c:url value='/resources/xml/country.xml' />", true);
xmlhttp.send();
var xmlDoc = xmlhttp.responseXML; 


$(document).ready(function(){
        loadA();
        loadB();
        loadC();
    });

function loadA(){}
function loadB(){}
function loadC(){}

У меня это работает, но когда я пытаюсь разбить его на несколько страниц, я получаю SCRIPT5009: xmlhttp is undefined и SCRIPT5007: Unable to get property 'id' of undefined or null reference.

Моя первая цель состояла в том, чтобы загрузить страны из XML перед тем, как двигаться вниз, так как все зависит от того, что выше. Ниже приведена исходная конструкция, которая работает.

<div class="row" style="padding-right: 10px; padding-left: 10px;">
                                <div class="col-md-3"> 
                                    <div class="form-group">
                                        <label class="control-label"><spring:message code="label.country" /></label>
                                        <form:select id="CCountry_${vs.index}" path="residences[${vs.index}].country" cssClass="form-control" onchange="countryChange(this, {selectOneLabel: '${selectOne}', otherProvLabel : '${otherProv}', otherCitylabel : '${otherCity}'});">
                                            <form:option value=""><spring:message code="select.one"/></form:option>
<form:options items="${countryCtbl}" itemValue="codeValue" itemLabel="comboDescVal" />                                      
                                        </form:select>  
                                    </div>
                                </div>

А вот моя модификация

<div class="row" style="padding-right: 10px; padding-left: 10px;">
                                <div class="col-md-3"> 
                                    <div class="form-group">
                                        <label class="control-label"><spring:message code="label.country" /></label>
                                        <form:select id="CCountry_${vs.index}" path="residences[${vs.index}].country" cssClass="form-control" onchange="countryChange(this, {selectOneLabel: '${selectOne}', otherProvLabel : '${otherProv}', otherCitylabel : '${otherCity}'});">
                                            <form:option value=""><spring:message code="select.one"/></form:option>
<script>countryRefresh(document.getElementById('CCountry_${vs.index}'));</script>                                   
                                        </form:select>  
                                    </div>
                                </div>

, и здесь на включенной странице js есть новая функция

function countryRefresh(documentId)
    {
        var countries = xmlhttp.responseXML.getElementsByTagName(documentId);

        for (var i = 0; i < countries.length; i++) {
            //loop to populate selection box
            var option = document.createElement("option");
            option.text = countries[i].getElementsByTagName("CountryName")[0].textContent;
            option.value = countries[i].getElementsByTagName("CountryId")[0].textContent;
            mybox.options.add(option);
        }
    }

Мне кажется, что JS на более высокой странице не вызывается или области видимости другие. Поскольку я не могу реструктурировать всю страницу, как я могу получить свой xmlDo c в нужной мне области? Я знаю, что с минимальными усилиями я мог бы воссоздать страницу JS как страницу JSP, но я чувствую, что это неправильный подход.

Я обнаружил, что этот вопрос по своей природе был похож на мой, но отличался, поскольку это была одна и та же страница, а моя - на разных страницах. Этот quora answer также указывает на то, что то, что я пытаюсь сделать, должно работать.