VPF::Не успевают подгружаться данные (ajax)

Самозванка

Дата 20.12.2009, 12:01 (ссылка)

(нет голосов)

Загрузка ...

Девушка в стиле IT

Профиль
Группа: Завсегдатай
Сообщений: 484
Регистрация: 5.9.2006
Где: USA

Репутация: нет
Всего: 40

Сделала с помощью аякса, чтоб при изменение выбора в одном комбобоксе изменились данные во втором, во втором изменились в третим. Функциями 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>

--------------------

Неуёмная жажда жизни!

smile

Veve

Дата 20.12.2009, 13:07 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 291
Регистрация: 1.1.2005
Где: Латвия, Рига

Репутация: 1
Всего: 13

body onLoad

bars80080

Дата 20.12.2009, 13:17 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

либо window.onload = function() { start_function(); };

Самозванка

Дата 20.12.2009, 13:18 (ссылка)

(нет голосов)

Загрузка ...

Девушка в стиле IT

Профиль
Группа: Завсегдатай
Сообщений: 484
Регистрация: 5.9.2006
Где: USA

Репутация: нет
Всего: 40

Да, да. Забыла написать, что функцию, так и вызываю.

Код


     <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();
            }

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

Это сообщение отредактировал(а) Самозванка - 20.12.2009, 13:20

--------------------

Неуёмная жажда жизни!

smile

bars80080

Дата 20.12.2009, 13:35 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

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

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

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

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

Самозванка

Дата 20.12.2009, 13:46 (ссылка)

(нет голосов)

Загрузка ...

Девушка в стиле IT

Профиль
Группа: Завсегдатай
Сообщений: 484
Регистрация: 5.9.2006
Где: USA

Репутация: нет
Всего: 40

Так у меня же это и прописано выше:

Код


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

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

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

--------------------

Неуёмная жажда жизни!

smile

bars80080

Дата 20.12.2009, 18:12 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

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

флаг 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 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 12
Всего: 34

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

Код


                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" и т.д.

Это сообщение отредактировал(а) Itsys - 21.12.2009, 07:38

Самозванка

Дата 21.12.2009, 08:02 (ссылка)

(нет голосов)

Загрузка ...

Девушка в стиле IT

Профиль
Группа: Завсегдатай
Сообщений: 484
Регистрация: 5.9.2006
Где: USA

Репутация: нет
Всего: 40

Itsys,
bars80080,
спасибо

Itsys, именно так и сделала, до самой дошло через 4 часа))) smile

Не успела тут отписаться.

--------------------

Неуёмная жажда жизни!

smile

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »