Два xmlHttpRequests на одной странице - PullRequest
3 голосов
/ 20 января 2011

Я довольно новичок в ajax, но пытаюсь реализовать два простых вызова для динамического изменения двух отдельных элементов div на странице с помощью javascript. У меня нет проблем с использованием одного вызова за раз, но когда я использую два, кажется, что второй xmlhttprequest берет на себя первый и записывает в оба div.

Я прочитал и попытался использовать исправления, перечисленные в этих двух других сообщениях, оба, похоже, не работают в моем случае:

Отправка двух запросов Ajax на два разных сценария PHP из одной функции javascript

Использование двух вызовов xmlhttprequest на странице

А вот мой соответствующий код:

function request_handler(url, params, changed_div) {
    if(window.XMLHttpRequest) {
            try {
                    req = new XMLHttpRequest();
            }catch(e) {
                    req = false;
            }
    }else if(window.ActiveXObject) {
            try {
                    req = new ActiveXObject("Msxml2.XMLHTTP");
            }catch(e) {
                    try {
                            req = new ActiveXObject("Microsoft.XMLHTTP");
                    }catch(e){
                            req = false;
                    }
            }
    }

    if(req) {
              req.onreadystatechange = function(){
                    if (req.readyState == 4 && req.status == 200){
                                    document.getElementById(changed_div).innerHTML = req.responseText);

                    }
            }

            req.open("POST", url, true);
            req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            req.send(params)
            return true;
    }

    return false;
}

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

request_handler("sample.php", parameters , "sample_div");

Извиняюсь, если я пропускаю что-то простое здесь, я просто не могу заставить его работать.

Ответы [ 3 ]

3 голосов
/ 20 января 2011

Этот вопрос

Использование двух вызовов xmlhttprequest на странице

отвечает на ваш вопрос.

В вашем request_handler функция, вы используете глобальную переменную req, которая перезаписывается при каждом вызове этой функции.

Если вы измените ее для запуска:

function request_handler(url, params, changed_div) {
    var req;
    // Rest of your function
}

, вы должны найти этооно работает.В этом случае req имеет локальную область видимости и поэтому не перезаписывается при повторном вызове request_handler.

Могу ли я также порекомендовать вам настоятельно рекомендовать использовать подобные jQuery, Prototype или Dojo,если вы планируете писать сценарии Ajax?Написание скриптов, которые работают в кросс-браузерах, сложно сделать хорошо, и эти фреймворки сделают большую работу за вас.

2 голосов
/ 20 января 2011

Ваша req - это глобальная переменная, так как она определена без ключевого слова var, имейте это в виду.

Я считаю, что второй вызов перезаписывает первый.Это из-за (по умолчанию) асинхронного характера XMLHTTPRequest.Ваш первый вызов функции закончится, но загрузка страницы все еще продолжается.Затем второй вызов функции перезаписывает предыдущий запрос.

Это, однако, не объясняет, почему оба div заполняются результатом второго вызова.Я должен сказать, что я немного растерялся.

0 голосов
/ 20 января 2011

Это довольно распространенная проблема, особенно если вы не хотите принимать дополнительные меры, чтобы блокировать дальнейшие вызовы, пока первая не закончит загрузку. Это большая тема, которую я могу затронуть в посте, но в Интернете есть несколько примеров «Ajax Queue», которая эффективно управляет порядком полученных запросов.

jQuery имеет плагин для управления очередями, и я уверен, что большинство других JavaScript-фреймворков, таких как Prototype и MooTools, тоже будут. Если вы хотите придерживаться необработанного JavaScript, я бы взглянул на эту веб-страницу:

http://www.cmarshall.net/MySoftware/ajax/index.html

Он очень эффективно реализует очередь и имеет отличный пример ее использования.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...