实现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;
}