There are two files in total. The first file is index.html, which is used to display files, and the second file is processed by the p. asp file and returned to the page.
Let's take a look at the results:
Below is the page index.html
<Html>
<Head>
<Title> AJAX static paging </title>
<Meta http-equiv = "content-type" content = "text/html; charset = gb2312">
<Style type = "text/css">
<! --
Body {text-align: center; font: 14px Verdana, sans-serif ;}
A: link, a: visited {color: # 00f; text-decoration: none ;}
A: hover {color: # f00; text-decoration: underline ;}
# Main {width: Pixel px; background: # f2f2f2; border: 1px #999 solid; padding: 10px; text-align: left; line-height: 150%; margin: 0 auto ;}
# Title {width: 100%; line-height: 30px; border-bottom: 1px #999 solid; display: table ;}
# Left {float: left; width: 50%; text-align: left; font-size: 14px; font-weight: bold ;}
# Right {float: left; width: 50%; text-align: right ;}
# Content {width: 100%; margin: 10px 0; clear: both ;}
# Download {width: 100%; margin: 10px 0; line-height: 150% ;}
-->
</Style>
<Script type = "text/javascript">
<! --
Function createAjax () {// This function returns the XMLHTTP object instance.
Var _ xmlhttp;
Try {
_ Xmlhttp = new ActiveXObject ("Microsoft. XMLHTTP"); // method for creating IE
}
Catch (e ){
Try {
_ Xmlhttp = new XMLHttpRequest (); // FF and other browser creation methods
}
Catch (e ){
_ Xmlhttp = false; // If creation fails, false is returned.
}
}
Return _ xmlhttp; // return the xmlhttp object instance
}
Function getweblist (page) {// This function is used to obtain paging data.
Var xmlhttp = createAjax (); // create the variable xmlhttp and assign the object instance created by the createAjax () function to it
If (xmlhttp) {// if the xmlhttp object is successfully created, the program in the condition statement is executed.
Var content = document. getElementById ('content'); // Obtain the object whose id is content on the page.
Xmlhttp. open ('GET', 'server. asp? Page = '+ page +' & n = '+ Math. random (), true); // open the connection to the server, where get is the connection method, server. asp is the page to be connected. There are two parameters. The first parameter page is the page number of data to be returned, and the second parameter n is a random number. In this way, the URLs sent each time are different, it is equivalent to sending a new request to the server to prevent the browser from caching data.
Xmlhttp. onreadystatechange = function () {// specifies an event for the readyState attribute of the xmlhttp object. When the attribute value is changed, the program is executed.
If (xmlhttp. readyState = 4 & xmlhttp. status = 200) {// If xmlhttp. readyState = 4 and xmlhttp. status = 200, the program in the execution condition, where readyState has five values. 4 indicates that the request is completed, and the data submitted by the client to the server has arrived successfully, status has N multi-value -_-!!, 200 indicates that the server sends data to the client.
Content. innerHTML = unescape (xmlhttp. responseText); // decodes the data returned by the server and writes it to the specified ID.
}
Else {
Content. innerHTML = '<span style = "color: red"> extracting data from the server ...... </span> '; // if the transfer is not completed on the server, the user is prompted that the transfer is in progress.
}
}
Xmlhttp. send (null); // send a request to the server. Because it is a get request, it is directly appended to the URL. Therefore, the data in parentheses is null and can be left empty in IE, but FF must be added with null, otherwise the sending will fail.
}
}
Function edit () {// edit the function that displays the number of entries by page
Var str = '<form style = "margin: 0 "> <input type =" text "id =" pagesize "size =" 3 "> entries <input type =" button "id =" savebtn "value =" save "onclick =" save () "> <input type =" button "id =" cancelbtn "value =" cancel "onclick =" rightinfo () "> </form> '// define an html string
Var right = document. getElementById ('right'); // obtain the right object on the page.
Right. innerHTML = str; write the value of the str variable to this object.
}
Function rightinfo () {// The original information in the right object. Please call
Document. getElementById ('right '). innerHTML = '<a href = "javascript: void (edit ()" title = "modify the number of entries displayed on each page"> Edit </a> ';
}
Function save () {// save the number of display items after modification
Var pagesize = document. getElementById ('pagesize'); // This will not be written and will be the same as above.
If (pagesize. value = ''|/[0-9] + /. test (pagesize. value) = false) {// determines whether the new data entered by the user is a number.
Alert ("Please enter the number of entries displayed on each page correctly! ");
Return;
}
Var xmlhttp = createAjax (); // create an object
If (xmlhttp ){
Xmlhttp. open ('GET', 'set. asp? Pagesize = '+ pagesize. value +' & n = '+ Math. random (), true) // You can view the preceding parameters.
Xmlhttp. onreadystatechange = function (){
If (xmlhttp. readyState = 4 & xmlhttp. status = 200 ){
Document. getElementById ('right'). innerHTML = unescape (xmlhttp. responseText); // write the string returned from the server first. If it succeeds, it will be written to completed.
Getweblist (1); // obtain the data on the first page after the new modification.
SetTimeout ('rightinfo () ', 3000); // write the original string of the right object 3 seconds later.
}
Else {
Document. getElementById ('pagesize'). disabled = true; // Set the elements of several FORM forms as unchangeable.
Document. getElementById ('savebtn '). disabled = true;
Document. getElementById ('cancelbtn '). disabled = true;
}
}
Xmlhttp. send (null); // send the request.
}
}
// -->
</Script>
</Head>
<Body onload = "getweblist (1); rightinfo ();">
<Div id = "main">
<Div id = "title">
<Div id = "left"> AJAX implementation of static paging </div>
<Div id = "right"> </div>
</Div>
<Div id = "content"> </div>
<Div id = "download">
Author: Eleven wolves <br/>
</Div>
</Div>
</Body>
</Html>
For the p. asp file, see the next article,
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
