Ajax与Json的一些总结

　　

Ajax与Json

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", "");

4.0设置回调函数
在发送请求之后，我们需要检查请求是否执行成功，首先可以通过status属性判断，这里不考虑缓存的情况，所以当readyState=4并且服务器响应成功时，当做请求执行成功的条件，

readyState属性有如下五种状态：
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

同步请求：发生请求后，要等待服务器执行完毕才继续执行当前代码。

异步请求：发生请求后，无需等到服务器执行完毕，可以继续执行当前代码。

req.onreadystatechange = function() {

if (xhr.readyState ==  && xhr.status == ){
//// 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 == ) {
//获得后台的数据
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: , //每页显示数量的多少
                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 == ) {
                    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 总页数需要从后台异步获取，其他参数可从前端中指定。