标签：
AJAX=异步javaScript 和XML
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
自从2005年 google suggestion之后AJAX就成为一种技术标准开始在各大网站上应用。
一、首先来看一下最基本的创建 XMLHttpRequest 异步对象的五步曲
1.0创建异步对象
var xhr = new XMLHttpRequest();
2.0打开连接
xhr.open("get", "/List.ashx", true);
3.0清除缓存
xhr.setRequestHeader("If-Modified-Since", "0");
4.0设置回调函数
在发送请求之后，我们需要检查请求是否执行成功，首先可以通过status属性判断，这里不考虑缓存的情况，所以当readyState=4并且服务器响应成功时，当做请求执行成功的条件，
readyState属性有如下五种状态：
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
同步请求：发生请求后，要等待服务器执行完毕才继续执行当前代码。
异步请求：发生请求后，无需等到服务器执行完毕，可以继续执行当前代码。
req.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200){
//// Do something.
}
else {
alert("Request was unsuccessful: " + req.status);
}
};
5.0发送请求
xhr.send();
下面来看看Json的两种形式:
Json形式一: javascript对象 { "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" }
Json形式二: javascript数组 [{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" },
{ "firstName": "Jason", "lastName":"Hunterwang", "email": "bbbb"}]
二、平时一般使用的是jquery AJAX，也就是 $.ajax()
下面来看一下Ajax是如何异步查询数据的
下面是在数据库中查询数据，并结合jquery分页插件的一段前端脚本，
因为查询数据是建立在分页的基础上的，并不是一次将所有数据查询出的，
所有首先调用分页存储过程，
分页存储过程代码如下:
ALTER PROCEDURE [dbo].[USP_GetAlbumByPage]
@pageIndex int,--当前页
@pageSize int,--页容量
@totalCount int out--数据的总条数
AS
BEGIN
--定义开始和结束的下标
Declare @startIndex int,@endIndex int
set @startIndex = (@pageIndex - 1 )*@pageSize + 1
set @endIndex = @pageIndex * @pageSize
--执行sql语句
select * from (select *,ROW_NUMBER() over(order by Paid)as row from BlogPhotoAlblum where PaIsDel=0) as t where t.row>=@startIndex and t.row<=@endIndex
--给输出参数赋值
select @totalCount = COUNT(*)from BlogPhotoAlblum where PaIsDel=0
END
这里需注意，在DAL层调用存储过程时，需要返回List 集合，这样才能方便序列化对象。
设计好了后台如何获取数据源，再来看前端，注意这里需封装一个统一返回的对象
这是异步调用的脚本 ，前端异步获取后台的数据源
function GetList(indexStart) {
$.ajax({
type: "GET", //请求方式 ("POST" 或 "GET")， 默认为 "GET"。
url: "/0910/TheProcessAjax.ashx", // (默认: 当前页地址) 发送请求的地址。
dataType: "json", //预期服务器返回的数据类型。"xml","html","script","json","text","jsonp";
cache: false, //设置为 false 将不缓存此页面
async: true, //(默认: true) 默认设置下，所有请求均为异步请求。
data: "PageIndex=" + indexStart + "&PageSize=4", //发送到服务器的数据。必须为 Key/Value 格式。这里传入当前页，每页的尺寸
success: function (Obj) { //请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据
if (Obj.Statu == 0) {
//获得后台的数据
var content = $("#tmpl").tmpl(Obj.Datas);
$("#content").html(content); //将数据添加到div中
var totalcount = Obj.totalCount; //从后台获取总页数totalCount
page(totalcount, indexStart); //调用分页的方法
}
},
});
}
前端还需要一个分页的Jquery的插件
这里是分页的脚本，需要引用3个文件，并添加一个div id=Page :
<script src="../js/jquery-1.3.2.js"></script>
<script src="../js/jquery.paginate.js"></script>
<link href="../Css/style.css" rel="stylesheet" />
//分页
function page(totalPage, pageIndex) {
$("#Page").paginate({
count: totalPage,//总页数
start: pageIndex,//当前页
display: 4, //每页显示数量的多少
border: true,
border_color: ‘#fff‘,
text_color: ‘#fff‘,
background_color: ‘black‘,
border_hover_color: ‘#ccc‘,
text_hover_color: ‘#000‘,
background_hover_color: ‘#fff‘,
images: false,
mouse: ‘press‘,
onChange: function (page) {
//给每一页都注册事件，传入的参数为当前的页数
GetList(page);
}
});
};
//1.0查询列表页面的数据
function GetList(pageIndex) {
ajaxHelp.ProcessGet("/0904/Album/ProcessAjax.ashx?type=GetList&pageSize=4&pageIndex=" + pageIndex, function (ajaxObj) {
if (ajaxObj.Status == 0) {
var content = $("#tmpl").tmpl(ajaxObj.Datas);
$("#content").html(content);
page(ajaxObj.totalPage, pageIndex);
}
})
}
在调用分页的js方法时需注意几点:
a）分页的js方法page() 与查询数据的js方法GetList() 是紧密相连的，
分页时需给每一页都注册事件。
b）分页的js方法需传入三个参数: count，start，display
只有count 总页数需要从后台异步获取，其他参数可从前端中指定。
标签：
原文地址：http://www.cnblogs.com/Raymond201508/p/4805529.html
