首頁 >後端開發 >php教程 >ajax實現無刷新分頁

ajax實現無刷新分頁

WBOY
WBOY原創
2016-08-08 09:30:21874瀏覽

       在普通的分頁中,一旦頁碼改變,則url改變,整個頁面都會刷新,如果我們希望頁碼的改變不影響整個網頁的變動,可以使用ajax技術。

       AJAX 是一種用於建立快速動態網頁的技術。 透過在後台與伺服器進行少量資料交換,AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下,對網頁的某個部分進行更新。

透過客戶端html程式碼,用ajax把伺服器中的資料透過get方式傳遞過來,顯示在html中。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus&#174;">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>ajax实现无刷新分页</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);
	}	
	//页面加载完成后,就调用该函数
	window.onload = function(){
		f1("fenye-data.php");
	}
  </script>
 </head>
 <body>
	<h2 align=&#39;center&#39;>ajax实现无刷新分页</h2>
	<div id=&#39;d&#39;></div>
 </body>
</html>
  

rrreee   


傳遞給js中的f1()方法。

           

進一步的,可以使用json實現無刷新效果的分頁,與ajax相比,json將html和css都寫在客戶端,從而節省了伺服器頻寬,也使用戶的請求速度加快,具體方法不再贅述。

以上就介紹了ajax實現無刷新分頁,包含了方面的內容,希望對PHP教程有興趣的朋友有所幫助。 🎜 🎜 🎜
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn