基于ajax實(shí)現(xiàn)無刷新分頁的方法
本文實(shí)例講述了基于ajax實(shí)現(xiàn)無刷新分頁的方法。分享給大家供大家參考。具體如下:
在普通的分頁中,一旦頁碼改變,則url改變,整個(gè)頁面都會(huì)刷新,如果我們希望頁碼的改變不影響整個(gè)網(wǎng)頁的變動(dòng),可以使用ajax技術(shù)。
AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)。通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下,對(duì)網(wǎng)頁的某部分進(jìn)行更新。
通過客戶端html代碼,用ajax把服務(wù)器中的數(shù)據(jù)通過get方式傳遞過來,顯示在html中。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>ajax實(shí)現(xiàn)無刷新分頁</title>
<script type="text/javascript">
function f1(url){
var xhr = new XMLHttpRequest;
xhr.onreadystatechange = function() {
if(xhr.readyState==4){
document.getElementById('d').innerHTML = xhr.responseText;
}
}
xhr.open("get",url);
xhr.send(null);
}
//頁面加載完成后,就調(diào)用該函數(shù)
window.onload = function(){
f1("fenye-data.php");
}
</script>
</head>
<body>
<h2 align='center'>ajax實(shí)現(xiàn)無刷新分頁</h2>
<div id='d'></div>
</body>
</html>
在分頁類中,我們只需更改超鏈接的地址,將原來的地址更改為通過js調(diào)用f1()方法,將鏈接傳遞給js中的f1()方法。
<a href='javascript:f1(\"{$this->uri}&page=".($this->page+1)."\")'>
進(jìn)一步的,可以使用json實(shí)現(xiàn)無刷新效果的分頁,與ajax相比,json將html和css都寫在客戶端,從而節(jié)省了服務(wù)器帶寬,也使用戶的請(qǐng)求速度加快,具體方法不再贅述。
希望本文所述對(duì)大家的Ajax程序設(shè)計(jì)有所幫助。
- Flash & Ajax 操作 XML 實(shí)例:無刷新分頁
- php ajax無刷新分頁,支持id定位
- jquery 插件 web2.0分格的分頁腳本,可用于ajax無刷新分頁
- JS+Ajax+Jquery實(shí)現(xiàn)頁面無刷新分頁以及分組 超強(qiáng)的實(shí)現(xiàn)
- ajax實(shí)現(xiàn)無刷新分頁(php)
- JQuery+Ajax無刷新分頁的實(shí)例代碼
- asp.net中利用Jquery+Ajax+Json實(shí)現(xiàn)無刷新分頁的實(shí)例代碼
- php+ajax實(shí)現(xiàn)無刷新分頁的方法
- asp.net使用AJAX實(shí)現(xiàn)無刷新分頁
- Ajax無刷新分頁的性能優(yōu)化方法
相關(guān)文章
jquery中的ajax如何返回結(jié)果而非回調(diào)方式即為同順序執(zhí)行
默認(rèn)ajax是異步的,也就是在未響應(yīng)到結(jié)果時(shí)不影響向下的執(zhí)行,如果非要返回結(jié)果的話,將ajax 中的參數(shù) async 改為 false,即為同順序執(zhí)行2014-05-05
Ajax 框架之SSM整合框架實(shí)現(xiàn)ajax校驗(yàn)
這篇文章主要介紹了Ajax 框架之SSM整合框架實(shí)現(xiàn)ajax校驗(yàn),需要的朋友可以參考下2017-04-04
那些年,我還在學(xué)習(xí)Ajax 學(xué)習(xí)筆記
Ajax不用說,每個(gè)做web開發(fā)的同志都知道,因?yàn)樗菍W(xué)習(xí)web開發(fā)必經(jīng)之路,不管你是做asp.net,還是javaWeb,還是PHP2012-03-03
ajax提交到j(luò)ava后臺(tái)之后處理數(shù)據(jù)的實(shí)現(xiàn)
下面小編就為大家?guī)硪黄猘jax提交到j(luò)ava后臺(tái)之后處理數(shù)據(jù)的實(shí)現(xiàn)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
AJAX 用戶唯一性驗(yàn)證實(shí)現(xiàn)代碼
用ajax實(shí)現(xiàn)用戶名的檢測(cè),提示是否重復(fù)的實(shí)現(xiàn)代碼。2009-11-11

