Use AJAX to implement non-refreshing data pagination and ajax to refresh data pagination
Previously, when using Asp. Net, The GridView control was used. Although ugly, it is still very powerful. Here, we will show you a more powerful way-Using AJAX to retrieve data from the server directly without refreshing the page.
I. Implementation Process
Note: The following content is used on the server.
First, you must create several files under the server, such as page1.txt, page2.txt, and page3.txt.
Add an array to each file as follows:
Copy codeThe Code is as follows: [{user: 'blue', pass: '000000'}, {user: 'aaa', pass: 'dsfaa'}, {user: 'ares ', pass: '000000'}]
Page 1 content
Front-end HTML code:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = UTF-8 "/> <title> AJAX implementation paging, </title> <script src =" ajax. js "> </script> <script> window. onload = function () {var oUl = document. getElementById ('ul1'); var aBtn = document. getElementsByTagName ('A'); var I = 0; for (I = 0; I <aBtn. length; I ++) {// attach an initial value index to each button, aBtn [I]. index = I; aBtn [I]. onclick = function () {// call the AJAX function ajax('page'{(this.index}1{'.txt ', function (str) {// obtain the data var aData = eval (str); oUl. innerHTML = ''; for (I = 0; I <aData. length; I ++) {var oLi = document. createElement ('lil'); oLi. innerHTML = '<strong>' + aData [I]. user + '</strong> <I>' + aData [I]. pass + '</I>'; oUl. appendChild (oLi );}});};}}; </script>
Encapsulated AJAX and JavaScript code:
/* AJAX encapsulation function url: the address of the file to be read by the system fnSucc: A function. After the file is retrieved, it will call */function ajax (url, fnSucc, fnFaild) {// 1. create an Ajax object var oAjax = null; if (window. XMLHttpRequest) {oAjax = new XMLHttpRequest ();} else {oAjax = new ActiveXObject ("Microsoft. XMLHTTP ");} // 2. connect to the server oAjax. open ('get', url, true); // 3. send a request to oAjax. send (); // 4. receives the oAjax response from the server. onreadystatechange = function () {if (oAjax. readyState = 4) // complete {if (oAjax. status = 200) // {fnSucc (oAjax. responseText);} else {if (fnFaild) fnFaild (oAjax. status );}}};}
Final effect:
Display Effect
Ii. Summary
AJAX requires a lot of experimentation and practice. Paging is a good idea. It can speed up access and provide a good way to achieve better results in the future.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
