使用JavaScript访问通过JSON传递数据的Web服务

      Json是目前较为流行的数据协议，可以很方便的被JavaScript解析，但使用ASP.net开发的Web服务默认的数据序列化方式为XML，为了研究如何使Web服务使用JSON数据格式与客户端进行交互，我进行了下面的尝试。

      我的开发环境为：Visual Studio 2008 + .NET Framework3.5 + IIS7，这里要指出的是使用.net framework2.0也可以进行开发，但是要单独添加一个对System.Web.Extensions程序集的引用，并在Web.config文件中做相应的配置，具体参见下面的介绍。在客户端我通过JavaScript直接访问Web服务，并使用了jQuery-1.2.5脚本库。

      Web服务文件

      对于asmx文件，要为Web服务类添加相应的属性，使其可以将数据按照JSON格式进行序列化和反序列化，这里我们使用System.Web.Script.Services命名空间下的ScriptService修饰Web服务类。这里需要注意一点，处于安全性考虑，Web服务方法默认只支持POST方式的访问，如果希望通过GET方式访问，则需要在相应的方法添加ScriptMethod(UseHttpGet=True)属性进行修饰。代码段如下：

<WebService(Namespace :Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<ScriptService()> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class ServiceClass Service
    Inherits System.Web.Services.WebService


    /**/''' <summary>
    ''' Gets the auto completed terms.
    ''' </summary>
    <WebMethod()> _
    <ScriptMethod(UseHttpGet:=True)> _
    Public Function GetTerms()Function GetTerms(ByVal query As String) As List(Of String)
        Dim listTerms As List(Of String) = New List(Of String)

        For index As Integer = 1 To 10
            listTerms.Add(query + index.ToString())
        Next

        Return listTerms
    End Function

End Class

      Web.config配置文件

      如果使用.NET Framework3.5版本，则不需要修改Web.Config文件（创建项目时已经自动配置好了），如果是采用了.NET Framework2.0版本添加System.Web.Extensions程序集引用的方式，在添加引用后，配置文件需要做如下修改，才能保证服务可以被正确处理。该端代码的含义为：解除对asmx文件的映射，改由ScriptHandlerFactory类处理asmx文件：

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

      页面文件

      页面文件中要引用jQuery-1.2.5版本的脚本库，jQuery是一个体积小但功能强大的客户端JavaScritp脚本库，可以帮助我们完成脚本开发工作。

<script type="text/javascript">
function fnCallSvc(){
    $.ajax({
        url:'Service.asmx/GetTerms',
        type:'POST',
        contentType:'application/json;charset=utf-8',
        success:function(msg){
            $('#myList').html('');
            for(var i=0;i<msg.d.length;i++){
                $('#myList').append('<li>'+msg.d[i]+'</li>');
            }
        },
        dataType:'json',
        data:'{query:"'+$('#editQuery').val()+'"}',
        processData:false
    });
}
</script>

      上面的代码向向我们的Web服务发出了一个POST方式的请求，并传入query参数给GetTerms方法，在上面的代码中有以下几点需要注意：

• contentType要设置为application/json;charset=utf-8，否则不能返回正常的JSON数据
• data是传递给Web服务的参数值，这里不能直接传递JSON对象，而应该传递JSON序列化后的字符串（如代码中所示），因为.NET要对传入的数据进行JSON反序列化，所以如果直接传入JSON会导致反序列化失败
  

      以上是我使用JavaScript访问Web服务的一种尝试。

      参考文档：