php ajax练习

为什么80%的码农都做不了架构师？>>>   

实现ajax请求页面,为了实现后台代替frame后台框架。
这个ajax解决了ajax自身无法使用浏览器前进、后退功能丧失的问题。
目前ajax与frame的性能方面还在测试。

以下为jquery的代码片段

<!-- lang: js -->
$(document).ready(function(e) {
    var processHash = function () { 
        var myData = location.hash.replace("#", "");
        //格式化掉myData里面的#号
            if (myData){
            //如果地址myData变量值存在那么
                chuliAjax(myData)
                //运行chuliAjax函数
            }
    }

    window.onload = processHash;
    //加载processHash函数 
    window.onhashchange = processHash;
    //地址改变就执行processHash函数;

    function chuliAjax(myData){
        $.ajax({
            type:'post',
            url:'chuli.php',
            data:'data='+myData,
            dataType:'html',
            success:function(Data){
                $(".contBox").html(Data)
            },
            error:function(){
                alert("ajax提交失败的处理函数！")
            }
        });
        //ajax结束；
    }

    $(".siderBar ul li span").mouseenter(function(){
    //当鼠标挪到siderBar ul li span上时执行以下脚本；
        $(this).addClass("hover");
        //这个元素添加一个hover的Class；
        $(this).click(function(){
        //点击这个元素时；
            var myData = $(this).attr("myData");
            //变量myData的值为这个被点击的元素的myData属性值；
            window.location.hash=(myData);
            //地址栏记录名为myData的变量地址值；
            chuliAjax(myData);//执行chuliAjax函数；
            if($(this).attr("id")!=="cursor"){
            //判断如果这个元素的属性为ID的值不等于cursor那么；
                $("#cursor").removeAttr("id");
                //名为cursor的id将删除id这个自身的属性；
                $(this).attr("id","cursor");
                //这个元素添加id值为cursor；
            }
		
        });

    });

    $(".siderBar ul li span").mouseleave(function(){
    //当鼠标移出siderBar ul li span上时执行以下脚本；
        $(this).removeClass("hover");
        //删除这个Class属性的hover值；
    });

});

以下为shou.php代码片段

<!-- lang: php -->
$myData = $_POST['data'];

function openFile($myData){
    $arr= array(
        'openOne'=>'page/1.php',
        'openTwo'=>'page/2.php',
        'openThree'=>'page/3.php',
        'openFour'=>'page/4.php',
        'openFive'=>'page/5.php',
        'openSix'=>'page/6.php',
        'openSeven'=>'page/7.php',
        'openEight'=>'page/8.php',
        'openNine'=>'page/9.php',
        'openTen'=>'page/10.php'
    );

    include($arr[$myData]);
}

openFile($myData);

以下为html代码结构片段

<!-- lang: html -->
<div class="siderBar">
    <ul>
        <li><span myData="openOne">打开页面一</span></li>
        <li><span myData="openTwo">打开页面二</span></li>
        <li><span myData="openThree">打开页面三</span></li>
        <li><span myData="openFour">打开页面四</span></li>
        <li><span myData="openFive">打开页面五</span></li>
        <li><span myData="openSix">打开页面六</span></li>
        <li><span myData="openSeven">打开页面七</span></li>
        <li><span myData="openEight">打开页面八</span></li>
        <li><span myData="openNine">打开页面九</span></li>
        <li><span myData="openTen">打开页面十</span></li>
    </ul>
</div>

<div class="contBox"></div>

以下为CSS代码片段

<!-- lang: css -->
body{
     margin:40px;
}

*{
    margin:0px;
    padding:0px;
    list-style:none;
}

.siderBar{
    width:120px;
    height:300px;
    float:left;
}

.siderBar ul li{
    width:120px;
    height:30px;
    float:left;
}

.siderBar ul li span{
    width:100px;
    height:30px;
    line-height:30px;
    padding:0 10px 0 10px;
    font-size:12px;
    display:block;
    background:#eee;
    cursor:pointer;
}

.siderBar ul li .hover{
    background:#ccc;
}

.siderBar ul li #cursor{
    width:100px;
    border-left:5px solid #000;
    background:#900;
    padding:0 10px 0 5px;
    color:#FFF;
}

.contBox{
    width:280px;
    height:280px;
    float:left;
    margin-left:1px;
    display:inline;
    background:#900;
    padding:10px;
    color:#FFFF00;
    font-size:12px;
}

转载于:https://my.oschina.net/dodoro/blog/157624