zoukankan      html  css  js  c++  java
  • Ajax调用WebService(一)

     

    Ajax调用WebService(一)

    http://www.cnblogs.com/leslies2/archive/2011/01/26/1934889.html

    分类: Ajax 使用技术 WebService应用技术 ASP.NET学习记录

    一些感悟: 

    最近工作一直都很忙。很久没有更新自己的博客了。有很多东西要写。也只能慢慢写。真正能讲出来的东西,才能叫做真正掌握了吧。
    我很喜欢一句话:“纸上学来终觉浅,绝知此事要躬行”。所以,在工作之余,自己做一些Dome并且测试通过,才放到网上来,要不就是对知识的不尊重。

    切入正题吧。

    WebService跟Ajax(我指Jquery框架),大家都不陌生。今天来看一个例子。在同域下Ajax调用WebService方法。(记得是同域,也就是要调用的WebService页面与Ajax请求页面在同一个网站下)。关于异步域调用,我会慢慢补上。

    具体操作如下:

    一、用VS2008 新建Web站点。这就不用解释了吧。

    二、站点下放入Jquery框架,我这里用的是 jquery-1.4.2.min.js。没有的从网上下

    三、在网站中添加“web服务”

    四、将Jquery框架添加到站点下,并且加一个CallWebService.js文件,来处理调用

    当做完后,网站框架结构为(具体站点,具体分析):

    基本大功告成了。因为一下就是些Code的复制了。

    1.Default.aspx页面。这是调用webservice服务的页面。

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Ajax调用WebService</title>

        <script src="Js/jquery-1.4.2.min.js" type="text/javascript"></script>

        <script src="Js/CallWebService.js" type="text/javascript"></script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <hr />
            <input id="btnCallHello" type="button" value="调用HelloWebService" />
            <hr />
            姓名:<input id="txtName" type="text" /><br />
            <input id="btnCallBody" type="button" value="调用HelloSomeBody" />
            <hr />
            学号:<input id="txtStuSid" type="text" /><br />
            姓名:<input id="txtStuName" type="text" /><br />
            性别:<input id="txtStuSex" type="text" /><br />
            年龄:<input id="txtStuAge" type="text" /><br />
            <input id="btnSinStuInfo" type="button" value="调用SetStudentInfo" /><br />
            <hr />
            <input id="btnMulStuInfos" type="button" value="调用GetMulStudentInfos" />
            <hr />    
        </div>
        <div id="backData"></div>
        </form>
    </body>
    </html>

    2.MyWebService.asmx页面。为WebService服务。

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Services;

    namespace WebServiceTest
    {
        /// <summary>
        /// MyWebService 的摘要说明
        /// </summary>
        [WebService(Namespace = "http://www.mywebaddr.com/")]
        [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
        [System.ComponentModel.ToolboxItem(false)]
        // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
        [System.Web.Script.Services.ScriptService]
        public class MyWebService : System.Web.Services.WebService
        {
            /// <summary>
            /// 返会语句话
            /// </summary>
            [WebMethod]
            public string HelloWebService()
            {
                return "Hello WebService";
            }

            /// <summary>
            /// 返回一句问候,根据名称
            /// </summary>
            [WebMethod]
            public string HelloSomeBody(string name)
            {
                return "Hello " + name;
            }


            /// <summary>
            /// 设置学生实体,并返回这个实体
            /// </summary>
            [WebMethod]
            public Student SetStudentInfo(string name, string sex, int age,int sid)
            {
                Student stuInfo = new Student();
                stuInfo.Sid = sid;
                stuInfo.Name = name;
                stuInfo.Sex = sex;
                stuInfo.Age = age;

                return stuInfo;
     
            }

            /// <summary>
            /// 返回泛型数据
            /// </summary>
            /// <returns></returns>
            [WebMethod]
            public List<Student> GetMulStudentInfos()
            {
                List<Student> StuList = new List<Student>();
                for (int i = 0; i < 10; i++)
                {
                    Student s = new Student();
                    s.Sid = i + 1;
                    s.Name = "Tom"+s.Sid;
                    s.Sex = "男";
                    s.Age = i + 1;
                    StuList.Add(s);
                }
                return StuList; 

            }


        }
    }

    注意:我们分别看一下这几个方法的签名,这很重要,因为方法签名决定了你调用必须遵守的规则,本文中我们用的是post方法,所以只给出post的方法签名。

    1.HelloWebService

    说明:请求的页面的地址: /MyWebService.asmx/HelloWebService;主机地址为:192.168.0.194;端口号:如果不是80端口,必须给出。

    调用该服务的完整路径为:http://192.168.0.194:85/MyWebService.asmx/HelloWebService 。(具体情况,具体分析)

    2.HelloSomeBody

    说明:请求的页面的地址: /MyWebService.asmx/HelloSomeBody;主机地址为:192.168.0.194;端口号:如果不是80端口,必须给出。

    “name=string”说明,请求该服务时,需要提供参数。

    调用该服务的完整路径为:http://192.168.0.194:85/MyWebService.asmx/HelloSomeBody 。(具体情况,具体分析)

    3.SetStudentInfo

    说明:请求的页面的地址: /MyWebService.asmx/SetStudentInfo;主机地址为:192.168.0.194;端口号:如果不是80端口,必须给出。

    注意参数说明。

    调用该服务的完整路径为:http://192.168.0.194:85/MyWebService.asmx/SetStudentInfo 。(具体情况,具体分析)

    4.GetMulStudentInfos

    说明:请求的页面的地址: /MyWebService.asmx/HelloSomeBody;主机地址为:192.168.0.194;端口号:如果不是80端口,必须给出。

    调用该服务的完整路径为:http://192.168.0.194:85/MyWebService.asmx/GetMulStudentInfos。(具体情况,具体分析)

    3.下面是核心部分,也就是调用服务的Ajax脚本代码。CallWebService.js

    $(document).ready(pageLoad);
    // 载入时进行执行的方法
    function pageLoad() {
        BindCallHello();
        BindCallBody();
        BindGetSingleStudent();
        BindGetMulStudents();
    }

    // 调用HelloWebService
    function BindCallHello(){
        $("#btnCallHello").click(function() {
            $.ajax({
                type: "post", //访问WebService使用Post方式请求

                url: "http://192.168.0.194:85/MyWebService.asmx/HelloWebService", //调用Url(WebService的地址和方法名称组合---WsURL/方法名)

                data: {}, //这里是要传递的参数,为Json格式{paraName:paraValue}

                contentType: "Application/Json", // 发送信息至服务器时内容编码类型

                beforeSend: function(XMLHttpRequest) {
                    XMLHttpRequest.setRequestHeader("Accept", "Application/Json"); // 接受的数据类型。(貌似不起作用,因为WebService的请求/返回 类型是相同的,由于请求的是Json,所以,返回的默认是Json)
                },
                success: function(data) {
                    var jsonValue = data;
                    
                    alert(jsonValue.d);// 输出Json

                },
                complete: function(XMLHttpRequest, textStatus) {
                    var returnText = XMLHttpRequest.responseText;
                    $("#backData").html(returnText);// 输出服务器端返回数据
                }

            });


        });

    }

    // 调用调用HelloSomeBody
    function BindCallBody() {
        $("#btnCallBody").click(function() {
            var name = $("#txtName").val();
            $.ajax({
                type: "post", //访问WebService使用Post方式请求

                url: "http://192.168.0.194:85/MyWebService.asmx/HelloSomeBody", //调用Url(WebService的地址和方法名称组合---WsURL/方法名)

                data: "{name:'" + name + "'}",  //这里是要传递的参数,为Json格式{paraName:paraValue}

                contentType: "Application/Json", // 发送信息至服务器时内容编码类型

                beforeSend: function(XMLHttpRequest) {
                    XMLHttpRequest.setRequestHeader("Accept", "Application/Json"); // 接受的数据类型。(貌似不起作用,因为WebService的请求/返回 类型是相同的,由于请求的是Json,所以,返回的默认是Json)
                },
                success: function(data) {
                    var jsonValue = data;

                    alert(jsonValue.d); // 输出Json

                },
                complete: function(XMLHttpRequest, textStatus) {
                    var returnText = XMLHttpRequest.responseText;
                    $("#backData").html(returnText); // 输出服务器端返回数据
                }

            });


        });

    }

    function BindGetSingleStudent() {
        $("#btnSinStuInfo").click(function() {
            var stuSid = $("#txtStuSid").val();
            var stuName = $("#txtStuName").val();
            var stuSex = $("#txtStuSex").val();
            var stuAge = $("#txtStuAge").val();
            $.ajax({
                type: "post", //访问WebService使用Post方式请求

                url: "http://192.168.0.194:85/MyWebService.asmx/SetStudentInfo", //调用Url(WebService的地址和方法名称组合---WsURL/方法名)
                
                data: "{name:'" + stuName +"',sex:'"+stuSex+"',age:'"+stuAge+"',sid:'"+stuSid+ "'}",  //这里是要传递的参数,为Json格式{paraName:paraValue}

                contentType: "Application/Json", // 发送信息至服务器时内容编码类型

                beforeSend: function(XMLHttpRequest) {
                    XMLHttpRequest.setRequestHeader("Accept", "Application/Json"); // 接受的数据类型。(貌似不起作用,因为WebService的请求/返回 类型是相同的,由于请求的是Json,所以,返回的默认是Json)
                },
                success: function(data) {
                    var jsonValue = data;

                    alert(jsonValue.d.Sid); // 输出Json

                },
                complete: function(XMLHttpRequest, textStatus) {
                    var returnText = XMLHttpRequest.responseText;
                    $("#backData").html(returnText); // 输出服务器端返回数据
                }

            });


        });
    }

    function BindGetMulStudents() {
        $("#btnMulStuInfos").click(function() {
            $.ajax({
                type: "post", //访问WebService使用Post方式请求

                url: "http://192.168.0.194:85/MyWebService.asmx/GetMulStudentInfos", //调用Url(WebService的地址和方法名称组合---WsURL/方法名)

                data: {},  //这里是要传递的参数,为Json格式{paraName:paraValue}

                contentType: "Application/Json", // 发送信息至服务器时内容编码类型

                beforeSend: function(XMLHttpRequest) {
                    XMLHttpRequest.setRequestHeader("Accept", "Application/Json"); // 接受的数据类型。(貌似不起作用,因为WebService的请求/返回 类型是相同的,由于请求的是Json,所以,返回的默认是Json)
                },
                success: function(data) {
                    var jsonValue = data;

                    alert(jsonValue.d[0].Sid); // 输出Json

                },
                complete: function(XMLHttpRequest, textStatus) {
                    var returnText = XMLHttpRequest.responseText;
                    $("#backData").html(returnText); // 输出服务器端返回数据
                }

            });


        });

     
    }

    说明:相关注释写的很详细,应该地球人都知道。应该是玩程序的地球人都知道。

  • 相关阅读:
    isEmpty和isBlank区别
    java加密算法相关
    页面跳转、替换、刷新
    打开一个网站都经过了什么
    css3动画和JS+DOM动画和JS+canvas动画比较
    canvas如何兼容IE8
    移动端的300毫秒延迟问题
    几道前端的面试题
    js执行过程
    微信查看网页源代码的方法
  • 原文地址:https://www.cnblogs.com/chengjun/p/4923886.html
Copyright © 2011-2022 走看看