1. 程式人生 > >實現區域性重新整理的三種方法

實現區域性重新整理的三種方法

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();
}