二、小试身手——第一个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控件