前端之家收集整理的这篇文章主要介绍了
Ajax小记，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
<html lang="en">
<head>
<Meta name="viewport" content="width=device-width,initial-scale=1">
<title>Race</title>
<link href="race/css/index.css" rel="stylesheet" type="text/css" />
<link href="race/css/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="race/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="race/js/jquery-ui.min.js"></script>
<script type="text/javascript"> function getXMLRacers(){ $.ajax({ url:"race/finishers.xml",cache:false,dataType:"xml",success: function(xml){ $('#finishers_m').empty(); $('#finishers_f').empty(); $('#finishers_all').empty(); $(xml).find("runner").each(function() { var info='<li>Name:'+$(this).find("fname").text()+''+$(this).find("lname").text()+'. Time:'+$(this).find("time").text()+'</li>'; if($(this).find("gender").text()=="m"){ $('#finishers_m').append(info) }else if($(this).find("gender").text()=="f"){ $('#finishers_f').append(info); }else{} $('#finishers_all').append(info); }); } }) getTime(); } function getTime(){ var a_p=""; var d=new Date(); var curr_hour=d.getHours(); (curr_hour<12)? a_p="AM":a_p="PM"; (curr_hour==0)? curr_hour=12:curr_hour=curr_hour; (curr_hour>12)?curr_hour=curr_hour-12:curr_hour=curr_hour; var curr_min=d.getMinutes().toString(); var curr_sec=d.getSeconds().toString(); if(curr_min.length==1){curr_min="0"+curr_min;} if(curr_sec.length==1){curr_sec="0"+curr_sec;} $("#updatedTime").html(curr_hour+":"+curr_min+":"+curr_sec+" "+a_p); } $(function() { $( "#main" ).tabs(); var FREQ=10000; function startAJAXcalls(){ setTimeout(function(){ getXMLRacers(); startAJAXcalls(); },FREQ ); } getXMLRacers(); startAJAXcalls(); } ); </script>
</head>
<body>
<header>
<h2>2011 Race Finishers! </h2>
</header>
<div id="main">
<ul class="idTabs">
<li><a href="#male">Male Finishers</a></li>
<li><a href="#female">Female Finishers</a></li>
<li><a href="#all">All Finishers</a></li>
</ul>
<div id="male">
<h4>Male Finishers</h4>
<ul id="finishers_m"></ul>
</div>
<div id="female">
<h4>Female Finishers</h4>
<ul id="finishers_f"></ul>
</div>
<div id="all">
<h4>All Finishers</h4>
<ul id="finishers_all"></ul>
</div>
</div>
<footer>
<h4>Congratulations to all our finishers!</h4>
<br/>Last Update:<div id="updatedTime"></div>
</footer>
</body>
</html>
