Использование двух вызовов xmlhttprequest на странице - PullRequest
0 голосов
/ 12 мая 2010

У меня есть два подразделения, <div id=statuslist></div><div id=customerlist></div>

Функция sendReq() создает xmlhttprequest и извлекает данные в разделение.

sendReq('statuslist','./include/util.php?do=getstatuslist','NULL');

sendReq('customerlist','emphome.php?do=getcustomerlist','NULL');

У меня проблема,

Данные, извлеченные в 'customerlist', копируются в 'statuslist'

Если я изменю порядок вызовов функций,

sendReq('customerlist','emphome.php?do=getcustomerlist','NULL');

sendReq('statuslist','./include/util.php?do=getstatuslist','NULL');

Теперь данные 'statuslist' попадают в 'customerlist' ..

В чем проблема с кодом?

Ответы [ 3 ]

1 голос
/ 30 мая 2014

Это тоже моя проблема прямо сейчас. После тщательного исследования я обнаружил, что:

Если на вашем веб-сайте имеется более одной задачи AJAX, вы должны создать ОДНУ стандартную функцию для создания объекта XMLHttpRequest и вызывать ее для каждой задачи AJAX. - W3Schools.com

Кроме того, благодаря двум запросам xmlHttp на одной странице , которые перенаправляют меня на этот вопрос Используя два вызова xmlhttprequest на странице , я смог решить проблему. Кстати, это модификация ответа Addsy .

Сначала , создайте ОДНУ стандартную функцию для создания объекта XMLHttpRequest и вызывайте ее для каждой задачи AJAX. Пример:

function sendReq(url, callbackFunction)
{
    var xmlhttp

    if (window.ActiveXObject)
    {
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest)
    {
     xmlhttp = new XMLHttpRequest();
    } 

    xmlhttp.onreadystatechange = function()
    {
       if (xmlhttp.readyState==4 && xmlhttp.status=='200')
       {
            if (callbackFunction) callbackFunction(xmlhttp.responseText);
       }
    }

    xmlhttp.open("GET",url,true);
    xmlhttp.send();
}

Второй , вызовите функцию и передайте необходимые параметры. Например:

sendReq("orders_code_get.php?currentquery="+sql, function processResponse( response )
{
    document.getElementById("orders_content").innerHTML="";
    document.getElementById("orders_content").innerHTML=response;
});

Я доказал и протестировал этот код, и он работает.

0 голосов
/ 10 ноября 2014

На самом деле можно выполнить несколько асинхронных вызовов xhr, но вы должны дать им уникальный идентификатор в качестве параметра, чтобы иметь возможность хранить и загружать их локально в DOM.

Например, вы хотите зациклить массив и сделать ajax-вызов для каждого объекта. Это немного сложно, но этот код работает для меня.

var xhrarray={};
for (var j=0; j<itemsvals.length; j++){
                var labelval=itemsvals[j];
                // call ajax list if present.
                if(typeof labelval.mkdajaxlink != 'undefined'){
                    var divlabelvalue = '<div id="' + labelval.mkdid + '_' +          item.mkdcck + '" class="mkditemvalue col-xs-12 ' + labelval.mkdclass + '"><div class="mkdlabel">' + labelval.mkdlabel + ' :</div><div id="'+ j +'_link_'+ labelval.mkdid +'" class="mkdvalue">'+labelval.mkdvalue+'</div></div>';
                    mkdwrapper.find('#' + item.mkdcck + ' .mkdinstadivbody').append(divlabelvalue);

                    xhrarray['xhr_'+item.mkdcck] = new XMLHttpRequest();
                    xhrarray['xhr_'+item.mkdcck].uniqueid=''+ j +'_link_'+ labelval.mkdid +'';
                    console.log(xhrarray['xhr_'+item.mkdcck].uniqueid);
                    xhrarray['xhr_'+item.mkdcck].open('POST', labelval.mkdajaxlink);
                    xhrarray['xhr_'+item.mkdcck].send();
                    console.log('data sent');
                    xhrarray['xhr_'+item.mkdcck].onreadystatechange=function() {
                        if (this.readyState == 4) {
                            console.log(''+this.uniqueid);
                            document.getElementById(''+this.uniqueid).innerHTML = this.responseText;
                        }
                    };
                }
}

Вы должны установить каждый объект xhr в объекте глобальной переменной и определить значение xhrarray['xhr_'+item.mkdcck].uniqueid чтобы получить его уникальный идентификатор и загрузить его результат, где вы хотите.

Надеюсь, что это поможет вам в будущем.

0 голосов
/ 12 мая 2010

У меня было это раньше.

Обычно у вас есть проблема с областью видимости - у вас есть что-то подобное в вашей функции sendReq ()?

if (window.ActiveXObject)
{
 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
{
 xmlhttp = new XMLHttpRequest();
} 

И поэтому, когда вы делаете второй запрос, объект xmlhttp перезаписывается

Вам нужно создать замыкание, при котором ваши объекты xmlhttp не конфликтуют

1010 * например *

function sendReq(url, callbackFunction)
{
    var xmlhttp

    if (window.ActiveXObject)
    {
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest)
    {
     xmlhttp = new XMLHttpRequest();
    } 

    ...  probably some other stuff here, setting url etc ...

    xmlhttp.onreadystatechange = function()
    {
       if (xmlhttp.readyState==4&&xmlhttp.status='200')
       {
        if (callbackFunction) callbackFunction(xmlhttp.responseText);
       }
    }

    .. probably more stuff here  ( including xmlhttp.send() ) !! ...

}

затем вы можете передать функцию обратного вызова в качестве параметра, и когда данные будут успешно загружены, они будут переданы в функцию обратного вызова. Обратите внимание, что вам нужно будет передать фактическую функцию, а не только ее имя (поэтому без кавычек вокруг имени функции)

В качестве альтернативы, вы можете делать то, что я делаю, просто использовать jQuery - работает для большинства моих проблем с js;)

Надеюсь, это поможет

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