基于AJAX技术实现无刷新分页
人们在上网看视频时，下面都有对本视频的评论，我们想视频的内容不变，只是下面的评论进行更新，从技术角度来分析，将网页生新加载，就是浪费资源，延长用户的等待时间。用户得不到更好的体验，因此近几年，基于AJAX的无刷新技术得到了比较广泛的应用。本文分析了基于AJAX的网页无刷新技术，并且给出了无刷新技术的分页的关键代码。
【关键词】AJAX 无刷新 分页
随着计算机网络的不断发展，人们通过网络获取更多的信息。人们无论哪里可以通过网络及时有效的得到准确的信息。但是目前限于网络带宽，人们在打开网站时，等待的时间往往比较长，特别是分页时，从服务器中重新加载图像、声音、视频等待时间更是长，如果更快的显示信息呢？于是人们通过各种技术手段来缩短打开网页的时间。本文将探讨基于AJAX技术实现无刷新分页来提高访问速度。
AJAX 指异步JavaScript及XML（Asynchronous JavaScript And XML（异步JavaScript和XML）），包括了XHTML和CSS、XML和 XSTL、Javascript、DOM（Document Object Model）、XMLHttpRequest等技术，是指一种创建交互式网页应用的网页开发技术。 国内通常的读音为“阿贾克斯”和阿贾克斯足球队读音一样。Ajax（Asynchronous JavaScript + XML）的定义，事实上，在没有提出AJAX之前，业界只是单独地使用上述技术，而没有对其进行综合使用。随着网页无刷新技术的应用及其广泛发展，人们也开始逐渐使用AJAX了。
1 传统的Web应用模型
传统的Web应用模型工作原理是，大部分界面上的用户动作触发一个连接到Web服务器的HTTP请求，服务器完成一些处理，如接收数据、处理计算等，再访问其他数据库系统，最后返回一个HTML页面到客户端，在这种情形下，用户首先向HTTP服务器发送一个请求。服务器收到请求后，给一个响应，向客户响应一个Html页面。这种用户体验是不连贯的，服务器在处理请求的时候，用户多数时间处于等待的状态，屏幕内容也是一片空白。
AJAX与传统Web应用模型是不同的，它采用的是异步交互模式。AJAX能够消除网络交互过程中的处理―等待―处理―等待的缺点。这是因为，它在用户与服务器之间引入了一个中间媒介。用户的浏览器在执行任务时即装载AJAX引擎。AJAX引擎用Javascript语言编写，它负责编译用户界面及与服务器之间的交互。AJAX引擎是独立于用户与网络服务器间的交流的，它允许用户与应用软件之间的交互过程异步进行。现在，可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作，可以将不需要重新载入整个页面的需求，如页面导航、数据校验、内存中的数据编辑交给AJAX来执行。
2 无刷新技术实现分页
2.1 在DBHelpe层建一个方法，返回数据表
SqlDataAdapter da = new SqlDataAdapter（"getPageData"， conn）；
SqlParameter[] paras = {
new SqlParameter（"@pageIndex"，page Index），
new SqlParameter（"@pageSize"，pageSize），
new SqlParameter（"@rowCount"，row Count），
new SqlParameter（"@pageCount"，pageCount）
}；
//将两个输出参数的输出方向指定
paras[2].Direction = ParameterDirection.Output；
paras[3].Direction = ParameterDirection.Output；
//将参数集合 加入到 查询命令对象中
da.SelectCommand.Parameters.AddRange（paras）；
//设置 查询命令类型 为 存储过程
da.SelectCommand.CommandType = CommandType.StoredProcedure；
//执行存储过程
da.Fill（dt）；
//执行完后，将存储过程 获得的 两个输出参数值 赋给 此方法的两个输出参数
rowCount = Convert.ToInt32（paras[2].Value）；
pageCount = Convert.ToInt32（paras[3].Value）；
2.2 在List.html中
//当浏览器加载数据后
window.onload = function （） {
//得到面板对象
divPanelObj=document.getElementById （"panel"）；
tbListObj = document.getElementById （"tbList"）；
//1，加载列表
// 创建异步对象
xhr = createXhr（）；
//调用 加载 列表的方法
loadList（）；
//修改
document.getElementById（"btnOK"）.onclick = doUpdateOrAdd；
//隐藏修改面析
document.getElementById（"btnCancel"）.onclick = hidePanel；
}
function loadList（） {
//为异步对象设置请求参数：拿到数据使用Get请求
xhr.open（"get"， "Category.ashx？t=list"， true）；
//设置浏览器不使用缓存
xhr.setRequestHeader（"If-Modified-Since"，"0"）；
//设置异步对易用的回调函数，每当异步对象的准备状态发生改变时调用
xhr.onreadystatechange = function （） {
//说明异步对易用已经从服务器获得了返回的数据
if （xhr.readyState == 4） {
if （xhr.status == 200） {
//获得异步对象从服务器获得的数据
var listDate = xhr.responseText；
//alert（listDate）；
//eval将Json对象转为数组
var listJsonArr = eval（listDate）；
//alert（listJsonArr.length）；
//将数组里面的值放到网页中去
loadTableData（listJsonArr）；
3 结论
通过以上的分析及实际应用，对于开发人员、终端用户、ISP来说，AJAX是大有益处的。
（1）传统的web应用允许用户填写表单（form），当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然後返回一个新的网页。这个做法浪费了许多带宽，因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。
（2）可以使用户的等待时间减少。尤其是不会像Reload事件那样，当要读取大量数据的时候，就会出项白屏的现象。AJAX使用XMLHTTP对象发送请求并得到服务器响应，在不重新载入整个页面的情况下更新页面。因此在读取数据的过程中，用户所面对的不再是白屏，而是原来的页面内容。当数据接收完毕之后才更新相应部分的内容。这种更新的速度非常快，几乎就是一瞬间，用户几乎感觉不到。
（3）使效率大大提高。可以利用客户端闲置的能力来处理以前一些服务器负担的工作，从而减轻服务器和带宽的负担。
参考文献
[1]张铃丽，朱永杰.Ajax技术研究及其Web应用[J].赤峰学院学报（自然科学版），2010（11）.
[2]孙庆龙.基于B/S的高校共青团工作管理信息系统的设计和实现[D].东北大学，2006.
作者简介
段昌盛（1975-），男，湖北省巴东人。硕士学位。现为湖北恩施职业技术学院讲师。主要研究方向为计算机网络技术、计算机软件技术。
作者单位
湖北恩施职业技术学院 湖北省恩施市 445000
