前台页面通过ajax环境和js调用web service的几种方法

 目录：

1.配置ajax环境

2.js中调用web service (ajax环境) 方法一

3.方法二

4.方法三

5.ajax中的错误处理

//6.写的比较快 如果有疏忽之处  如能指出感激不尽。以免误人子弟。

使用ajax核心组件webconfi里的配置

1.contrlos节配置

tagPrefix:命名空间的别名 也就是空间的前缀 

Assembly 指定加载的程序集

PublicKeyToken 程序集的公钥

代码

  <system.web>

    <pages>

      <controls>

        <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

      </controls>

</pages>

2.httpHandlers节的配置

这里的配置主要针对一些特殊的请求如：ajax请求webservice 和javascript编译文件时。

.asmx 是处理的web服务的文件，扩展名为 。Axd 的http处理则是对封装的javascript文件的处理。

代码

<httpHandlers>

      <remove verb="*" path="*.asmx"/>

      <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

      <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

      <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>

    </httpHandlers>

1.在ScriptManageer中指定javascript文件路径，引用webservice时也是在<Script>节点下的<asp:ScriptReFerence>节点添加 

代码

    <asp:ScriptManager ID="ScriptManager1" runat="server">

        <Scripts>

            <asp:ScriptReference  Path="showDiv.js"/>        

        </Scripts>

        </asp:ScriptManager>

2.调用ajax 的CTP增值组件为： Name为js文件名； Assembly为程序集；

 <asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" />

//ScrptManager的主要作用是在客户端注册一些服务器端的代码，如将webservice注册在客户端，从而实现在客户端调用webservice

//js中调用web service (ajax环境) 方法一

1.在项目中引用：

System.Web.Extension

System.Web.Extension.Design

2.在webservice 文件中引用

using System.Web.Script.Services;

3.在webservice中的类前添加 [System.Web.Script.Services.ScriptService]属性

调用页 

在<asp:ScriptManagere> 节点下注册如：将webservice注册在客户端

代码

 <asp:ScriptManager ID="ScriptManager1" runat="server">

        <Services>

            <asp:ServiceReference Path="jsWebService.asmx"/>

        </Services>

</asp:ScriptManager>

 

//调用方法

 <script type="text/javascript" language="javascript">

        function ExeWebservice()

        {

        //WebService1为webservice的类名 HelloWord该类里的一个方法

         //这里的指定的处理方法不带括号和参数

         //无参数传入

            WebService1.HelloWord(GetResult);

         //有参数传入如参数 num num2

            var num=0;

            var num2=9;

            WebService1.HelloWord(num,num2,GetResult);

            

        }

        //处理调用webservice返回的方法

         function GetResult(str)

        {

            alert(str);

        }

        </script>

 

//前面的 <asp:ServiceReference />节是直接在前台书写 也可以在后台添加  其他的节点也类似方法

  protected void AddWebService()

    {        

        //创建服务注册对象

        ServiceReference service = new ServiceReference("WevService2.asmx");

        //添加到Script节点

        //ScriptManager1 是页面文件<ScriptManager/>节点的id  因为他为服务器控件所以可以直接访问

        ScriptManager1.Scripts.Add(service);

}

//？？在有母板页的情况下 并且母板页中存在ScriptManger 这时内容页如何添加其他的webservice

//这时使用ScriptManageProxy

//一个页面只能有一个ScriptManager；这里的一个页面的意思当页面有母板页时 内容页母板页两者间只能有一个ScriptManager

//不在母板页中调用所有的webservice是为了性能

//用法和ScriptManage完全一样 只不过这个是代理如：

<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">

            <Scripts>

                <asp:ScriptReference Path="abcd.asmx" />           

            </Scripts>

        </asp:ScriptManagerProxy>

//在后台中调用和前面使用ScriptManger一样 如这里为 对象id为 ScriptManagerProxy1

//前台js不变

  protected void AddWebService()

    {        

        //创建服务注册对象

        ServiceReference service = new ServiceReference("WevService2.asmx");

        //添加到Script节点

        //ScriptManager1 是页面文件<ScriptManager/>节点的id  因为他为服务器控件所以可以直接访问

        ScriptManagerProxy1.Scripts.Add(service);

}

//js中调用web service 方法二（在后台声明static方法）

//前提 页面中必须有ajax的<ScriptManager />j节点

//1.建一个普通aspx页

//后台代码

//这里的方法必须为静态

    [System.Web.Services.WebMethod]

    public static string GetData(string str)

    {

        return "[" + str + "]";

}

页面代码：

function Button1_onclick()

 {

//PageMethods 当前页的PageMethods 

//GetData 为后台的静态方法

 var name="图图";

PageMethods.GetData(name,Show);

}

function Show(str)

{

alert(str);

}

//可能出现的问题 "PageMethods未定义"或"对象不支持此属性或方法

//1.页面中必须有ajax的<ScriptManager />j节点 并且webconfig里必须配置好了ajax

//2.不能将<ScriptManager /> 节点中的EnableMethods设置为true；

//3.

//js中调用web service 使用异步请求 方法三

<script type="text/javascript" language="javascript"> 

// <!CDATA[

var xmlhttp;

//创建一个xmlhttp请求对象

//该方法一般浏览器都没有问题

 function CreateXMLHttpRequest()

 {

if(window.ActiveXObject)//用于ie浏览器

{

 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

else if(window.XMLHttpRequest)//其他浏览器

{

xmlhttp=new xmlHttpRequest();

}

else

alert('创建不了请求对象，没戏了。');

}  

//调用webservice的方法

function GetData()

{

//请求的webservice 这里也可以为一般的网址

var url="aaa.asmx？id=3&name='tutu'";

//escape()方法处理中文提交错误 没测试  应该这里也可用

//var url="aaa.asmx？id=3&name=escape("图图")";

// var url="aaa.asmx";

//GET为发送请求的类型 

//true 为异步请求

xmlhttp.Open("GET",url,true);

xmlhttp.send();

////多说一点 

// //1.GET方法

// xmlhttp.Open("GET","www.aaaa.com?id=3 & name='tutu'",true);

// //xmlhttp.send();和xmlhttp.send(null);一样的

// //xmlhttp.send();

// xmlhttp.send(null);

//

// //2.POST方法

// //建议不要用POST方法 这和服务器设置和环境变量有关 不建议用 

// xmlhttp.Open("POST","www.aaaa.com?id=3 & name='tutu'",true);

// //xmlhttp.send();和xmlhttp.send(null);一样的

// //xmlhttp.send();

// xmlhttp.send("id=3 &name='tutu'");

//3.GET和POST方法

//GET发送的数据现在在浏览器地址里 当然这里不显示

//GET发送的数据少 POST多

//以前默认get 好像从2.0开始默认为post提交

//在后台取传过来的参数方法不一样。POST 为：Request.Form["id"] GET为：Request.QueryString["id"]  通用的：Request["id"]

}

//处理返回数据的方法

//str

function ShowData()

{

if(xmlhttp.readystate==4 )//异步掉哟娜完成

{

if(xmlhttp.status==200)//html请求执行完成

{

//1.responsetext 返回的是text

//2.responsexml 返回xml  要求服务器响应必须符合xml格式

//3。responsebody 返回body信息

//如果只想返回你后台方法执行的信息  可以将页面文件中除了<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="utf-8" %> 全部删掉

alert(xmlhttp.responsetext);

//bytes2BSTR 这是个处理中文乱码的vb方法 可在网上搜一下

//alert(bytes2BSTR(xmlhttp.responsetext));

}

}

}

 // ]]>

</script>

//Ajax中的错误处理

使用过ajax的就会发现 当发生错误的时候即使我们不捕获 ajax也会已alert的方式弹出显示错误信息

在可视页面上选中ServiceManager控件 F4 打开属性 转到事件 添加AsyncPostBackError事件

//ServiceManager捕获UpdataePanel里发生的错误

//如下 下面的Button1控件在UpdatPanel1里

 protected void ScriptManager1_AsyncPostBackError(object sender, AsyncPostBackErrorEventArgs e)

    {

        //1.打印定义的键值对中的错误信息

        //如果取消下面的注释需要+= 否则这里的信息被替换了

        if (e.Exception.Data["errornoe"] != null)

        {

            string errorstr = e.Exception.Data["errorone"].ToString();

            ScriptManager1.AsyncPostBackErrorMessage = errorstr;

        }

        //2。这里即使注掉也会弹出错误信息 就算没有这个事件也会弹出错误提示

        //打印原始错误信息

        //ScriptManager1.AsyncPostBackErrorMessage = "error:"+e.Exception.Message;

    }

    protected void Button1_Click(object sender, EventArgs e)

    { 

        //int a = int.Parse("");

        try

        {

            //如果

            int a = int.Parse("");

        }

        catch (Exception ex)

        {

            //添加一个错误信息

            ex.Data["errorone"] = "类型转换错误";

            //发出错误信号

            throw ex;

        }        

    }