goAJAX.php

<? 
 //baza  linków:
 $baza = array(
        array (
                'link' => 'http://example.com/link1',
                'text' => 'link1',
                'snip' => 'sniplet pierwszy',
                'opis' => '1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed tincidunt.'
        ),
        array (
                'link' => 'http://example.com/cosinnego',
                'text' => 'zwie link',
                'snip' => 'sniplet drugi',
                'opis' => '2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed tincidunt.'
        ),
        array (
                'link' => 'http://example.com/wakacje',
                'text' => 'wakacje w ameryce',
                'snip' => 'galeria zdjęć',
                'opis' => '3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed tincidunt.'
        )
 );
 if( $ajax = $_GET['ajax'] ){
    if($p = $_GET['opis']){
        $atxt = 'schowaj opis';
        $ahref = '?ukryj='.$p;
        $sc = 'var p = document.createElement("P");
                p.appendChild( document.createTextNode( "'.$baza[$p-1]['opis'].'" ) );
                a.parentNode.parentNode.insertBefore(p, a.parentNode )';
    } elseif( $p = $_GET['ukryj'] ){
        $atxt = 'pokaż opis';
        $ahref = '?opis='.$p;
        $sc = 'var els = a.parentNode.parentNode.getElementsByTagName("P")
                a.parentNode.parentNode.removeChild(els[0]);';
    }
    if( $k = $_GET['kasuj'] ){
        $sc = 'a.parentNode.parentNode.parentNode.removeChild(a.parentNode.parentNode)';
    }

    die(  <<<DIE
        $sc
        a.setAttribute( 'href', "$ahref" );
        a.replaceChild( document.createTextNode( "$atxt" ), a.firstChild );
DIE
   );
 }
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Testowanie AJAX handler</title>
<style type="text/css">
HTML{ width: 100%; }
BODY{ width: 500px; margin: 100px auto; }
UL{ list-style-type: none; margin: 0; padding: 0;}
LI{ border: 3px inset red; margin: 5px; padding: 3px;}
DIV.panel{ text-align: right; font-size: .8em; }
DIV.panel A{ background-color: #EEE; padding: 0 4px;}
DIV.panel A:hover{ background-color: #DDD; }
</style>
<script type="text/javascript">
    document.getElementsFoxAjax = function() {
        var children = document.getElementsByTagName('*') || document.all;
        var elements = new Array();
        for (var i = 0; i < children.length; i++){
                var child = children[i];
                if(
                   child.getAttribute('rel') == 'ajax'
                && child.tagName == 'A'
                && child.getAttribute('href')
                ) elements.push(children[i]);
        }
        return elements;
    }
    
        var ajaxLink = window.XMLHttpRequest
                ? new XMLHttpRequest()
                : new ActiveXObject("Microsoft.XMLHTTP");
        var ajaxTab = new Array();
        
    function ajaxHandlerBit(e){
        e.onclick = function(){ goAjax(this); return false; };
    }
    
    function ajaxHandler(){
        al = document.getElementsFoxAjax();
        for ( ii = 0; ii < al.length; ii++ )
                ajaxHandlerBit( al[ii] );
    }
    
    function goAjax(i){
                if( !window.XMLHttpRequest )
                        ajaxLink = new ActiveXObject("Microsoft.XMLHTTP");
                ajaxLink.onreadystatechange = function(){
                    if( ajaxLink.readyState == '1' ){
                        i.replaceChild( document.createTextNode(
                                        i.getAttribute('title') || 'loading...' ),
                                i.firstChild
                        );
                    } else if( ajaxLink.readyState == '4' ){
                        var res = ajaxLink.responseText;
                            //s = document.createElement( 'script' );
                            //s.setAttribute( 'type', 'text/javascript' );
                            //s.appendChild( document.createTextNode(
                          //    'function goneAjax(a){ ' + res + '}' ) );
                          //  document.body.appendChild(s);
                          //  goneAjax( i );
                          //  document.body.removeChild(s);
                          eval ( 'a = i; ' + res );
                    }
                }
                var link = i.getAttribute('href');
                link += (link.indexOf("?") != -1 ? '&' : '?') + 'ajax=1';
                
                ajaxLink.open('get', link );
                ajaxLink.send("");
    }
</script>
 <h1>goAJAX</h1>
 <a href="?">reset (od pocz±tku)</a>.
 <a href="#" onclick="ajaxHandler(); this.parentNode.removeChild(this);">uruchom ajaxHandler()</a>
<ul>
<?
if( $k = $_GET['kasuj'] ) unset( $baza[$k-1] );
$il = 0;
foreach( $baza as $link )
        echo '<li><a href="'.$link['link'].'">'.$link['text'].'</a> '.$link['snip']
                .( $_GET['opis'] == ++$il ? '<p>'.$link['opis'] .'</p>': '' )
                .'<div class="panel">'. (
                        $_GET['opis'] != $il
                        ? ' <a href="?opis='.$il.'" rel="ajax">pokaż opis</a>'
                        : ' <a href="?ukryj='.$il.'" rel="ajax">schowaj opis</a>'
                        ).' <a href="?kasuj='.$il.'" rel="ajax">kasuj</a>'
                .'</div>'
                ;
?>
        </ul>