JS AJAX实现页面局部刷新~~~~

 

1、  AJAX主要应用到的是局部刷新。也就是当页面上的摸一个标签内容需要刷新，为了不引起整个页面的回发，通常利用AJAX来解决。

2、获取其他网页的内容。当本页内容基于其他网站时（例如天气预报），通常也使用AJAX+正则表达式的方法，从外网截获自己需要的内容。

3、需要异步读取的地方。这个最明显的例子，非Google map莫属了，因为地图占据的数据资源太大，当用户移动的时候，使用异步读取方式可以缩短数据抓取时间，同时AJAX技术对于影像网站异步读取数据也有很大的帮助的

4、最新的桌面应用模式。这中桌面应用模式可能算是AJAX扩大应用的一种，在以前的程序中，CS是桌面，BS是web，而使用AJAx可以将网络上的东西，显示在桌面上，表面就是和浏览器脱离了关系，但是这样应用AJAx则需一个底层框架如Bindows等

 

一、局部刷新：（我用一个例子来说明,实现下拉列表框的级联）

    局部刷新有三种方法可以完成：

          1,、比较传统的JAVAScript模式：

                    这种模式实现无刷新：前台定义脚本方法FillData(strcity),接收的参数就是城市用来添加下拉列表框。后台应用到RegisterClientScriptBlock方法注册一个脚本字符串。这个脚本字符串用来根据不同城市来筛选出在此城市下的区县。这样就ok了（此处不详解，如果不明白想了解的话给我留言~~~）

         2、使用框架模式：

                    这种模式也是一种比较常见的模式。利用iframe，或frameset框架来实现局部刷新。很容易理解的，不详解~~~

         3、AJAX实现：

                此方法我用我最近一直在用的说明：我的项目有页面时记录的列表，然后再列表中的操作有通过点击一个按钮图片，展开挂在此条记录下的子记录，以此类推，可多层展示；这样需要页面无刷新的显示：

               注意：起始页面我用DataList展示父级记录

               具体操作是：在页面按钮处例如：<input type ="button" value="展开子集" onclick="ExpChild(<%#Eval("ID")%>)">,按钮添加一个js函数，此函数通过id可获得父级记录的子集，并返回字符串；然后再页面处，每行父级记录下隐藏一个div，或者如果你用table布局可隐藏一个<tr>.重点来了~~~~ExpChild函数的写法，直接例子（应用的AJAX是集成在JQuery中的）：

function ExpProcess(id){

//此处通过ajax访问一个页面页面调用方法然后给前台response.write()一段子集字符串，此处的Data就可以接受的到
     var urls = "Ajax.aspx?act=getProcess&id=" + id;
   // document.write(urls);
    $.ajax({
        type:"GET",
        cache:false,
        url:urls,
        success:function(data){
         $("#ProcessDiv_" + id).attr("innerHTML",data);//此处用来填充隐藏的子集div，已获得子集数据
        }
    });

//此处是利用JQuery的toggle()方法自动控制隐藏部分显隐
     $("#ProcessTr_" + id).toggle();
    $("#DairyTr_"+id).hide();
    $("#Tr_"+id).hide();
}