使用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服務的一種嘗試。

      參考文檔：