ajax无刷新高效分页和批量删除无刷新

标签：  it

Ajax实现高效分页功能文档

 

一. 技术要点

异步请求：

日期转换：

页码条做法：

页面间转换时问题：当点击下一页， 上一页等，原来的一页的数据没有清除，需要重新通过JS清除。

批量删除数据

 

 

 

二. 步骤

1． 使用asp.net异步请求数据：

         

（1.）创建XmlHtttpRequest对象来实现异步请求：这也是ajax最重要的东东。

l            注意：XMLHttpRequest对象在IE浏览器和非IE浏览器中创建的方法不同。

l （2）下面使用兼容方式创建异步对象：

 function createXhr() {

    var xhobj = false;

    try {

        xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+

    } catch (e) {

        try {

            xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6

        } catch (e2) {

            xhobj = false;

        }

    }

    if (!xhobj && typeof XMLHttpRequest != 'undefined') {// Firefox, Opera 8.0+, Safari

        xhobj = new XMLHttpRequest();

    }

    return xhobj;

}

 

 （3）创建请求； - open (告诉他要去做的事情)

     获得数据主要通过Get请求，get请求有缓存（get请求同一个页面会缓存。当第二次访问该页面的时候不在提交到服务器

从缓存里面拿值），这是我们不愿意看到的，可以取消缓存，使用一下代码：

     xmlHttpRequest.setRequestHeader("If-Modefied-Since","0");

 

 

 （4）xmlHttpRequest.send(null); 让他去请求数据

 

 

 （5）设置readystatechange事件触发一个回调函数; -onreadystatechagne：最重要的东东

这个事件主要是判断异步请求的不同状态下，触发不同的事件，做出不同的响应。

他有一个重要的属性readyState属性：

readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。

• 0：未初始化。对象已经创建，但还未初始化，即还没调用open方法；

• 1：已打开。对象已经创建并初始化，但还未调用send方法；

• 2：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回；

• 3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整；

• 4：已加载。所有数据接收完毕

 

 

当请求数据回来后通过var res = xmlHttpRequest.responseText; 来接收数据。

注意：这里回来的是Json形式的字符串，要转成json对象

通过：eval_r()方法来转：var jsonArr = eval_r("(" + res + ")");

再注意：有时候字符串中有数组等比较复杂的形式的字符时候，要如上面的形式加上eval_r("(" + res + ")");小括号

以便作为表达式运行，要不然得不到数据，转化失败。

 

l （6）请求数据回来后，得到的数据是里面有：数据中的要查询的表数据，还有表中总共多少条，分了几页。为下面的页码条做准备。

问题？当用户访问过的页面后，比如第一页，过一会儿在访问这一页时候，需要重新发送请求到服务器端。这样不好，为了减少

服务器端的负担，加快用户浏览的速度，可以在浏览器端定义一个全局变量，每当得到服务器发送来的数据，就把它放在我的浏览器端

的全局变量中，当在此访问他们的时候，判断一下，全局变量中是否存在，如果存在，直接从中拿数据，否则在回到服务器端拿数据。       

 

（7）需要的全局变量：

       var pageIndex = 1; 当前访问的页数

        var pageCount = 0; 总页数

        var rowCount = 0; //总数据行

        var xmlHttpRequest = false; //异步对象

        var tb = false; //表格对象

        var jsonAll = new Array(); 缓存全局变量

 

 

2． 在浏览器端脚本js保存数据使用json对象后：下一步要不数据放到浏览器端展现给用户看：下面通过js代码创建表格行来存放数据

通过一个方法，一个业务就要写个方法，思路清晰，代码也清晰。

function createTr(jsonTr) { ----传递的参数就是要添加到表格里的数据

           

            for (var i = 0; i < jsonTr.length; i++) {

                var newRow = tb.insertRow(-1); //创建一行

                newRow.setAttribute("id", "tr" + jsonTr[i].CID); //给改行添加一个属性

 

                var newCellId = newRow.insertCell(-1); //创建元素--下面追加多列元素

                newCellId.innerHTML = jsonTr[i].CID;

 

                var newCellCname = newRow.insertCell(-1);

                newCellCname.innerHTML = jsonTr[i].CName;

              

                var newCellAddTime = newRow.insertCell(-1);

                newCellAddTime.innerHTML = changeDateFormat(jsonTr[i].CAddTime);

                

            }

        }

3.不过问题来了？？当访问下一个页面的时候，因为通过异步请求数据，轻量级的刷新页面，上一页的数据还没有清除，

 所以要手动的通过js来清除原来的数据。

function clearTr() {

           var trCount=tb.rows.length;得到共有多少行数据

            for (var i = trCount-1; i>1 ; i--) {------注意这是一个细节，必须倒序删除，要不然删不全

                tb.deleteRow(i);------很重要的一个js里的方法，通过它可以很方便的删除行了----

            }

        }

  

        

 

 

4.页码条的制作：

页码条的制作的准备工作：需要从数据库获得总数据条数，总页数

 

        function creatSar() {----注意里面的loadData();方法是加载数据的，通过异步对象ajax请求来获得数据

var sarDiv = document.getElementByIdx_x("sarDiv");先得到一个层div,目的是把页码条放在该层里

            var btnPre = sarDiv.innerHTML = "<span>数据总数" + rowCount + "条</span>  <span>" + pageIndex + "/" + pageCount +

             "</span><a href='javascript:loadData(1);'>第一页°3</a><a href='javascript:loadData(prePage());'>上一页°3</a>" + forCreatePage() +

            "<a href='javascript:loadData(nextPage());'>下一页°3</a><a href='javascript:loadData("+pageCount+");'>最后一页</a>";     }

                function forCreatePage() {

            var strA = "";

            for (var i = pageIndex; i < pageIndex + 5; i++) {

                if (i == pageCount+1){---注意：当到达最后一页的时候不在循环了

                    break;

                }

               strA += "<a href='javascript:loadData(" + i + ");'>" + i + "</a>";           

            }

            return strA;  

       }

       //06--上一页

       function prePage() {

           if (pageIndex > 1) {

               pageIndex--;

           }

           else {

               pageIndex = 1;

           }

           return pageIndex;

       }

       //07--下一页

       function nextPage() {

           if (pageIndex < pageCount) {

               pageIndex++;

           }

           else {

               pageIndex = pageCount;

           }

           return pageIndex;

       }

 

注意的问题：创建页码条的方法在哪里来调用？、

在loadData()方法里，创建完表格行后再调用他。因为里面传递了当前用户访问的页面，每次访问都要把全局的变量pageIndex当前的页改变。

在loadData()方法里面，必须写下传入的当前页，把它再赋值给全局变量。---这一点很重要。

 

 

5.日期转换的问题：从数据库中得到的DateTime类型的日期格式2011-08-10 17:40:00.717转成2011-08-10

可以通过写的一个js方法来解决：

function changeDateFormat(cellval) {---参数是从服务器端传来的时间变量---通过这个方法就可以转换了

    var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));

    var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;

    var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

    return date.getFullYear() + "-" + month + "-" + currentDate;

}

 

     

 

 

 

 

 

 

三. 外加的功能：批量删除数据—

知识点：1.异步对象来删除数据

2.checkBox—来选择要删除的对象，设置标签name都为同一个名字，value值为该行要删除数据的id

3.写一个批量删除按钮，通过点击按钮来批量删除，调用删除的方法

4.根据用户选择的，选择后的，得到id—根据value放在一个字符串里，然后可以使用sql语句处理删除操作in(---)

5.如果数据库更新成功，还有页面上的数据，为了不让他刷新，可以使用js处理，直接清除删除的数据行，这个很重要。

  上面的到了要删除的id—字符串，然后分割成数组，得到每个id,循环表格行来查找第一列的id如果相等，删除这一行。

代码如下：

 

function delBatch() {

           if (window.confirm("确定要删除吗~~")) {

               var checkBoxAll = document.getElementsByName("checkName"); //根据获得所有的checkBox选择框

               var delIds = ""; //要删除的id集合字符串

               for (var i = 0; i < checkBoxAll.length; i++) {

                   if (checkBoxAll[i].checked) {//判断如果选中了，就放在删除的区域

                       delIds += checkBoxAll[i].value + ",";

                   }

               }

               delIds = delIds.substr(0, (delIds.length - 1));

               xmlHttpRequest.open("post", "CommonHandler.ashx", true);

               xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

               xmlHttpRequest.onreadystatechange = function () {

                   if (xmlHttpRequest.readyState == 4) {

                       if (xmlHttpRequest.status == 200) {

                           var res = xmlHttpRequest.responseText;

                           if (res == "ok") {

                               //下面这种循-环方法不行循-环删除时checkBoxAll.length会变，只能删除选中的奇数行

//                               for (var i = 0; i < checkBoxAll.length; i++) {

//                                   if (checkBoxAll[i].checked) {

//                                       delRow(checkBoxAll[i].value);

//                                   }

//                                

//                               }

                               alert("批量删除成功|");

                               res = delIds.split(",");

                               for (var i = 0; i < res.length; i++) {

                                   delRow(res[i]); //调用删除行的方法个法循-环行找到行的第那个列id相等就删除

                               }

                           }

                           else {

                               alert("删除失败");

                           }

                       }

                   }

               }

               xmlHttpRequest.send("type=delBatch&ids=" + delIds);

           }

       }

       //09删除行方法     

 

  function delRow(id) {

           var rowCount = tb.rows.length; //表格行数

           for (var i = 0; i < rowCount; i++) {//循-环所有的行数

               if (tb.rows[i].childNodes[0].innerHTML == id) {

                   tb.deleteRow(i);

                   break;

               }

        

转载于:https://www.cnblogs.com/q101301/p/3666790.html