[AJAX] Не получается вогнать информацию одновременно в 2 DIV.

Vahan · 11 Авг 2011

Здравствуйте, у меня проблема.

Я тут привёл код который описывает суть проблемы (Я для примера специально всё в одном файле написал.):

PHP:

<?
if($_POST['page']=='left'){
    echo "In Left Box";
    exit;
}elseif($_POST['page']=='right'){
    echo "In Right Box";
    exit;
}
?>
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
	<title>AJAX TEST</title>
</head>

<body>
<script type="text/javascript">
function getTaskXMLHTTP(){
    var ajax = false;
    try{
        ajax = new XMLHttpRequest();
    } 
    catch(blad){
        try{
            ajax = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(blad){
            try{
                ajax = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(blad){
                ajax = false;
            }
        }
    }    
    return ajax;
}

function getSide(side){
    var page = 'test2.php';
    var adresURL = "page=" + side;
    
    myAjax.open( "POST", page, true );
    myAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    if(side == 'left'){
        myAjax.onreadystatechange = showLeftSide;
    }
    else if(side == 'right'){
        myAjax.onreadystatechange = showRightSide;
    }
    myAjax.send(adresURL);
}

function showLeftSide(){
    if(myAjax.readyState == 4){
        if(myAjax.status = 200){
            var side = myAjax.responseText;
            document.getElementById('left_side').innerHTML = side;
        }
    }
    else{
        document.getElementById('left_side').innerHTML = 'Loading...';
    }
}

function showRightSide(){
    if(myAjax.readyState == 4){
        if(myAjax.status = 200){
            var side = myAjax.responseText;
            document.getElementById('right_side').innerHTML = side;
        }
    }
    else{
        document.getElementById('right_side').innerHTML = 'Loading...';
    }
}

var myAjax = getTaskXMLHTTP();
</script>

<table border="1">
<tr>
    <td width="100"><a href="javascript:getSide('left')">Left box!</a></td>
    <td width="100"><a href="javascript:getSide('right')">Right box!</a></td>
</tr>
<tr>
    <td id="left_side"></td>
    <td id="right_side"></td>
</tr>
</table>

</body>
</html>

Не могу понять как сделать так чтоб при нажатии на ссылку "<a href="javascript:getSide('right')">Right box!</a>", открывалась инфа из "In Right Box", при этом не исчезала инфа после нажатия на ссылку "<a href="javascript:getSide('left')">Left box!</a>".

Сейчас при вторичном нажатии на ссылку, в одной колонке пишет "Loading...", в другой ожидаемый текст.
Как можно сделать чтоб получить одновременно оба результата, в своих колонках?

Вопрос решается если добавить ещё 1 реквест myAjax2 = getTaskXMLHTTP(); и в коде поменять нужную часть на myAjax2... Но разве это правильно?

Vahan · 11 Авг 2011

Вроде решил проблему, но такая форма, правильна?

PHP:

function getTaskXMLHTTP(){
    var ajax = false;
    try{
        ajax = new XMLHttpRequest();
    } 
    catch(blad){
        try{
            ajax = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(blad){
            try{
                ajax = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(blad){
                ajax = false;
            }
        }
    }    
    return ajax;
}

function getSide1(side){
    var myAjaxSide1 = getTaskXMLHTTP();
    var page = 'test.php';
    var adresURL = "page=" + side;
    
    myAjaxSide1.open( "POST", page, true );
    myAjaxSide1.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    myAjaxSide1.onreadystatechange = showLeftSide;
    myAjaxSide1.send(adresURL);
}

function showLeftSide(){
    if(myAjaxSide1.readyState == 4){
        if(myAjaxSide1.status = 200){
            var side = myAjaxSide1.responseText;
            document.getElementById('left_side').innerHTML = side;
        }
    }
    else{
        document.getElementById('left_side').innerHTML = 'Loading...';
    }
}

function getSide2(side){
    var myAjaxSide2 = getTaskXMLHTTP();
    var page = 'test.php';
    var adresURL = "page=" + side;
    
    myAjaxSide2.open( "POST", page, true );
    myAjaxSide2.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    myAjaxSide2.onreadystatechange = showRightSide;
    myAjaxSide2.send(adresURL);
}

function showRightSide(){
    if(myAjaxSide2.readyState == 4){
        if(myAjaxSide2.status = 200){
            var side = myAjaxSide2.responseText;
            document.getElementById('right_side').innerHTML = side;
        }
    }
    else{
        document.getElementById('right_side').innerHTML = 'Loading...';
    }
}
</script>

[AJAX] Не получается вогнать информацию одновременно в 2 DIV.

Vahan

Новичок

Vahan

Новичок