介紹：
ajax = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）
ajax 是與服務器交換數(shù)據(jù)并更新部分網(wǎng)頁的藝術，在不重新加載整個頁面的情況下。
換一換功能需求：
1）有一組元素
2）點擊后更新元素內(nèi)容
3）不創(chuàng)造新元素
下面進行思路解析：
1：靜態(tài)布局一組li元素，用于接收后臺傳送的數(shù)據(jù)內(nèi)容；
2：點擊事件發(fā)生后，用jquey的ajax數(shù)據(jù)交互
3：更新內(nèi)容
一、靜態(tài)頁面搭建
<style>
a{text-decoration: none;}
span{margin-left:10px;}
</style>
<body>
<input type="button" value="換一換">
<ul id="box">
<!-- <li><a href="#">熱點1</a><span>10</span></li>
<li><a href="#">熱點2</a><span>10</span></li>
<li><a href="#">熱點3</a><span>10</span></li> -->
</ul>
</body>
二、js代碼書寫
整體思路：
點擊事件后在ajax中對成功傳入的r，進行數(shù)組排序，按照arr.sort()由于返回值出現(xiàn)正負的特性，在利用0.5-Math.random() 隨機數(shù)產(chǎn)生的正負，進行不規(guī)律傳遞取數(shù)據(jù)，但尚未解決上次出現(xiàn)的不再出現(xiàn)。。。
<script src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(()=>{
$('input').click(()=>{
$.ajax({
url:'weibo.data',
cache:false,
dataType:'json',
success:r=>{
$('#box').html('');
r.sort(()=>{
return 0.5-Math.random();
});
/*$.each(r,(i,v)=>{
if(i<3){
$(`<li><a href="${v.url}">${v.title}</a><span>${v.readCount}</span></li>`).appendTo('#box');
}else{
return false;
}
})*/
for(let i=0;i<3;i++){
let v = r[i];
$(`<li><a href="${v.url}">${v.title}</a><span>${v.readCount}</span></li>`).appendTo('#box');
}
},
error:()=>{
alert('出錯了！');
}
})
})
});
</script>
代碼更多使用ES6編寫 不考慮低級瀏覽器~
