AjaxPro2完整入門教程

一、目錄

簡單類型數據傳送（介紹緩存，訪問Session等）

表類型數據傳送

數組類型數據傳送（包含自定義類型數據）

 

二、環境搭建

1.這里本人用的是VS2012。

2.新建一個空的Web項目（.NET 4.0）

3.將AjaxPro2.dll復制到網站的bin目錄中

4.在項目中引用它

5.打開Web.config，輸入紅色部分：

 

6.新建一個名為Test1的頁面，在頂部 using AjaxPro

7.在Page_Load中輸入以下代碼（不能在IsPostBack中輸入）

Utility.RegisterTypeForAjax(typeof(Test1));

 

8.下面是一個偷懶的步驟，在開始使用的時候必須輸入這個類文件的完整命名空間很麻煩，后來研究了一下，發現是可以重新命名的

具體的方法如下：

省了我們不少功夫。

 

到此為止，環境的搭建就結束了。

 

三、傳送簡單類型的值

 

1.這里我們簡單的舉幾個列子

首先我們在后台寫下以下代碼：

[AjaxMethod]
public int getInteger()
{
     return 10;
}

[AjaxMethod]
public sring getString()
{
   return "10";
}

[AjaxMethod]
public double getDouble()
{
    return 1.1;
}

 

 

接着我們編寫前台的代碼

<script type="text/javascript">
      window.onload = function () {
          var value = TestAjax.getInteger();
          document.write(value.value + "<br />");
          value = TestAjax.getString();
          document.write(value.value + "<br />");
          value = TestAjax.getDouble();
          document.write(value.value + "<br />");
     }
</script>

 

 

2.可能有些懂js的會認為客戶端調用getInteger和getString返回的值都一樣，但是實質是他們並一樣。比如下面我們截取的圖片

就可以很好的解釋這個問題

 

獲取int類型的值的結果：

 

獲取string類型的值的結果：

 

    這里我們可以清晰的看到類型是完全不一樣的，這里我着重講這些是因為后面我們可能會由於這個錯誤而導致無法調用服務端的代碼，卻

沒法找出這其中的問題。

 

    這里我們還可以返回這個的返回值是直接調用對應方法后的返回值，可能很多人都認為調用對應的方法應該返回return的值，但其實並不

是的，客戶端永遠是客戶端，服務端永遠是服務端，這個必須搞清楚。所以我們經常需要在調用方法的后面追加一個value來指定要獲取的是值。

 

3.關於接收返回值

上面的實例中我們使用的是最普通的方式，只有當這個值返回之后才能繼續執行下面的代碼，可能部分有經驗的開發者可能會問有沒有

異步方式，當然是有的。下面我們就將上面的代碼改寫成異步的方式獲取。

 

<script type="text/javascript">
    window.onload = function () {
        TestAjax.getInteger(writeToDocument);
        TestAjax.getString(writeToDocument);
        TestAjax.getDouble(writeToDocument);
    }

    function writeToDocument(val) {
        document.write(val.value + "<br />");
    }
</script>

 

 

然后我們可以發現最后的結果更之前的實例是完全一樣的。

 

4.方法的屬性

看到上面的服務端代碼的同志，一看就會很奇怪，為什么采用駝峰的方式呢，是不是感覺格格不入，這個主要原因是客戶端調用

方法的名稱跟服務端的名稱是一致的，如果不這樣就會在客戶端調用的時候，感覺很奇怪。當然暴露的服務端的方法名稱。所以

下面我們將介紹如何改寫這個名字。

 

這里要提示下AjaxMethod中的重載版本：

public AjaxMethodAttribute(string methodName);

 

    是無法調用的，因為已經被新的替換了，下面就是新的方式（這里我們將getInteger改成getInt）

 [AjaxMethod,AjaxNamespace("getInt")]
 public int getInteger()
{
     return 10;
}

 

 

然后我們接着改寫前台的代碼：

TestAjax.getInt(writeToDocument)

 

重新運行，最后的結果一樣的。

 

5.緩存結果

對於一些訪問量很大，但是要求更新速度不是很快的信息。我們通常會使用緩存來減少對服務器資源的消耗。這里AjaxPro也

提供了相關的功能，下面我們就舉例。

 

首先我們將之前的方法getInteger：

[AjaxMethod,AjaxNamespace("getInt"),AjaxServerCache(1)]
 public string getInteger()
{
    return DateTime.Now.ToString("ss-ffff");
}

 

對應的客戶端代碼如下：

    <script type="text/javascript">
        window.onload = function () {
            for (var si = 0; si < 100; si++) {
                setTimeout(ontime, si * 50);
            }
        }

        function ontime() {
            TestAjax.getInt(writeToDocument);
        }

        function writeToDocument(val) {
            document.getElementById("content").innerHTML += val.value + "<br />";
        }
    </script>
    <div id="content" >

    </div>

 

最后的結果如圖：

大家可以看到有些時間根本沒有改變，這樣就起到的緩存的作用。

 

6.訪問Session

相信有很多人都希望AjaxPro可以訪問Session,但是你們卻發現根本無法使用，其實AjaxPro是可以訪問Session,

只是我們僅僅少了一個步驟，只要加上那一步我們就可以訪問Session了。

 

下面為一個可以訪問Session的方法：

 [AjaxMethod(HttpSessionStateRequirement.ReadWrite),AjaxNamespace("getInt"),AjaxServerCache(1)]
 public int getInteger()
{
     return Index++;
}

 這里我們需要注意的是 AjaxMethod(HttpSessionStateRequirement.ReadWrite) ，這句就是訪問Session的關鍵，這里我們設置為了

可以訪問寫入Session，如果我們僅僅值需要讀取Session,我們可以僅設置Read即可；

 

四、傳送DataTable類型數據

 

1.首先我們先舉一個簡單的例子

服務端如下編寫：

[AjaxMethod]
public DataTable getTable()
{
     DataTable table = new DataTable();
     table.Columns.Add("id");
     DataRow r1 = table.NewRow();
     r1["id"] = 1;
     table.Rows.Add(r1);
     DataRow r2 = table.NewRow();
     r2["id"] = 2;
     table.Rows.Add(r2);
     return table;
}

 

客戶端代碼：

<script type="text/javascript">
     window.onload = function () {
         var content = document.getElementById("content");
         var table = TestAjax.getTable();
         var rtable = table.value;
         for (var r = 0; r < rtable.Rows.length; r++) {
             content.innerHTML += rtable.Rows[r].id + "<br />";
        }
    }
</script>
<div id="content" >
</div>

 

       其中服務端相對簡單，唯一麻煩的就是客戶端，因為返回的是DataTable，但是到了客戶端，在沒有自動提示的情況下我們並

不知道調用什么方法才可以將表中的數據遍歷出來，只有那些勤奮的程序員或許會用瀏覽器的js調試器查看這其中的奧秘，而這里

我們會簡單的介紹里面的方法。

 

首先是獲得value后的里面存在哪些方法以及變量：

方法或變量名	簡介
Columns	保存表中存在的列
Rows	保存表中存放的數據
addColumn(name,type)	向表中添加新的列
addRow(row)	向表中添加新的一行數據
toJSON()	返回JSON字符串

 

 

 

 

 

    如果我們要遍歷其中的數據，可以通過循環遍歷Rows，這里要注意不能用for in去遍歷，這樣你僅僅只會把里面的方法和變量遍歷

而不是數據。如果要知道里面有多少數據，可以通過*.Rows.length來訪問。

 

       訪問具體哪一行通過Rows[index]的方式即可，如果要方位其中的一個數據可以直接通過 Rows[index].列名 來訪問。當然你也

可以通過這種方式來訪問，最后的結果是一致的：Rows[index][列名]

 

2.保存來自客戶端的DataTable

      上面我們看到方法addColumn以及addRow或許你會覺得這些功能有什么用，自然有這個方法當然會有它的用處，下面講述

的就是如何將客戶端的DataTable返回到服務端。當然這里客戶端的DataTable其實就是采用json方式形成的而已，僅僅只是

AjaxPro提供了對應的轉換。

 

下面我們就開始將客戶端的DataTable傳送到客戶端。

 

首先是服務端的代碼：

[AjaxMethod]
public DataTable saveTable(DataTable table)
{
     return table;
}

 這里服務端的代碼很簡單，僅僅只是將DataTable原路返回。

 

下面是客戶端代碼（重點）

    <script type="text/javascript">
        window.onload = function () {
            var ntable = new Ajax.Web.DataTable();
            ntable.addColumn("id","System.Int32");
            var r1 = {
                'id':1
            };
            var r2 = {
                'id':2
            };
            ntable.addRow(r1);
            ntable.addRow(r2);
            var table = TestAjax.saveTable(ntable);

            var content = document.getElementById("content");
            var rtable = table.value;
            for (var r = 0; r < rtable.Rows.length; r++) {
                content.innerHTML += rtable.Rows[r]['id'] + "<br />";
            }
        }
    </script>
    <div id="content" >

    </div>

 

      其中我們接觸到了很多新的東西，比如Ajax.Web.DataTable ，這個就是AjaxPro用來在客戶端表示DataTable的對象，

下面就是我們之前介紹過的方法，唯一的僅僅就這個類型。

      這里注意看每行的數據，我們采用的是對象字符串的形式進行封裝的，這就是為什么我們在獲取到DataTable類型數據

之后可以直接通過 *.Rows[index].列名 的方式能夠訪問的來源。

 

3.擴展

       如果你需要一次性將多個DataTable同時傳送到客戶端，AjaxPro也提供了Ajax.Web.DataSet，其中僅僅只有一個

方法那就是：addTable(t)  用來將表添加到DataSet中。同時還支持Ajax.Web.Dictionary和Ajax.Web.NameValueCollection

 

五、傳送數組類型數據

 

1.首先我們先舉例

服務端代碼如下：

        [AjaxMethod]
        public int[] getIntArray()
        {
            return new int[] { 1, 2, 3, 4, 5, 6, 7 };
        }

        [AjaxMethod]
        public string[] getStringArray()
        {
            return new string[] { "1s", "2s", "3s", "4s", "5s" };
        }

 

客戶端如下：

    <script type="text/javascript">
        window.onload = function () {
            var content = document.getElementById("content");

            var iarray = TestAjax.getIntArray().value;
            for (var r = 0; r < iarray.length; r++ ) {
                content.innerHTML += iarray[r] + "<br />";
            }

            var sarray = TestAjax.getStringArray().value;
            for (var rs = 0 ; rs < sarray.length; rs++) {
                content.innerHTML += sarray[rs] + "<br />";
            }
        }
    </script>
    <div id="content" >

    </div>

 

     其實最終返回到客戶端之后AjaxPro並沒有自己重新創建一個數組，而是直接使用js中原生自帶的

Array，所以關於將數組傳送到服務端部分省略。

 

2.自定義類型數組

原本打算單獨放一章去講述如何傳遞自定義類型的數據，但是想到傳遞數組這里要需要涉及到，所以這里就一並講了。

首先我們先小試牛刀，傳遞一條數據。

 

依然還是服務端代碼（加自定義的類）：

        public class TestData
        {
            public string ID { get; set; }
        }

        [AjaxMethod]
        public TestData getTestData()
        {
            return new TestData
            {
                ID = "1" 
            };
        }

 

然后是客戶端代碼：

    <script type="text/javascript">
        window.onload = function () {
            var content = document.getElementById("content");

            var custom = TestAjax.getTestData().value;
            alert(custom.ID);
        }
    </script>

 

     其實自定義數據的傳送更簡單寫，因為最后到客戶端的對象跟你在服務端寫的類的格式完全一致，所以方便調用。

→_→ 應該會有人會想能不能寫方法，這里我可以直接告訴你，AjaxPro會直接忽略掉。

 

擴展：

      里面的數據也可以是其他的自定義的類或者數組，因為json基本都能夠表示。◑﹏◐搞那么多層，我想應該會

暈吧。

 

下面我們開始傳送自定義類型的數組。

服務端代碼如下：

        public class TestData
        {
            public string ID { get; set; }
            public string[] StrArray { get; set; }
        }

        [AjaxMethod]
        public TestData[] getTestData()
        {
            return new TestData[]{
                new TestData{
                    ID = "1",
                    StrArray = new string[] { "d", "ds", "ds" }
                },
                new TestData{
                    ID = "2",
                    StrArray = new string[] { "d", "ds", "ds" }
                }
            };
        }

 

接着是客戶端代碼

    <script type="text/javascript">
        window.onload = function () {
            var content = document.getElementById("content");

            var custom = TestAjax.getTestData().value;
            for (var r = 0 ; r < custom.length; r++) {
                content.innerHTML += custom[r].ID + "<br />";
            }
        }
    </script>
    <div id="content" >

    </div>

 

      我相信那些有這比較好的json基礎的，看到現在應該明白了什么了吧。只要是json能夠表示的數據在客戶端都是能夠

表示出來的，所以我們介紹到這。其實關於數據的傳送就可以告一段落了。