Web Service(Service)s And Ajax

Web 瑟维斯 与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)(Service),结果如下:

图片 1

以URL加上JS,将提供JS代理文件下充斥:

图片 2

 

于页面被补充加ScriptManager,并引述Web瑟维斯(Service)(Service)

<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(Service).add()方法就是JS文件中的一个代理方,能够当JS文件中找到;

 

图片 3

面这么些图就是是JS文件的整个代码,有趣味之爱人可错过琢磨一下;

最后运行结果如下:

图片 4

相关文章