Ajax调用WebService（一）

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

分类： Ajax 使用技术 WebService应用技术 ASP.NET学习记录2011-07-05 17:51 15799人阅读 评论(9) 收藏 举报

一些感悟：

最近工作一直都很忙。很久没有更新自己的博客了。有很多东西要写。也只能慢慢写。真正能讲出来的东西，才能叫做真正掌握了吧。
我很喜欢一句话：“纸上学来终觉浅，绝知此事要躬行”。所以，在工作之余，自己做一些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); // 输出服务器端返回数据
            }

});

});

}

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

Ajax调用WebService（一）的更多相关文章

  1. Jquery ajax调用webservice总结

    jquery ajax调用webservice(C#)要注意的几个事项: 1.web.config里需要配置2个地方 <httpHandlers>      <remove verb ...

  2. Ajax调用WebService

    前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1 ...

  3. Jquery Ajax 调用 WebService

    原文:http://www.cnblogs.com/andiki/archive/2010/05/17/1737254.html jquery ajax调用webservice(C#)要注意的几个事项 ...

  4. 使用ajax调用webservice加载table

    写了个ajax调用webservice动态加载表格的案例 不废话直接上代码 webservice代码: /// <summary> /// 首页显示会员信息 /// </summar ...

  5. ASP.NET实现二维码 ASP.Net上传文件 SQL基础语法 C# 动态创建数据库三（MySQL） Net Core 实现谷歌翻译ApI 免费版 C#发布和调试WebService ajax调用WebService实现数据库操作 C# 实体类转json数据过滤掉字段为null的字段

    ASP.NET实现二维码 using System;using System.Collections.Generic;using System.Drawing;using System.Linq;us ...

  6. ajax调用webservice服务

    ajax调用是 html方向调用的, 而sqlconnection是 java代码调用的,本质差不多 <html> <head> <title>通过ajax调用we ...

  7. AJAX 调用WebService 、WebApi 增删改查

    WebService 页面: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 3 ...

  8. Ajax调用WebService接口样例

    在做手机端h5的应用时,通过Ajax调用http接口时没啥问题的:但有些老的接口是用WebService实现的,也来不及改成http的方式,这时通过Ajax调用会有些麻烦,在此记录具体实现过程.本文使 ...

  9. AJAX 调用WebService 、WebApi 增删改查（笔记）

    经过大半天努力,终于完成增删改查了!心情有点小激动!!对于初学者的我来说,一路上都是迷茫,坑!!虽说网上有资料,可动手起来却不易(初学者的我).(苦逼啊!) WebService 页面: /// &l ...

随机推荐

  1. MAC下编译FFMPEG

    1.下载ffmpeg,我使用xcode自带的git下载. 或者直接下载压缩包: 2.下载gas-preprocessor脚本 https://raw.github.com/mansr/gas-prep ...

  2. R语言笔记：快速入门

    1.简单会话 > x<-c(1,2,4) > x [1] 1 2 4 R语言的标准赋值运算符是<-.也可以用=,不过不建议用它,有些情况会失灵.其中c表示连接(concaten ...

  3. PHP array_chunk() 函数

    今天在CSDN上,看到了一个问题 一维数组 PHP code   array('0'=>'a',1=>'b',2=>'c',3=>'d',4=>'e',5=>'f' ...

  4. Android 常用UI控件之TabHost(5)Tab栏在底部且在最上层也不盖tab页

    tab栏在底部 <TabHost android:id="@android:id/tabhost" android:layout_width="match_pare ...

  5. C#如何使用和开发自定义配置节

    在日常的程序设计中,如何灵活和巧妙地运用配置信息是一个成功的设计师的首要选择.这不仅是为了程序设计得更灵活性和可扩展性,也是为了让你的代码给人以清新的感觉.程序中的配置信息一般放在应用程序的app.c ...

  6. Oracle数据导入导出imp/exp sp2-0734:未知的命令开头'imp...解决方法

    Oracle数据导入导出imp/exp sp2-0734:未知的命令开头'imp...解决方法   sp2-0734:未知的命令开头'imp 忽略了剩余行默认分类   www.2cto.com  应该 ...

  7. Zookeeper安装和配置

    Zookeeper的安装和配置,可以配置成单机模式.伪集群模式.集群模式. 参考http://coolxing.iteye.com/blog/1871009 一. 单机模式 (1)zookeeper下 ...

  8. bzoj2245

    这道题还是比较简单的费用流,由于w是递增的 实际上,这题数据还可以强一点,比如说分段函数不保证费用递增, 就要加一点技巧了(要保证函数的顺序) ; type node=record        ne ...

  9. UVa 1152 (中途相遇法) 4 Values whose Sum is 0

    题意: 要从四个数组中各选一个数,使得这四个数之和为0,求合法的方案数. 分析: 首先枚举A+B所有可能的值,排序. 然后枚举所有-C-D的值在其中用二分法查找. #include <cstdi ...

  10. 【 D3.js 高级系列 — 5.0 】 颜色

    颜色是作图不可少的概念,常用的标准有 RGB 和 HSL,D3 提供了创建颜色对象的方法,能够相互转换和插值. RGB色彩模式是通过对红(Red).绿(Green).蓝(Blue)三个颜色通道相互叠加 ...