二、小試身手——第一個Ajax程式__Ajax

一、          建立一個Ajax_Start的網站

 

二、          在網站中添加一個web服務（ws_start.asmx）
在vs2008中，添加一個web服務產生了兩個檔案，一個是asmx檔案，一個是在App_code裡的cs檔案；我覺得這樣並不好，主要是不方便管理，至少現在在我看來是這樣，所以下面我們要來改造一下它

 

三、          改造vs2008中產生的web服務

1)       首先將App_code裡ws_start.cs中的代碼全部copy出來，然後放入到ws_start.asmx檔案中去

2)       刪除App_code裡的ws_start.cs檔案

3)       將ws_start.asmx中的最上面的WebService裡的CodeBehind屬性刪除，因為我們已經在前一步刪除了CodeBehind裡關聯的檔案

4)       因為vs2008產生的web服務的cs檔案沒有命名空間，所以必須為它加上一個命名空間：namespace Ajax_Start

5)       修改WebService裡的class屬性值，因為我們已經為產生的類添加了命名空間，所以Class="Ajax_Start.ws_start"

 

四、          向Default.aspx頁面中添加一個ScriptManage控制項，並關聯到上面建立的web服務，代碼如下：

        <asp:ScriptManager ID="ScriptManager1" runat="server">

            <Services>

                <asp:ServiceReference Path="~/ws_start.asmx" />

            </Services>

        </asp:ScriptManager>

 

五、          編寫web服務中的函數，新增函數如下：

      在添加函數之前要先將// [System.Web.Script.Services.ScriptService]的注釋去掉，因為只有使用了ScriptService的類才能通過ajax在用戶端調用

        [WebMethod]

        public string FreshTime(){return DateTime.Now.ToString();}

 

        [WebMethod]

        public string HelloSomebody(string name){return "Hello：" + name;}

 

        [WebMethod]

        public void ThrowError(){throw new Exception("這是我拋出的異常");}

 

六、          編寫調用web服務的Js代碼，如下：

    <script type="text/javascript">

    function getFreshTime(){Ajax_Start.ws_start.FreshTime(whenSuccess,whenFailed);}

    function getHelloSomebody(value){Ajax_Start.ws_start.HelloSomebody(value,whenSuccess,whenFailed);}

    function getThrowError(){Ajax_Start.ws_start.ThrowError(whenSuccess,whenFailed);}

   

    function whenSuccess(result){

        alert(result);

    }

    function whenFailed(result){

        var str = "伺服器端異常的類型：" + result.get_stackTrace() + "/r/n"

                   + "異常描述資訊：" + result.get_message() + "/r/n"

                   + "造成異常的HTTP響應的狀態代碼：" + result.get_statusCode() + "/r/n"

                   + "伺服器端異常的堆疊追蹤資訊：" + result.get_exceptionType() + "/r/n"

                   + "是否是由於網路連接逾時造成：" + result.get_timedOut();

        alert(str);

    }

</script>

 

七、          編寫調用Js的頁面代碼

        <a onclick="getFreshTime()">點擊調用FreashTime函數</a>

        <br />

        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

        <a onclick="getHelloSomebody(document.getElementById('TextBox1').value)">點擊調用HelloSomebody函數</a>

        <br />

        <a onclick="getThrowError()">點擊調用ThrowError函數</a>

 

八、          測試結果

 

頁面在沒有重新整理的情況下，soldierluo傳輸到了伺服器，並擷取到了從伺服器返回的結果Helo：soldierluo，好了，第一個ajax的程式就完成了，之後會簡單的介紹下重要的asp.net ajax控制項