Ajax调用webservice无刷新分页显示数据
秋高气爽恰逢佳节，花好月圆再度良辰，中秋了，节日快乐，呵呵。。。有段时间没有随笔了，最近有很多事在纠结当中，说是出差吧，在外地都呆了近一年了也不让咱回北京，很是郁闷，嘿嘿，略发一些牢骚。
刚进公司做项目时项目经理说用webservice，前面的经验中也有过这方面的经验。他的说法是不用ScriptManager（原因是：大部分客户端机器没有3.5框架，到时解析不出来，这说法正确？无语啊），也不可添加web引用，所有的都用脚本实现。即在客户端调用webservice中的XML串进行数据显示。我不知道这样讲表述清楚了没，我也不清楚这种做法是否选进，有没有落后，当然思想我觉得还是不错的，于是在网上查资料，达到了他想要的效果。这几天没啥事，再回味一下ajax和webservice的东西，先看下结构图和效果图吧，只是个示例，没用三层之类的架构。具体请看下面的代码吧，为了节约空间，粘出一部分代码，后面提供源码下载
简单的数据库示例
最终展示效果，界面没做多的设计，具体应用时大伙发挥吧，呵呵
1、前台显示代码
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DefaultWebService.aspx.cs" Inherits="AjaxGetAndSet.DefaultWebService"%>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head runat="server">
7 <title>ajax+webService数据分页</title>
8 <link href="css/tb_style.css" rel="stylesheet" type="text/css"/>
9 <script src="js/AjaxApplication.js" type="text/javascript"></script>
10 </head>
11 <body>
12 <form id="form1" runat="server">
13 <table border="1">
14 <!--该表格用来显示数据内容-->
15 <thead>
16 <tr>
17 <th>
18 编号
19 </th>
20 <th>
21 姓名
22 </th>
23 <th>
24 年龄
25 </th>
26 <th>
27 性别
28 </th>
29 <th>操作</th>
30 </tr>
31 </thead>
32 <tbody id="tb_body">
33 </tbody>
34 <div id="msg"></di>
35 </table>
36 <!--页导航-->
37 <div id="page">
38 <div id="pageInf">
39 共<label id="lblToatl"></label>条记录,当前第<label id="lblCurent"></label>页,共<label id="lblPageCount"></label>页
40 </div>
41 <div id="btnSet">
42 <input id="btnFirst" type="button" value="首页"/>
43 <input id="btnPre" type="button" value="上一页"/>
44 <input id="btnNext" type="button" value="下一页"/>
45 <input id="btnLast" type="button" value="末页"/>
46 <input id="txtInputNO" type="text" size="2" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " onafterpaste="this.value=this.value.replace(/[^\d]/g,'') " name="f_order" value="1"/>
47 <input id="btnGO" type="button" value="GO"/>
48 </div>
49 </div>
50 <script type="text/javascript">
51 getDataShow(1);
52 </script>
53 </form>
54 </body>
55 </html>
2、重点当然是Js的代码了，先是创建一个xmlhttp对象，只要了解ajax的相信都熟悉这个，还是贴一下哈
创建XMLHTTP对像
1 function createXmlHttp() {
2 var xmlHttp;
3 // 检测MSXMLHTTP版本，为了兼容IE各个版本
4 var activeKey =new Array("MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP");
5 if (window.ActiveXObject) {
6 for (var i =0; i < activeKey.length; i++) {
7 try {
8 xmlHttp =new ActiveXObject(activeKey[i]);
9 if (xmlHttp !=null)
10 return xmlHttp;
11 }
12 catch (error) {
13 thrownew Error("您的浏览器版本过低，请更新浏览器");
14 }
15 }
16 }
17 elseif (window.XMLHttpRequest) {
18 xmlHttp =new XMLHttpRequest();
19 }
20 return xmlHttp;
21 }
3、用post方式请求数据
POST方式请求数据
1 var ajax = createXmlHttp(); //将xmlhttprequest对象赋值给一个变量．
2 var parameter ="pageIndex="+ Current_page +"&pageSize="+ PageCount +"&tableName=employeeInfo&strSortFile=eID";
3
4 var url ="../WebService/EmployeeService.asmx/GetDataPage";
5 ajax.open("post", url, true);
6 ajax.onreadystatechange =function() {
7 if (ajax.readyState ==4) {//数据返回成功
8 if (ajax.status ==200) {//http请求状态码返回ok
9 var xmldoc = ajax.responseText; //以xml格式接收返回的数据，并保存在xmlData变量里
10 var xmlData =new ActiveXObject("Microsoft.XMLDOM");
11 xmlData.async ="false";
12 xmlData.loadXML(xmldoc);
13 var list = xmlData.getElementsByTagName("Table"); //在返回的数据里，获取所有list标签
14
15 if (list.length !=0) {
16 var t = document.getElementById("tb_body"); //获取展示数据的表格
17 while (t.rows.length !=0) {
18 t.removeChild(t.rows[0]); //在读取数据时如果表格已存在行．一律删除
19 }
20 for (var i =0; i < list.length; i++) {
21 var tr = t.insertRow(t.rows.length); //有几个list就为表格增加几行．
22 var td = tr.insertCell(0); //第一个单元格存放数据编号
23 td.innerHTML = list[i].getElementsByTagName("eID")[0].text; //(如遇空值时不会报错)
24 var td = tr.insertCell(1); //第二个单元格存放姓名
25 td.innerHTML = list[i].getElementsByTagName("ename")[0].text;
26 var td = tr.insertCell(2); //第二个单元格存放年龄
27 td.innerHTML = list[i].getElementsByTagName("age")[0].text;
28 var td = tr.insertCell(3); //第二个单元格存放性别
29 td.innerHTML = list[i].getElementsByTagName("sex")[0].text;
30 var td = tr.insertCell(4);
31 var btnDelete = document.createElement("Button");
32 btnDelete.innerHTML ="删除";
33 td.appendChild(btnDelete);
34 }
35 }
36 }
37 }
38 }
39 ajax.setRequestHeader("Content-Length", parameter.length);
40 ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
41 ajax.send(parameter); //提交请求，参数为parameter
源码下载地址：https://files.cnblogs.com/gtzhou/AjaxPage.rar本程序存在的一个问题是在发布后有存在跨域访问的问题，在本机上测试通过。中秋节算是送给大家的礼物吧，哈哈。还希望大虾多给些宝贵意见
