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

一.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按钮:

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值