Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Не успевают подгружаться данные (ajax)


Автор: Самозванка 20.12.2009, 12:01
Сделала с помощью аякса, чтоб при изменение выбора в одном комбобоксе изменились данные во втором, во втором изменились в третим. Функциями changeSelect. но при первоначальной загрузке страницы, мне надо, чтобы все комбобоксы с определенными данными сразу подгрузились. Функция loadDropBox(). Ну естественно данные не успевают подгрузиться. Если ставлю между вызовами функций в функции loadDropBox() алерты, то данные за счет паузы подгружаться успевают. Как то можно избежать этого? Или первоначально без всяких аяксов просто загружать целиком страничку? Но тогда при вызове 
changeSelectProductCategory тоже ситуация , когда надо два комбобокса подгружать, и тоже данные не успевают прийти, когда нет алертов.
Код

<script type="text/javascript">
            function changeSelectProductCategory(sel, targetstr)
            {
                var value = sel.value;
                sendRequest('product.dr?productCategoryId='+value, 'resultProductCategory',  getRequest);
                sendRequest2('product_version.dr?productId='+value, 'resultProduct',  getRequest2);
            }
            function changeSelectProduct(sel, targetstr)
            {
                var value = sel.value;
                sendRequest2('product_version.dr?productId='+value, 'resultProduct',  getRequest2);
            }
            function changeSelectProductVersion(sel, targetstr)
            {
                 var value = sel.value;
                sendRequest3('product_result.dr?page='+value, 'resultProductVersion',  getRequest3);
            }
            function loadDropBox()
            {
                sendRequestStart('product_category.dr', 'resultStart',  getRequestStart);
                <%--sendRequest('product.dr?productCategoryId='+value, 'resultProductCategory',  getRequest);--%>
                sendRequest('product.dr', 'resultProductCategory',  getRequest);
                sendRequest2('product_version.dr', 'resultProduct',  getRequest2);
                sendRequest3('product_result.dr', 'resultProductVersion',  getRequest3);
            }
function createHttpRequest() {
    var httpRequest;
    var browser = navigator.appName;
    if (browser == "Microsoft Internet Explorer") {
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        httpRequest = new XMLHttpRequest();
    }
    return httpRequest;
}

function sendRequestStart(file, _resultStart, getRequestProc) {
    resultStart = _resultStart;
    document.getElementById(resultStart).innerHTML = 'Wait...';
    httpRequest.open('get', file);
    httpRequest.onreadystatechange = getRequestProc;
    httpRequest.send(null);
}

function sendRequest(file, _resultProductCategory, getRequestProc) {
    resultProductCategory = _resultProductCategory;
    document.getElementById(resultProductCategory).innerHTML = 'Wait...';
    httpRequest.open('get', file);
    httpRequest.onreadystatechange = getRequestProc;
    httpRequest.send(null);
}

function sendRequest2(file, _resultProduct, getRequestProc) {
    resultProduct = _resultProduct;
    document.getElementById(resultProduct).innerHTML = 'Wait...';
    httpRequest.open('get', file);
    httpRequest.onreadystatechange = getRequestProc;
    httpRequest.send(null);
}

function sendRequest3(file, _resultProductVersion, getRequestProc) {
    resultProductVersion = _resultProductVersion;
    document.getElementById(resultProductVersion).innerHTML = 'Wait...';
    httpRequest.open('get', file);
    httpRequest.onreadystatechange = getRequestProc;
    httpRequest.send(null);
}

function getRequestStart() {
    if (httpRequest.readyState == 4) {
        document.getElementById(resultStart).innerHTML = httpRequest.responseText;
    }
}

function getRequest() {
    if (httpRequest.readyState == 4) {
        document.getElementById(resultProductCategory).innerHTML = httpRequest.responseText;
    }
}

function getRequest2() {
    if (httpRequest.readyState == 4) {
        document.getElementById(resultProduct).innerHTML = httpRequest.responseText;
//        alert(httpRequest.responseText);
    }
}

function getRequest3() {
    if (httpRequest.readyState == 4) {
        document.getElementById(resultProductVersion).innerHTML = httpRequest.responseText;
//        alert(httpRequest.responseText);
    }
}

var httpRequest = createHttpRequest();
var resultProductCategory = '';
var resultProduct = '';
var resultProductVersion = '';
var resultStart = '';


function send(value){
    sendRequest('product.dr?page='+value, 'resultProductCategory',  getRequest);
    sendRequest2('product_version.dr?page='+value, 'resultProduct',  getRequest2);
    sendRequest3('product_result.dr?page='+value, 'resultProductVersion',  getRequest3);
    sendRequestStart('product_category.dr', 'resultStart',  getRequestStart);
}
        </script>

Автор: Veve 20.12.2009, 13:07
body onLoad

Автор: bars80080 20.12.2009, 13:17
либо window.onload = function() { start_function(); };

Автор: Самозванка 20.12.2009, 13:18
Да, да. Забыла написать, что функцию, так и вызываю.
Код

     <body onLoad="loadDropBox()">
        <div id="resultStart"></div>
        <div id="resultProductCategory"></div>
        <div id="resultProduct"></div>
        <div id="resultProductVersion"></div>
    </body>


Но в каждом из блоков вместо результата - Wait. А когда записываю так:
Код

   function loadDropBox()
            {
                sendRequestStart('product_category.dr', 'resultStart',  getRequestStart);
               alert();
                sendRequest('product.dr', 'resultProductCategory',  getRequest);
                alert();
                sendRequest2('product_version.dr', 'resultProduct',  getRequest2);
                alert(); 
                sendRequest3('product_result.dr', 'resultProductVersion',  getRequest3);
                alert();
            }



И немножко выжидаю перед нажатием на алерте ОК, то все данные приходят

Автор: bars80080 20.12.2009, 13:35
нет, а какая проблема прописать вызов каждого следующего блока по завершению предыдущего?

sendRequest вызывать только по достижению результатов в sendRequestStart

если это аякс, то там есть флаг readyState = 4, - приём данных.

это ж вроде как само собой разумеющееся

Автор: Самозванка 20.12.2009, 13:46
Так у меня же это и прописано выше:

Код

function getRequestStart() {
    if (httpRequest.readyState == 4) {
        document.getElementById(resultStart).innerHTML = httpRequest.responseText;
    }
}

function getRequest() {
    if (httpRequest.readyState == 4) {
        document.getElementById(resultProductCategory).innerHTML = httpRequest.responseText;
    }
}



То есть насколько я понимаю, следующая функция и должна вызываться, только после получения данных

Автор: bars80080 20.12.2009, 18:12
вообще-то, у тебя написан её вызов сразу, а затем в ней уже проверка на состояние флага. этот ляп встречающийся с удивительной регулярностью в разных скриптах мне до сих пор не понятен. 

флаг readyState должен быть прописан в самой аякс-функции, которая отправляет запрос на сервер:

Код

function ajaxQuery(u, m, f, ss) {
    if(window.XMLHttpRequest) {
        try { rq = new XMLHttpRequest(); } 
        catch (e){}} 
    else if(window.ActiveXObject) {
        try { rq = new ActiveXObject('Msxml2.XMLHTTP'); } 
        catch (e){ rq = new ActiveXObject('Microsoft.XMLHTTP'); }}
    rq.onreadystatechange = function() { 
        if(rq.readyState == 4) ajaxReturn(rq.responseText, f); }     
    rq.open(m, u, true);
    rq.send(ss); 
}

Автор: Itsys 21.12.2009, 07:38
Все дело в асинхронной обработке данных. Ты пытаешься послать запросы сразу друг за другом:
Код

                sendRequestStart('product_category.dr', 'resultStart',  getRequestStart);
               alert();
                sendRequest('product.dr', 'resultProductCategory',  getRequest);
                alert();
                sendRequest2('product_version.dr', 'resultProduct',  getRequest2);
                alert(); 
                sendRequest3('product_result.dr', 'resultProductVersion',  getRequest3);
                alert();

И второй запрос посылается тогда, когда ответ от первого еще не получен и данные еще не загружены.
Сейчас каждый процесс идет параллельно:
Код

sendRequestStart->запрос данных->получение ответа->изменение в div 'resultStart';
sendRequest->запрос данных->получение ответа->изменение в div 'resultProductCategory';
sendRequest2->запрос данных->получение ответа->изменение в div 'resultProduct';
sendRequest3->запрос данных->получение ответа->изменение в div 'resultProductVersion';

Причем начинаются они практически одновременно, а длятся не менее 1-2 секунд в зависимости от скорости соединения. А надо сделать последовательную схему:
Код

sendRequestStart->запрос данных->получение ответа->изменение в div 'resultStart'->sendRequest->запрос
 данных->получение ответа->изменение в div 'resultProductCategory'->sendRequest2->запрос
 данных->получение ответа->изменение в div 'resultProduct'->sendRequest3->запрос данных->получение 
ответа->изменение в div 'resultProductVersion';


Соответственно вызов
Код

sendRequest('product.dr', 'resultProductCategory',  getRequest);

надо перенести внутрь процедуры "getRequestStart" и т.д.

Автор: Самозванка 21.12.2009, 08:02
Itsys, 
bars80080, 
спасибо

Itsys, именно так и сделала, до самой дошло через 4 часа)))  smile Не успела тут отписаться.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)