Multiple AJAX requests at the same time not working

[minitauros]

Hello,

I'm encountering an AJAX problem when I try to execute multiple AJAX requests at the same time. What I want to do is delete a message and display the status (succes or failure) of that in div1, and refresh the messages on the page in div2. This needs (for as far as my knowledge reaches) two AJAX actions from which I both need the responseText.

The problem
What happens when I execute my script is that the second action (refresh a part of the page) happens before the deletion is executed. The result of this is that when the deletion has been executed, the page is already updated, and the deleted message is still there.

The script
What I now have is:

function doAjax(url, element_id, img_url)
{
    var ajaxObject = createAjaxObject();
    ajaxObject.open('GET', url, true);
    ajaxObject.onreadystatechange = function()
    {
        if(ajaxObject.readyState==4 && ajaxObject.status==200)
        {
            document.getElementById(element_id).innerHTML = ajaxObject.responseText;
            delete ajaxObject;
        }
        else
        {
            if(img_url)
                document.getElementById(element_id).innerHTML = '<img src="' + img_url + '" alt=""/>';
        }
    };
    ajaxObject.send();
}

to execute the actions, and

function createAjaxObject()
{
    var ajaxObject;

    try
    {
        ajaxObject = new XMLHttpRequest();
    }
    catch (e)
    {
        try
        {
            ajaxObject = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e)
        {
            try
            {
                ajaxObject = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e)
            {
                return;
            }
        }
    }
    
    return ajaxObject;
}

to create the AJAX object.

[vibhaJ]

Core javascript ajax is headache.
Why don't you try jquery ajax.
check here
Its too easy to operate.

[minitauros]

It's not that I mind that it's a headache, I'd love to understand it :). Upgrade my scripting skills a bit.

[Airshow]

Minitauros,

From your description, there appears to be no need for two separate ajax actions.

By returning the updated list data (or a null response for failure) from the "delete" action, you can drive both div1 and div2 from a single response handler.

If you really want to have two ajax actions, then you need to initiate the second in the response handler of the first. Thus, they will execute in cascade, not in parallel, and the order of execution is guaranteed.

Airshow