Ajax读取数据之分页显示篇实现代码

2019-09-14 07:16:37王旭

Read():读取数据的函数.也是我们的老朋友了,在前几篇的教程里都有使用.下面我们仔细来分析下,这一次我们在Read()函数里做了些什么.
(1):if(arguments.length!=0)这是在判断在调用Read()函数时,是否有参数传递过来.如果有参数,则证明你点击了某个页码而触发了Read().这时我们应该获取该页码,将页码数字赋值给Crrent_page变量.点击了解:arguments
(2):var e = arguments[0] || window.event;标准化事件对象,arguments[0]是为了FF浏览器,window.event是IE浏览器
(3):var obj = e.target || e.srcElement;标准了事件对象以后,我们要获取事件的源.也就是说是那个元素触发了Read()函数.此时的obj就是你点击的那个页码元素.
(4):Current_page = parseInt(obj.innerHTML);获取元素中的数字值,证明你要请求的是第几页,在下面的请求中会把该值发送给服务端.
(5):PageCount = $("edit_count").value;获取文本框里的值,如果你没有向文本框里输入值.那么每页默认显示5条数据.再声明一次,以前讲过的内容我们不再重复讲解.也就是说关于上面的代码我在该教程里没有解释到的.在以前的教程里会找到相关解释.
(6):ajax.open("post","ajax_page.asp?action=read&pagecount="+PageCount+"& current_page="+Current_page,true);我们在请求的Url里将Pagecount与Current_page变量传递给了服务端,服务端接收到这两个变量以后会经过判断.如果PageCount为空那么将默认为5.如果Current_page为空则默认为第1页,然后会将相应的数据传回给客户端.
(7):All_Record = xmlData.getElementsByTagName("allrecord")[0].firstChild.nodeValue;从服务端接收一个allrecord标签元素.该元素包含了一个数字值,该数字值是数据的总条数.
(8):All_page = All_Record / PageCount;用总条数All_Record除以PageCount等于总页,得出有几页数据以后.我们会根据All_page来创建当前页码列表.
(9):var page_list = $("page");获取存放页码列表的那个div元素.while(page_list.childNodes.length!=0)循环遍历该div内的子元素.将其子元素全部删除.每次根据当前页显示的条数不同,会生成不同的页码,所以必须删除上次请求生成的页码列表,当然你也可以改进我这种做法!如果你还不了解什么是子元素或如何删除子元素,请参阅:childNodes与removeChild
(10):for(var i=0;i < Math.ceil(All_page);i++);使用一个for循环根据总页数来动态的生成页码列表,如果All_page为5,则生成5个页码.因为考虑到了会有余数.我使用了Math.ceil.如果你还不知道Math与ceil的作用,请参阅:Math与ceil
(11):var li = document.createElement("li");创建一个li元素,并赋值给一个名字为li的变量.li.innerHTML= i+1;在li元素内写入页码数值.因为i是从0开始的,所有要加1.
(12):li.onclick = function(e){Read(e)};为每个li元素绑定单击事件,这个是重点必须要理解清楚.我们向li绑定了Read(e)函数,并且利用e参数传递了事件对象.当你点击每个页码的时候会再次触发Read函数来读取数据.这个时候运行的Read(e)函数,是带有参数的.我们正是从参数内获得了你请求的页码,然后赋值给Current_page,利用url发送给了服务端.