Web Services And Ajax

Web Service 與Ajax來實現一個加法運算；

1。建立一個ASP。NET Web 專案；

2。添加一個Web Service到項目中去；

namespace AjaxWCF{    /// <summary>    /// AjaxService 的摘要說明    /// </summary>    [WebService(Namespace = "http://tempuri.org/")]    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]    [System.ComponentModel.ToolboxItem(false)]    // 若要允許使用 ASP.NET AJAX 從指令碼中調用此 Web 服務，請取消對下行的注釋。    [System.Web.Script.Services.ScriptService]    public class AjaxService : System.Web.Services.WebService    {        [WebMethod]        public string HelloWorld()        {            return "Hello World";        }        [WebMethod]        public int add(int a, int b)        {            return a + b;        }    }}

注意：一定要加[System.Web.Script.Services.ScriptService],並且還在自己寫的方法頭上加[WebMethod]

運行Service，結果如下：

在URL加上JS，將提供JS代理檔案下載：

 

在頁面中添加ScriptManager，並引用WebService

<asp:ScriptManager ID="ScriptManager1" runat="server">           <Scripts>               <asp:ScriptReference Path="~/AjaxService.asmx/js" />           </Scripts>       </asp:ScriptManager>

注意：這裡也可以引用，你剛才下載的JS檔案，也可以直接調用WEB service

 

添加兩個文字框，用來輸入資料，完事代碼如下：

<form id="form1" runat="server">   <div>       <asp:ScriptManager ID="ScriptManager1" runat="server">           <Scripts>               <asp:ScriptReference Path="~/AjaxService.asmx/js" />           </Scripts>       </asp:ScriptManager>       A:<input id="txtA" type="text" /><br />       B:<input id="txtB" type="text" /><br />       <input id="Button1" type="button" value="OK" onclick="add()" />   </div>   </form>

 

現在在Head部分添加JS代碼；

<script language="javascript" type="text/javascript">       function add() {           var a = $get("txtA").value;           var b = $get("txtB").value;           AjaxWCF.AjaxService.add(a, b, message);       }       function message(res)       { alert(res); }   </script>

注意：AjaxWCF.AjaxService.add()方法就是JS檔案中的一個代理方法，可以在JS檔案中找到；

 

上面這個圖就是JS檔案的全部代碼，有興趣的朋友可以去研究一下；

最後運行結果如下：