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的相信都熟悉这个,还是贴一下哈
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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方式请求数据
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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本程序存在的一个问题是在发布后有存在跨域访问的问题,在本机上测试通过。中秋节算是送给大家的礼物吧,哈哈。还希望大虾多给些宝贵意见