The Ajax space and paging function _javascript technique used in the commercial edition of the Science News

The SQL Business version of the use of Ajax space and paging functions, their JS code learning is very good
Ajax controls
function Pageajax () {
var xhrobj=null;
if (window. XMLHttpRequest)
{
Xhrobj=new XMLHttpRequest ();
}
else if (window. ActiveXObject)
{
try{
Xhrobj=new ActiveXObject ("Microsoft.XMLHTTP");
}
catch (E1)
{
try{
Xhrobj=new ActiveXObject ("MSXML2"). XMLHTTP ");
}
catch (E2) {
try{
Xhrobj=new ActiveXObject ("MSXML3"). XMLHTTP ");
}
catch (E3) {
Alert ("Create Ajax failed:" +e3)
}
}
}
}
Else
{
Alert ("Browser not recognized");
}
return xhrobj;
}

function Page (curpage,labelid,classid,installdir,url,refreshtype,specialid)
{
This.labelid=labelid;
This.classid=classid;
This.url=url;
if (labelid.substring (0,5) = = "{Sql_")
{
var slabelid=labelid.split (' (') [0];
Slabelid=slabelid.replace ("{", "");
this.c_obj= "C_" +slabelid;
this.p_obj= "P_" +slabelid;
}
Else
{
this.c_obj= "C_" +labelid;
this.p_obj= "P_" +labelid;
}
This.installdir=installdir;
This.refreshtype=refreshtype;
This.specialid=specialid;
This.page=curpage;
LoadData (1);
}
function LoadData (p)
{this.page=p;
var xhr=new pageajax ();
Xhr.open ("Get", installdir+url+ "? labelid=" +escape (labelid) + "&classid=" +classid+ "&refreshtype=" + Refreshtype+ "&specialid=" +specialid+ "&curpage=" +p,true);
Xhr.onreadystatechange=function () {
if (xhr.readystate==1)
{
if (p==1)
Eval (' document.all. ') +c_obj). innerhtml= "<div align= ' center ' > is connecting server ... </ Div> ";
}
else if (xhr.readystate==2 | | xhr.readystate==3)
{
if (p==1)
Eval (' document.all. ') +c_obj). innerhtml= "<div align= ' center ' > reading data ... </div > ";
}
else if (xhr.readystate==4)
{
if (xhr.status==200)
{
var pagearr=xhr.responsetext.split ("{ks:page}")
var pageparamarr=pagearr[1].split ("|");
COUNT=PAGEPARAMARR[0];
PERPAGENUM=PAGEPARAMARR[1];
PAGECOUNT=PAGEPARAMARR[2];
ITEMUNIT=PAGEPARAMARR[3];
ITEMNAME=PAGEPARAMARR[4];
PAGESTYLE=PAGEPARAMARR[5];
GetObject (c_obj). Innerhtml=pagearr[0];
PageList ();
}
}
}
Xhr.send (NULL);
}
function GetObject (ID)
{
if (document.getElementById)
{
return document.getElementById (ID);
}
else if (document.all)
{
return Document.all[id];
}
else if (document.layers)
{
return Document.layers[id];
}
}

function PageList ()
{
var n=1;
var statushtml=null;
Switch (parseint (this.pagestyle))
{
Case 1:
Statushtml= "Total" +this.count+this.itemunit+ "<a href=\" javascript:homepage (1); \ "Title=\" home \ > Home </a> < A href=\ "Javascript:previouspage ()" title=\ "previous page \" > Prev </a> <a href=\ "javascript:nextpage () \" Title=\ " Next \ > Next </a> <a href=\ "javascript:lastpage (); \ title=\" last page \ "> Last </a> page: <font color=red > "+this.page+" </font>/"+this.pagecount+" page "+this.perpagenum+this.itemunit+this.itemname+"/page ";
Break
Case 2:
Statushtml= "<a href= ' # ' >" +this.pagecount+ "page/" +this.count+this.itemunit+ "</a> <a href=\" javascript: Homepage (1); \ "Title=\" Home \ ><font face=webdings>9</font></a> <a href=\ "javascript: PreviousPage () \ "title=\" previous page \ "><font face=webdings>7</font></a>";
var startpage=1;
if (this.page==10)
startpage=2;
else if (this.page>10)
Startpage=eval ((parseint (THIS.PAGE/10)-1) *10+parseint ((this.page)%10) +2);
for (Var i=startpage;i<=this.pagecount;i++) {
if (i==this.page)
statushtml+= "<a href=\" #\ "><font color=\" #ff0000 \ ">" +i+ "</font></a>"
Else
statushtml+= "<a href=\" Javascript:turn ("+i+") \ ">" +i+ "</a>"
n=n+1;
if (n>10) break;
}
statushtml+= "<a href=\" javascript:nextpage () \ title=\ "next page \" ><font face=webdings>8</font></a > <a href=\ "javascript:lastpage (); \ title=\" last page \ "><font face=webdings>:</font></a>";
Statushtml= "<span class= ' kspage ' >" +statushtml+ "</span>";
Break
Case 4:
Statushtml= "Total" +this.pagecount+ "page/" +this.count+this.itemunit+this.itemname+ "<a href=\" javascript:homePage (1) ; \ "Title=\" Home \ "><font face=webdings>9</font></a> <a href=\" javascript:previouspage () \ " Title=\ "Previous page" "><font face=webdings>7</font></a>";
for (Var i=this.page;i<=this.pagecount;i++) {
if (i==this.page)
statushtml+= "<b><font color=\" #ff0000 \ ">" +i+ "</font></b>"
Else
statushtml+= "<a href=\" Javascript:turn ("+i+") \ ">[" +i+ "]</a>"
n=n+1;
if (n>10) break;
}
statushtml+= "<a href=\" javascript:nextpage () \ title=\ "next page \" ><font face=webdings>8</font></a > <a href=\ "javascript:lastpage (); \ title=\" last page \ "><font face=webdings>:</font></a>";
Break
Case 3:
Statushtml= "<font color= #ff000 >" +this.page+ "</font> page Total" +this.pagecount+ "page <a href=\" javascript: Homepage (1); \ "Title=\" Home \ ><<</a> <a href=\ "javascript:previouspage () \" title=\ "previous page \" >< </a> <a href=\ "javascript:nextpage () \ title=\" Next \ ">></a> <a href=\" Javascript:lastpage () ; \ "title=\" last page \ ">>></a>" +this.perpagenum+this.itemunit+this.itemname+ "/page";
Break
}
statushtml+= "<select name=\" goto\ "onchange=\" Turn (parseint (this.value)); \ ">";
for (Var i=1;i<=this.pagecount;i++) {
if (i==this.page)
statushtml+= "<option value= '" +i+ "selected>" +i+ "</option>";
Else
statushtml+= "<option value= '" +i+ "' >" +i+ "</option>";
}
statushtml+= "</select> page";
GetObject (this.p_obj). innerhtml=statushtml;
}
function homepage ()
{
if (this.page==1)
Alert ("Already the home page!") ")
Else
LoadData (1);
}
function LastPage ()
{
if (This.page==this.pagecount)
Alert ("It's already the last page!") ")
Else
LoadData (This.pagecount);
}
function PreviousPage ()
{
if (this.page>1)
LoadData (this.page-1);
Else
Alert ("Already the first page");
}

function NextPage ()
{
if (This.page<this.pagecount)
LoadData (this.page+1);
Else
Alert ("Already on the last page");
}
function Turn (i)
{
LoadData (i);
}