Home >Backend Development >PHP Tutorial >Ajax realizes paging without refresh
Ajax realizes paging without refresh
- WBOYOriginal
- 2016-08-08 09:30:21875browse
In ordinary paging, once the page number changes, the url changes and the entire page will be refreshed. If we want the change in the page number not to affect the changes in the entire web page, we can use ajax technology.
AJAX is a technology for creating fast, dynamic web pages. AJAX allows web pages to be updated asynchronously by exchanging a small amount of data with the server in the background. This means that parts of a web page can be updated without reloading the entire page.
Through the client html code, use ajax to pass the data from the server through the get method and display it in 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实现无刷新分页</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='center'>ajax实现无刷新分页</h2>
<div id='d'></div>
</body>
</html>
In the paging class, we only need to change the address of the hyperlink, change the original address to call the f1() method through js, and convert the link Passed to the f1() method in js.
json implements paging without refresh effect. Compared with ajax, json writes both html and css on the client, thus saving server bandwidth and speeding up user requests. The specific method will not be described again.