Фитискин Александр

Не гони коней! вторник
9 сентября

При разработке последнего проекта я взял на себя задачу организовать подгрузку контента на страницу с помощью Ajax. XMLHTTP-соединение успешно устанавливалось, я получал необходимый контент и с помощью innerHTML вставлял его в скрытый блок на странице, чтобы уже оттуда выдергивать необходимые части. И тут я наткнулся на грабли: в ответ на мои запросы getElementById или getElementsByTagName браузер выдавал undefined вместо необходимых мне подгруженных элементов.

Как оказалось, грабли таились в том, что я слишком торопился: с момента вставки полученного контента на страницу и до момента обращения к его элементам браузер не успевал добавлять новые элементы в DOM-дерево страницы. Решение: задать таймаут, тем самым дать браузеру время для построения дерева DOM. А если мы поместим в конец загружаемого контента узел-метку (например, пустой div с id=flag), то сможем определить закончил браузер свою работу, или нам нужно еще немного подождать.

var hiddenDiv; // скрытый контейнер на странице
var oXmlHttp = createXmlHttp();
oXmlHttp.open("get", url, true);
oXmlHttp.onreadystatechange = function ()
{
 if (oXmlHttp.readyState == 4)
 {
 if (oXmlHttp.status == 200)
 {
 hiddenDiv.innerHTML = oXmlHttp.responseText;
 var t = setTimeout("handle()", 100);
 }
 }
}
oXmlHttp.send(null);
function handle()
{
 if (document.getElementById('flag') != undefined)
 {
 // Дерево DOM готово, можем разбирать полученный контент по частям
 }
 else
 {
 var t = setTimeout("handle()", 100);
 }
}

В зависимости от размера получаемого контента следует установить нужный таймаут.