ASP.Net Ajax框架 和ScriptMnager控件 调用Web Service

介绍

传统的Web 应用模型，采用的是同步请求的方式。

        用户在网页上触发一个操作就会发送HTTP请求连接到Web服务器，服务器对请求进行处理后，
        最后返回一个完整的HTM页面到客户端
        
        使用Ajax之后，页面由全部刷新为局部刷新，不再有整个页面重载刷新的等待
        
        Ajax是现在多种技术的综合，包括JavaScript,HTML,CSS,DOM,XML,XMLHttpRequest。
        Ajax使用HTML和CSS标准化呈现数据，使用DOM实现动态显示数据，使用XML进行数据交换，
        使用XMLHttpRequest对象进行异步数据读取，使用JavaScript绑定和处理所有数据
        
        
        XMLHttpRequest、JavaScript和DOM是AjAX技术的核心
               

        ASP.NET Ajax框架的核心是一种可视化的Ajax应用技术，该框架的最大特色是将大量复杂的脚本

封装成控件，开发者了解控件的属性、方法、事件后只要将其拖拽到页面并编写少量的代码就可

以实现AjAX应用，甚至可以使用开发者熟悉的服务器语言进行编码，大大降低了Ajax应用程序的开发难度

ASP.NET  AjAX框架的核心组件

包括ScriptManager、UpdatePanel、UpdateProgress、Timer和ScriptManagerProxy

        他们是ASP.NET  AJAX的框架灵魂，提供了全局脚本的控制、异步获取数据和页面局部刷新的功能

，以及定时器自动实现任务的功能

 ScriptMnager控件

是核心控件组件之一，是全局脚本的控制器，用于为页面注册AjAx框架
        他提供页面上所有ASP.Net AJAx控件（UpdatePanel  UpdataProgress）的支持，并且能够指
        定通过JavaScript可以调用Web Service
        
        1.创建Web 服务

        2.ScriptManager 注册Web Service 
          将ScriptManager拖拽到页面 添加 Service子元素
        Services 子元素用于管理对Web Service 的调用，通过ServiceReference标签可以在
        Services中注册一个Web  Service。
        在运行时 ，ScriptManager将为每个ServiceReference对象生成一个客户端代理

        3.编写JavaScript 实现功能

通过JavaScript调用Web Service时，调用的类名及方法和Web Service服务器端的命名一致，
        调用的方法支持参数列表
        前面的参数和服务器端的Web Serice 同名方法的参数逐一对应
        最后一个参数（function(result)｛｝）为回调函数
        通过调用函数处理Web Service的返回结果


        通过ScriptManager 可以在浏览器中使用客户端脚本异步刷新调用ASP.NET Web 服务
        这样改善用户在使用Web应用程序时的体验，页面可以在不进行回发和刷新整个页面的情况下
        调用基于服务器的方法，从而实现异步刷新

实例代码

网页

<form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
              <asp:ServiceReference Path="~/Dl.asmx" />
            </Services>
        </asp:ScriptManager>

        <div>
            帐号<input type="text" id="uid" />
        </div>
        <div>
            密码<input type="text" id="pwd" />

        </div>
        <div>
            <input type="button" id="btn" title="登录" />
        </div>
    </form>

JS

<script type="text/javascript">
    $(function () {
        $("#btn").click(function () {
            var uid = $("#uid").val();
            var pwd = $("#pwd").val();
            ch5.Dl.zzzz(uid, pwd, function (a) {
                alert(a);
            });
        });
    });

    function jsCallWeb() {
        ch5.Dl.HelloWorld(outResult);
    }
    //输出结果  
    function outResult(result) {
        alert(result);
    }

</script>

Web Service

namespace ch5
{
    /// <summary>
    /// Dl 的摘要说明
    /// </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 Dl : System.Web.Services.WebService
    {
        public Dl() {

        }

        [WebMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }

        [WebMethod]
        public string zzzz(string uid,string pwd)
        {
            string info = "";
            Database db = DatabaseFactory.CreateDatabase("ConStr");
            string sql = string.Format(@"select * from Brand where Bdid={0} and BdName='{1}'", uid, pwd);
            DataSet set = db.ExecuteDataSet(CommandType.Text, sql);
            if (set.Tables[0].Rows.Count > 0)
            {
                info = "有";
            }
            else
            {
                info = "无";
            }
            return info;
        }
    
    }
}