Ajax学习笔记(3)异步调用web service以及客户端服务器端数据类型转换

最新推荐文章于 2021-03-02 07:02:55 发布
最新推荐文章于 2021-03-02 07:02:55 发布
阅读量641 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wendykeysky/article/details/22397383
版权

一.WebServiceProxy

一.Methods

1.invoke:执行异步调用web service的函数

Sys.Net.WebServiceProxy.invoke(path,methodName,useHttpGet,parameters,succeedCallback,failedCallback,userContext,timeout)

Path:web service的Url地址

methodName:需要执行的web service中的方法名称

useHttpGet:可选参数，默认为false，请求方式为POST，若设置为true，请求方式则为Get

parameters:可选参数，调用的js函数的名称

succeedCallback:可选参数，当请求成功后执行的函数

failedCallback:可选参数，当请求失败后执行的函数

userContext:可选参数，提交的用户相关信息

timeout:可选参数，执行的HTTP请求的等待时间,单位为毫秒

二．WebServiceError

一.Properties

1．exceptionType:获取错误的类型

   var errorException:error.get_exceptionType();

2. message:获取错误的提示信息

   var message=error.get_message();

3.stackTrace:获取追踪时的错误提示信息

   var stackTrace=error.get_stackTrace();

4.statusCode:获取HTTP请求错误提示信息

   var statusCode=error.get_statusCode();

5.timeOut:获取因为超时引起的错误信息

   var timeout=error.get_timeOut();

三．客户端调用Web Service一般步骤

1.为Web Service添加[ScriptService]方法

2.为Web Service中需要暴露给客户端的方法添加[WebMethod]属性

3.在页面的ScriptManager控件中添加对web service的引用

4.使用客户端调用web service的方法

5.在客户端调用回调函数

6.若需要以HTTP GET方式调用，则修改为[ScriptMethod(UseHttpGet=true)]

7.复杂的数据类型还需要为web service添加[GenerateScriptType(typeof(type))]

四．客户端调用Web Service中DataTable类型

1.调用web service的一般步骤都添加完毕

2.将Ajax CTP的dll引用包复制到bin目录下

3.在web.config配置文件下的web extensions节点下添加如下代码

Code
  <system.web.extensions>

     <scripting>

       <webServices>

         <jsonSerialization maxJsonLength="50000">

           <converters>

             <add name="DataSetConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataSetConverter, Microsoft.Web.Preview, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

             <add name="DataRowConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataRowConverter, Microsoft.Web.Preview, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

             <add name="DataTableConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataTableConverter, Microsoft.Web.Preview, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

           </converters>

         </jsonSerialization>

       </webServices>

     </scripting>

   </system.web.extensions>

四．客户端调用Web Service中以XML方式导出数据

1.调用web service的一般步骤都添加完毕

为web service添加[ScriptMethod(ResponseFormat=ResponseFormat.xml)]

_____________________________________________________________________________________________________

 简单调用,错误提示信息以及泛型调用

ConvertComplexData.aspx:

Code
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ConvertComplexData</title>
    <style type="text/css">
        #txtold {
            width: 55px;
        }
        #txtname {
            width: 55px;
        }
        #txtemail {
            width: 55px;
        }
        #divresult
        {
            background-color:Green;
            width:500px;
            float:left;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="sm" runat="server">
        <Services>
            <asp:ServiceReference Path="WebService/ComplexType.asmx" />
        </Services>
    </asp:ScriptManager>
    <input id="txtold" type="text" />
    <input id="txtname" type="text" />
    <input id="txtemail" type="text" />
    <button id="btnGetClass" onclick="return GetClass_Click()">GetClass</button>
    <button id="btnGetGeneric" onclick="return GetGeneric_Click()">GetGeneric</button>
    <div id="divresult"></div>
    <script type="text/javascript">
        function GetClass_Click() {
            var old = $get("txtold").value;
            var name = $get("txtname").value;
            var email = $get("txtemail").value;
            ComplexType.Getkeysky(old, name, email, onGetClassSuccessed,onFailed);
            //尽量将web service放到调用页平级或上下级目录下
        }
        function onGetClassSuccessed(result) {
            $get("divresult").innerHTML = "";
            $get("divresult").innerHTML += result.name;
            $get("divresult").innerHTML += result.email;
            $get("divresult").innerHTML += "我的年龄是" + result.old;
        }
        function onFailed(error) {
            $get("divresult").innerHTML = "";
            $get("divresult").innerHTML = error.get_exceptionType()+"</br>";
            $get("divresult").innerHTML += error.get_message() + "</br>";
            $get("divresult").innerHTML += error.get_stackTrace() + "</br>";
        }
        function GetGeneric_Click() {
            ComplexType.GenerIntlist(onGetGenericSuccessed);
        }
        function onGetGenericSuccessed(result) {
            $get("divresult").innerHTML = "";
            for (index = 0; index < result.length; ++index) {
                $get("divresult").innerHTML += result[index] + "</br>";
            }
            //对于泛型Ajax异步通信层会自动将返回的值转化为数组
        }
    </script>
    </form>
</body>
</html>

ComplexType.asmx:

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

/// <summary>
///ComplexType 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
[GenerateScriptType(typeof(keysky))]
//调用复杂数据类型
[ScriptService]
//将web service暴露给客户端脚本

public class ComplexType : System.Web.Services.WebService {

    public ComplexType () {

        //如果使用设计的组件，请取消注释以下行 
        //InitializeComponent(); 
    }

    [WebMethod]
    public keysky Getkeysky(int old, string name, string email)
    {
        return new keysky(old, name, email);
    }
    [WebMethod]
    public List<int> GenerIntlist()
    {
        List<int> mylist = new List<int>();
        for(int i=0;i<10;i++)
        {
            mylist.Add(i);
        }
        return mylist;
    }

}

点击GetClass按钮：

错误提示信息：

点击GetGeneric按钮：

————————————————————————————————————————————————

从客户端得到datatable

Code
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>GetDataTable</title>
    <style type="text/css">
        #divresult
        {
            background-color:Silver;
            width:500px;
            float:left;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="sm" runat="server">
        <Scripts>
            <asp:ScriptReference Path="../js/GetData.js" />
        </Scripts>
        <Services>
            <asp:ServiceReference Path="WebService/GetData.asmx" />
        </Services>
    </asp:ScriptManager>
    列名：<input id="txtname" type="text" />
    行数：<input id="txtcount" type="text" />
    <button id="btnGetDataTable" onclick="return GetDataTable_Click()">GetDataTable</button>
    <div id="divresult"></div>
    </form>
</body>
</html>

GetData.asmx：

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

/// <summary>
///GetData 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。 
[System.Web.Script.Services.ScriptService]
public class GetData : System.Web.Services.WebService {

    public GetData () {

        //如果使用设计的组件，请取消注释以下行 
        //InitializeComponent(); 
    }

    [WebMethod]
    public DataTable GetDataTable(string name, int count)
    {
        DataTable table = new DataTable(name);
        table.Columns.Add(new DataColumn("id", typeof(int)));
        table.Columns.Add(new DataColumn(name, typeof(string)));
        for (int i = 0; i < count; i++)
        {
            DataRow DR = table.NewRow();
            DR["id"] = i;
            DR[name] = string.Format("{0}:{1}", name, i);
            table.Rows.Add(DR);
            table.AcceptChanges();
        }
        return table;
    }
    
}

GetData.js:

Code
function GetDataTable_Click() {
    var name = $get("txtname").value;
    var count = $get("txtcount").value;
    GetData.GetDataTable(name, count, onGetTable, onFailed);
}
function onGetTable(result) {
    $get("divresult").innerHTML = "";
    var colid = result.columns[0].name;
    var colname = result.columns[1].name;
    var rows = result.rows;
    sbuilder = new Sys.StringBuilder();
    sbuilder.append("<table border=1; width=300;>");
    //加载表头
    sbuilder.append(String.format("<tr><td>{0}</td><td>{1}</td></tr>", colid, colname));
    //循环加载数据
    for (index = 0; index < rows.length; ++index) {
        sbuilder.append(String.format("<tr><td>{0}</td><td>{1}</td></tr>", rows[index][colid], rows[index][colname]));
    }
    sbuilder.append("</table>");
    $get("divresult").innerHTML = sbuilder.toString();
}
//调用成功的回调函数
function onFailed(error) {
    $get("divresult").innerHTML = "";
    $get("divresult").innerHTML = error.get_exceptionType() + "</br>";
    $get("divresult").innerHTML += error.get_message() + "</br>";
    $get("divresult").innerHTML += error.get_stackTrace() + "</br>";
}
//调用失败的回调函数
if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
//ASP.NET AJAX客户端运行时只有收到所有通过ScriptManager引入的脚本的加载完毕通知后，才能够顺利进行初始化工作

 

 

点击GetTable按钮：

——————————————————————————————————————————————————

得到XML类型数据：

Code
<%@ Page Language="C#"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ConvertXml</title>
    <style type="text/css">
        #divresult
        {
            background-color:Green;
            width:500px;
            float:left;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="sm" runat="server">
    <Services>
            <asp:ServiceReference Path="WebService/XmlSer.asmx" />
        </Services>
    </asp:ScriptManager>
    <button id="btnGetXml" onclick="return GetXml_Click()">GetXml</button>
    <div id="divresult"></div>
    <script type="text/javascript">
        function GetXml_Click() {
            XmlSer.Getkeysky(onSuccessed);
        }
        function onSuccessed(result) {
            $get("divresult").innerText = result.xml;
        }
    </script>
    </form>
</body>
</html>

XmlSer.asmx：

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

/// <summary>
///XmlSer 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。 
[System.Web.Script.Services.ScriptService]
public class XmlSer : System.Web.Services.WebService {

    public XmlSer () {

        //如果使用设计的组件，请取消注释以下行 
        //InitializeComponent(); 
    }

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Xml)]
    public keysky Getkeysky()
    {
        return new keysky(23, "keysky", "wendichen2007@hotmail.com");
    }
    
}

点击GetXML按钮：

 

wendy_soft
关注
服务器客户端配置数据与protobuf数据转换流程操作
wulong710的专栏
10-22 640
hs_cp_res.bat ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::@author pdh ::@function 专门用于将生成的动画、通讯协议、路径资源拷贝到程序对应的路径下 :: ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: echo off set OLD_PATH=%cd% set SRC_TOOL_PATH=..\..\doc
Ajax异步调用Web服务的例子
winnerzone的专栏
07-14 824
我这里是看的Dflying Chen的使用ASP.NET AJAX异步调用Web Service和页面中的类方法的一系列文章写出来的例子.请Dflying Chen别介意.例子中没有最后一篇文章的的例子,因为Dflying Chen没有写展现,所以比较遗憾.大家可以去http://www.cnblogs.com/dflying/archive/2007/06/21/791272.html
使用ASP.NET AJAX异步调用Web Service和页面中的类方法（1）：调用Web Service、调用页面中的类方法(转)...
dengying0469的博客
04-23 130
本文来自《ASP.NET AJAX程序设计 第II卷：客户端Microsoft AJAX Library相关》的第三章《异步调用Web Service和页面中的类方法》，请同时参考本章的其他文章。 3.1 调用Web Service 之所以ASP.NET AJAX将Web Service提高到了如此的重要位置上，让它几乎成为了ASP.NET AJAX服务器端逻辑最受推荐的实现方...
深入了解java执行顺序_webservice执行过程深入理解
weixin_39774644的博客
03-02 136
前面我们搞了1，2个DEMO，基本对webservice服务发布，调用 ，执行 有一定的了解。今天的话，我们再系统的梳理下webservice执行过程。首先我们在webservice服务器端开发webservice接口，然后发布webservice；然后我们通过一个Url调用webservice接口，比如发布的时候 ，url是http://192.168.1.103/helloWorld那我们请...
jquery中ajax学习笔记3
10-28
### jQuery中AJAX的学习笔记3 ...通过本学习笔记3的学习，读者应当能理解如何利用jQuery来处理服务器端返回的XML数据，并通过修改前端代码来实现这一功能。这对于开发支持异步交互的Web应用非常有帮助。
ajax学习笔记
11-30
### AJAX学习笔记 #### 一、引言 Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。...
AJax 学习笔记一(XMLHTTPRequest对象)
12-10
XMLHttpRequest对象是AJAX（Asynchronous JavaScript and XML）技术的核心组成部分，它允许JavaScript与服务器进行异步通信，无需刷新整个页面就能更新网页内容，从而极大地提升了用户体验。在本文中，我们将深入...
16ajax学习笔记1
08-08
在本篇16ajax学习笔记1中，我们将探讨Ajax的基础概念、使用方法以及jQuery库中的Ajax实现。 1、发送请求： Ajax的首要任务是创建XMLHttpRequest对象，这是浏览器提供的API。在JavaScript中，我们可以通过new ...
Ajax学习笔记个人总结
09-12
### Ajax学习笔记个人总结 #### 一、XMLHttpRequest对象简介 **XMLHttpRequest** 对象是 AJAX 技术的核心，它负责在客户端与服务器之间发送异步请求，无需刷新整个页面即可实现局部数据更新。要使用 ...
ajax异步调用webservice实例
04-19
网上有，但是只是介绍，没有现成的代码，现在我做了一个最简单的web服务，在客户端运用AJAX技术进行了调用，测试成功！
Ajax调用WebService（一）
热门推荐
vs_sundaylove的专栏
07-05 3万+
一些感悟： 最近工作一直都很忙。很久没有更新自己的博客了。有很多东西要写。也只能慢慢写。真正能讲出来的东西，才能叫做真正掌握了吧。我很喜欢一句话：“纸上学来终觉浅，绝知此事要躬行”。所以，在工作之余，自己做一些Dome并且测试通过，才放到网上来，要不就是对知识
ajax调用webservice注意事项
qq_35056027的博客
10-21 1290
1.weservice客户端需要注意（跨域请求）                                                   2.ajax请求 var soapdata='{"subject":"测试电话李明远","cicc_contactid": null,"cicc_direction":"10","ownerid":"A
另外种Ajax异步调用webservice
weixin_30945039的博客
09-14 81
在此处我就创建了一个默认的web服务，并不做什么修改，把主要集力放在怎么实现JS调Web服务上面。 using System;using System.Collections.Generic;using System.Web;using System.Web.Services;/// <summary>///WebService 的摘要说明/// </summary>[W...
了解 ASP.NET AJAX Web 服务——ASP.NET AJAX学习笔记“出自msdn”
大巧不工
06-24 1320
 用 ASP.NET AJAX 调用Web 服务Web服务是 .NET 框架的一个组成部分，为分布式系统之间的数据交换提供跨平台的解决方案。Web 服务常用于不同操作系统、对象模型和编程语言的数据发送和接收，也可用于向ASP.NET AJAX 页面中动态注入数据，或从页面向后端系统发送数据。上述所有操作都无需执行回传。尽管通过 ASP.NET AJAX UpdatePanel控件可以方便地在任意A
客户端到服务器端的通信过程及原理
时光代码
01-02 6320
学习任何东西，我们只要搞清楚其原理，就会触类旁通。现在结和我所学，我想总结一下客户端到服务器端的通信过程。只有明白了原理，我们才会明白当我们程序开发过程中错误的问题会出现在那，才会更好的解决问题。 我们首先要了解一个概念性的词汇：Socket socket的英文原义是“孔”或“插座”。作为进程通信机制，取后一种意思。通常也称作“套接字”，用于描述IP地址和端口，是一个通信链的句柄。(其
Ajax学习笔记：从入门到精通
“Ajax学习经典笔记，适合初学者或者巩固知识用” Ajax（Asynchronous JavaScript and XML）是一种创建动态网页的技术，它允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这篇经典笔记详细...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值