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;
}
