$ (документ) .ready и xhr - PullRequest
Новая
       8

$ (документ) .ready и xhr

0 голосов
/ 17 марта 2012

Я кодирую с помощью jquery.Моя проблема с $ (document) .ready (function (), которая вызывает две функции, выполняющие запросы xhr 

<script type="text/javascript">
$(document).ready(function() {
getIdCategories();
getnameCategories();
});
</script>

Иногда ни одна функция не работает, а иногда функции работают, но не работают по порядку !!

функции буксировки: 

function getIdCategories()
{

    var request = new XMLHttpRequest();

    request.open("GET","http://patisserie-orient.fr/prestashop/prestashop/api/categories?PHP_AUTH_USER="+PHP_AUTH_USER+"&ws_key="+ws_key,true);
    request.onreadystatechange = function()
    {
        if(request.readyState==4)
        {
            //alert("Status is:  "+request.status);
            if (request.status == 200 || request.status == 0)
            {
                response  = request.responseXML.documentElement;
                i=0;
                while(response.getElementsByTagName('category')[i]!=undefined)
                    {
                        idCategories[i]=response.getElementsByTagName('category')[i].getAttribute('id') ;
                        //alert(idCategories[i]);
                        i=i+1;
                    }

             }
         }

    }
    request.send();
}

и: 

function getnameCategories()
{

    var request = new XMLHttpRequest();
    if(i<idCategories.length)
        {
            request.open("GET","http://patisserie-orient.fr/prestashop/prestashop/api/categories/"+idCategories[i]+"?PHP_AUTH_USER="+PHP_AUTH_USER+"&ws_key="+ws_key,true);

            request.onreadystatechange = function()
                {
                    if(request.readyState==4)
                    {
                        //alert("Status2 is  "+request.status);
                        if (request.status == 200 || request.status == 0)
                        {
                            response1  = request.responseXML.documentElement;
                            nameCategories[i] = response1.getElementsByTagName('language')[0].firstChild.data;
                            //alert(nameCategories[i]);
                            $('#im'+i).html(nameCategories[i]);
                            $('#a'+i).show();
                            i++;


                         }
                     }
                }

            request.send();

        }   
    else
        {
            return;
        }

}

Ответы [ 3 ]

2 голосов
/ 17 марта 2012

Взгляните на $.ajax: http://api.jquery.com/jQuery.ajax/

Это намного проще, чем родной путь.

AJAX означает Асинхронный JavaScript и XML , где асинхронный означает, что скрипт не ожидает выполнения запроса. Это означает, что оба ваших запроса запускаются одновременно, и вы не можете знать, какой из них быстрее. НО вы можете запустить второй запрос в функции обратного вызова с первого запроса, поэтому второй запрос начинается после завершения первого. 

$(function(){
    $.ajax({
        type: 'GET',
        url: '',
        data: {},
        success:function(data){
            console.log('First request done');
            /* Start second request HERE */
        }

    });
});

$.ajax также предлагает синхронные запросы. при синхронных запросах скрипт ожидает завершения запроса: 

$(function(){
    $.ajax({
        type: 'GET',
        url: '',
        data: {},
        async: false
    });
    console.log('First request done');
    /*Start second request HERE */
});
1 голос
/ 17 марта 2012

Ajax вызов - это просто async запрос, это означает, что вы не можете контролировать порядок, который был завершен первым.Но вы все еще можете решить это, добавив еще callback. 

$(document).ready(function() {
    getIdCategories(function(){
        getnameCategories();
    }); 
});

// in 'getIdCategories'
function getIdCategories(cb) {
    if (/* ajax complete */) {
        // fire callback function
        cb && cb();
    }
}
0 голосов
/ 17 марта 2012

Функция jJuery AJAX имеет параметр async, для которого можно установить значение false, чтобы вызвать синхронное поведение 

$(function(){
$.ajax({
    type: 'GET',
    url: '',
    async: false,
    data: {},
    success:function(data){
        console.log('First request done');
        /* Start second request HERE */
    }

});

});

// вызов другой функции ajax

Это должно позволить вам контролировать порядок выполнения .. если только первый вызов не вернется, второй не начнется

...