The principle of paging technology and implementation of the AJAX paging technology without refreshing (iii) _ajax related

Immediately followed by the page-pagination technology principle and implementation of Java+oracle code implementation Paging (ii), this article continues to analyze paging technology. The last chapter is about pagination technology code implementation, this article continues to analyze the paging technology effect control.
The previous article has implemented a page-by-code simple. But we all see that every time we get a result set through a servlet request in code, we turn to a JSP page to display the result, so that every time the query page refreshes, such as when the query appears with the result set to see the third page, the page refreshes. This makes the effect of the page feel a little uncomfortable, so we want to be able to query the result set after the criteria, no matter which page is accessed, the page will not refresh, but only the result set changes. To solve this, I think it's easy to think about Ajax.
Yes, this is going to be Ajax. When the result set is queried by query criteria, each visit to each page is accessed via Ajax, using asynchronous Ajax to interact with the servlet, and the results are queried to return to Ajax, so that the page content changes as the Ajax returns results, and the page does not refresh. This realizes the paging technology without refreshing.
Let's look at a simple, no refresh paging implementation, the code reads as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" xml:lang= "en" >  

This is a very simple no refresh paging implementation, using the jquery+ jquery.pagination framework. Now with the popularity of frameworks, especially the jquery, it is very effective to use frameworks for development. The code above is already commented on in the code and can also be consulted on the official jquery website:.
You can now develop our AJAX without refreshing paging implementation. Based on the above principle, in response to the page number is pressed in the code pageselectcallback (), we use an AJAX asynchronous access to the database, by clicking the page number to remove the result set and then asynchronously set to the page, so that the implementation of the No refresh.

The response function Pageselectcallback () that the page number is pressed is modified as follows:

This allows the results to be obtained asynchronously, using the Showresponse function to handle the result, and the Showresponse function is as follows:

function Showresponse (Request) {var content = Request;
   var root = content.documentelement;
   var responsenodes = root.getelementsbytagname ("root");
   var itemList = new Array ();
   var pagelist=new Array ();
   alert (responsenodes.length);
    if (Responsenodes.length > 0) {var responsenode = responsenodes[0];
    var itemnodes = responsenode.getelementsbytagname ("Data");
     for (var i=0 i<itemnodes.length; i++) {var idnodes = Itemnodes[i].getelementsbytagname ("id");
     var namenodes = itemnodes[i].getelementsbytagname ("name");
     var sexnodes=itemnodes[i].getelementsbytagname ("Sex");
     var agenodes=itemnodes[i].getelementsbytagname ("Age"); if (idnodes.length > 0 && namenodes.length > 0&&sexnodes.length > 0&& agenodes.length &G T
      0) {var id=idnodes[0].firstchild.nodevalue;
      var name = Namenodes[0].firstchild.nodevalue;
      var sex = Sexnodes[0].firstchild.nodevalue; var age=agenodes[0].firstchild. nodevalue;
     Itemlist.push (New Array (Id,name, sex,age));
    } var pagenodes = Responsenode.getelementsbytagname ("pagination");
     if (pagenodes.length>0) {var totalnodes = pagenodes[0].getelementsbytagname ("Total");
     var startnodes = Pagenodes[0].getelementsbytagname ("Start");
     var endnodes=pagenodes[0].getelementsbytagname ("End");
     var currentnodes=pagenodes[0].getelementsbytagname ("PageNo"); if (totalnodes.length > 0 && startnodes.length > 0&&endnodes.length > 0) {var total=totaln
      Odes[0].firstchild.nodevalue;
      var start = Startnodes[0].firstchild.nodevalue;
      var end = Endnodes[0].firstchild.nodevalue;
      var Current=currentnodes[0].firstchild.nodevalue;
     Pagelist.push (New Array (total,start,end,current));
  }} showtable (Itemlist,pagelist);
 }

The code is used to process the results of XML formats that are returned after an asynchronous request to the servlet via Ajax, where the servlet code is in the previous article. Itemlist, PageList, respectively, is the resolution of the return of the resulting user list and paging navigation, so that users can display their own way to show the data.

function Pageselectcallback (Page_index, JQ) {
  var pars= "pageno=" + (page_index+1);
   $.ajax ({
    type: "POST",
   URL: "Userbasicsearchservlet",
   Cache:false,
   data:pars,
   success: Showresponse
  });
    return false;
}

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.