<?
/*
* 使用一个数组作为数据容器
*/
$newsStorage = array();
$newsStorage[] = array("title"=>"News 1","content"=>"something about News 1");
$newsStorage[] = array("title"=>"News 2","content"=>"something about News 2");
$newsStorage[] = array("title"=>"News 3","content"=>"something about News 3");
$newsStorage[] = array("title"=>"News 4","content"=>"something about News 4");
$newsStorage[] = array("title"=>"News 5","content"=>"something about News 5");
/*
* 取得传递过来的id值，如果为空，则默认为0
*/
$id = $_REQUEST['id'];
if(empty($id))
{
$id = 0;
}
/*
* 取得索引为指定id的新闻数据
*/
$news = $newsStorage[$id];
/*
* 如果请求是由xmlhttprequest发起，则只输出新闻数据的json表示
*/
if($_REQUEST['requestby'] == 'xmlhttprequest')
{
echo json_encode($news);
exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>News</title>
<script type="text/javascript" src="prototype1.5.js"></script>
<script type="text/javascript">
/*
* 设置一个名为currentId的变量保存当前显示的新闻所对应的id值
*/
var currentId = 0;
/*
* 在window的load事件中初始化程序
*/
Event.observe(window,'load',function()
{
/*
* 取得所有#list下的a元素
*/
var links = $$("#list a");
/*
* 遍历所有取得的a元素并注册click事件处理函数
*/
links.each(function(link)
{
/*
* 注册click事件处理函数，在处理函数中发起Ajax请求并更新界面
*/
Event.observe(link,'click',function(evt)
{
/*
* 读取链接中href属性所包含的id值，并写入到页面hash值中去
*/
var currentId = link.href.replace(/^.*(\d+).*$/,'$1');
window.location.hash = 'id=' + currentId;
/*
* 根据a元素的href值发起请求并附加一个requestby参数，其值为xmlhttprequest，表示当前请求由xmlhttprequest发起
*/
new Ajax.Request(link.href,{
method:'GET',
parameters:'requestby=xmlhttprequest',
/*
* 在请求成功时处理返回的JSON数据并更新界面
*/
onSuccess:function(x)
{
var news = eval('(' + x.responseText + ')');
$('newsTitle').innerHTML = news.title;
$('newsContent').innerHTML = news.content;
}
});
/*
* 阻止浏览器的默认行为以避免页面的跳转
*/
Event.stop(evt);
});
});
/*
* 设置一个定时器来定时执行historyChange函数，这个函数用来检查页面的hash值是否发生了变化，并根据检查结果进一步进行处理
*/
setInterval(historyChange,100);
});
function historyChange()
{
/*
* 取得当前hash值中的id数据，如果hash值为空，则id默认为0
*/
if(window.location.hash != '')
{
var id = window.location.hash.replace(/^.*(\d+).*$/,'$1');
}
else
{
var id = 0;
}
/*
* 如果id与currentId相等，则直接返回
*/
if(id == currentId)
{
return;
}
/*
* 否则就将id值赋予currentId，使用该id值更新界面
*/
currentId = id;
new Ajax.Request('news.php',{
method:'GET',
parameters:'id=' + id + '&requestby=xmlhttprequest',
/*
* 在请求成功时处理返回的JSON数据并更新界面
*/
onSuccess:function(x)
{
var news = eval('(' + x.responseText + ')');
$('newsTitle').innerHTML = news.title;
$('newsContent').innerHTML = news.content;
}
});
}
</script>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font-size:11px;
font-family:Tahoma;
}
h1 {
height:80px;
color:#ccc;
background-color:#333;
line-height:80px;
text-align:center;
font-size:24px;
}
h2 {
font-size:18px;
text-align:center;
border-bottom:1px solid #ccc;
margin-bottom:5px;
height:30px;
line-height:30px;
}
#list {
float:left;
clear:left;
width:20%;
text-align:center;
}
#list li {
list-style:none;
height:20px;
margin-bottom:1px;
}
#list li a{
display:block;
background-color:#ccc;
line-height:20px;
color:#333;
font-weight:bold;
text-decoration:none;
}
#list li a:hover {
background-color:#666;
color:#eee;
}
#detail {
float:left;
margin-left:10px;
width:79%;
}
#newsContent {
text-indent:2em;
}
</style>
</head>
<body>
<h1>News List System</h1>
<div id="main">
<ul id="list">
<? for($i = 0; $i < sizeof($newsStorage); $i ++)
{
echo '<li><a href="news.php?id='.$i.'" title="'.$newsStorage[$i]["title"].'">'.$newsStorage[$i]["title"].'</a></li>';
}
?>
</ul>
<div id="detail">
<h2 id="newsTitle"><?=$news["title"]?></h2>
<p id="newsContent"><?=$news["content"]?></p>
</div>
</div>
</body>
</html>
AJAX技术（从入门到精通）
需积分: 10 154 浏览量
2009-07-14
16:22:47
上传
评论
收藏 2.84MB RAR 举报
AJAX技术（从入门到精通） （625个子文件） 
loader.asp 14KB loader.asp 14KB loader.asp 14KB default.asp 165B default.asp 165B default.asp 165B index.asp 164B index.asp 164B index.asp 164B Default.aspx 505B Default2.aspx 503B Web.Config 2KB Default2.aspx.cs 5KB Default.aspx.cs 4KB firebug.css 3KB css.css 2KB css.css 1KB style.css 1014B style.css 606B Thumbs.db 314KB Thumbs.db 4KB
光盘使用说明模板.DOC 94KB .DS_Store 6KB ._.DS_Store 82B jsap.hta 8KB jsap.hta 8KB jsap.hta 8KB demo3.htm 1KB aptana.assert_demo.htm 1KB cache.htm 1005B demo2.htm 907B debugger_test.htm 547B aptana.trace_demo.htm 538B debugger_log_demo.htm 513B __web.htm 491B __web.htm 491B __web.htm 491B demo1.htm 379B
style_demo.html 4KB index.html 4KB removeChild_demo.html 4KB index.html 4KB demo.html 3KB simpledemo2.html 3KB index.html 3KB simpledemo3.html 3KB floatAds.html 3KB create_add_node_demo.html 3KB simpledemo.html 3KB drag_div_demo.html 3KB event_object_demo.html 3KB loadXML_demo.html 2KB async_load_demo.html 2KB error_load_demo.html 2KB index.html 2KB demo.html 2KB sync_load_demo.html 2KB executor.html 2KB executor.html 2KB executor.html 2KB remove_event_handler_demo.html 2KB brother_child_demo.html 2KB outerHTML.html 2KB encapsulation.html 2KB class.html 2KB addEventListener_demo.html 2KB attachEvent_demo.html 1KB Gmail导航菜单源代码.html 1KB inhefit.html 1KB innerText.html 1KB prototype.html 1KB Getter_Setter.html 1KB document.forms_demo.html 1KB login_2.html 1KB replaceChild_demo.html 1KB index.html 1KB insertBefore_demo.html 1KB async_test.html 1KB getElementsByClassName.html 1KB namespace.html 1KB outerText.html 1KB child_code_demo.html 1KB inherit.html 1KB parentNode_demo.html 1KB cloneNode_demo.html 1KB login.html 1KB getElementsByName_demo.html 1KB show_hide_toggle.html 1KB polymorphism.html 1KB form_elements.html 1KB aggregate.html 1KB stopObserving.html 1KB responseXML.html 1KB output_json.html 1KB main.html 1KB date_demo.html 1KB history_demo_3.html 1020B history_demo_2.html 1020B getElementsByTagName_demo.html 1014B custom_attribute.html 1001B共 625 条
- 1
- 2
- 3
- 4
- 5
- 6
- 7
资源评论
