Richiamare un Web Service da una pagina Html

Un Web Service .asmx può essere richiamato anche da una pagina Html, usando JavaScript/JQuery.
In questo modo il lavoro di inclusione viene svolto dal codice client della pagina, che è indipente dal linguaggio lato server - php o aspnet che sia.

I Web Service per default trasmettono i dati in formato Soap/Xml, ma quando sappiamo che il WS sarà richiamato da codice Javascript (Ajax/JQuery) è meglio restituire dati sotto forma di JSon. Questo perché JSon rispetto a Xml è più compatto e più facilmente manipolabile da JavaScript.

Creare un Web Service e restituire dati in formato JSon

Il codice sottostante dimostra come creare un Web Service .asmx in VBNet in modo che possa essere richiamato tramite script client e che passi i dati in JSon.

Nello specifico, questa riga consente al WS di essere richiamato da Script:

<System.Web.Script.Services.ScriptService()> _

Per restituire dati sotto forma di JSon è necessario usare l'oggetto JavaScriptSerializer dopo aver importato i namespace opportuni.

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Web.Script.Services
Imports System.Web.Script.Serialization

<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://www.dev-oclock.com")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class WebService_Test
    Inherits System.Web.Services.WebService

    <WebMethod()>
    <ScriptMethod(ResponseFormat:=ResponseFormat.Json, UseHttpGet:=False, XmlSerializeString:=False)>
    Public Function GoodByeCruelWorld(ByVal Name As String) As String
        Dim js As JavaScriptSerializer = New JavaScriptSerializer()
        Return js.Serialize("Welcome " & Name)
    End Function

    <WebMethod()>
    <ScriptMethod(ResponseFormat:=ResponseFormat.Json, UseHttpGet:=False, XmlSerializeString:=False)>
    Public Function Names(ByVal a As String) As String
        Dim nomi()() As String = New String(2)() {}
        nomi(0) = New String() {"Windows", "IIS", "AspNet"}
        nomi(1) = New String() {"Linux", "Apache", "PHP"}
        nomi(2) = New String() {"Xml", "Soap", "JSon"}
        Dim js As JavaScriptSerializer = New JavaScriptSerializer()
        Dim strJSon As String = js.Serialize(nomi)
        Return strJSon
    End Function
End Class

La funzione GoodByeCruelWorld, variante ironica di HelloWorld, restituisce una semplice stringa.
La funzione Names invece restituisce un Jagged Array (array contenente altri array). In questo esempio i dati sono hard-coded, ma potrebbero essere letti da un database.

Consumare un Web Service usando JQuery

Di seguito è riportato il codice html e JavaScript/JQuery per usare il Web Service creato in precedenza. A prima vista può sembrare un po' complesso, ma osservandolo meglio appare autoesplicativo.
Questi sono i tre passaggi più significativi:

  • Si dichiara una richiesta di tipo POST in formato application/json.
  • I dati ottenuti si elaborano con la funzione eval() per convertire i dati da JSon a JavaScript.
  • Tramite JQuery si stampano i dati a video inserendoli nel html interno di uno span o di un div.

Creare una pagina .html (o .asp, .php ecc) vuota e incollare questo codice:

<!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>
    <title>Web Service - AspNet - asmx - JSon - Xml</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.js" type="text/javascript"></script> 
    <script type="text/javascript">

        //Richiamo funzione GoodByeCruelWorld
        $(document).ready(function () {
            $("#btnHelloJS").bind("click", function () {
                $.ajax({
                    type: "POST",
                    url: "WebService_test.asmx/GoodByeCruelWorld",
                    data: '{ Name: "' + $("#txtTitle1").val() + '" }',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",

                    success: function (msg) {
                        var content = eval(msg.d);

                        //document.getElementById("Label1").innerHTML = content;
                        $('span.Label1').html(content);
                    
                    }, //success
                    error: function (msg, error, errorThrown) {
                        alert(error + ":\r\n" + msg.responseText + ":\r\n" + errorThrown);
                    }
                });

            });

            // Richiamo funzione Names
            $("#btnNomi").bind("click", function () {
                $("#query_results").empty();
                $("#query_results").append('<table id="ResultsTable" border="1"><tr><th>Uno</th><th>Due</th><th>Tre</th></tr>');
                $.ajax({
                    type: "POST",
                    url: "WebService_test.asmx/Names",
                    data: '{ a: "' + $("#txtTitle2").val() + '" }',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",

                    success: function (msg) {
                        //alert(msg.d);
                        var c = eval(msg.d);
                        for (var i in c) {
                            $("#ResultsTable tr:last").after("<tr><td>" + c[i][0] + "</td><td>" + c[i][1] + "</td><td>" + c[i][2] + "</td></tr>");
                        }
                        $("#ResultsTable tr:last").after("</table>");
                    }, //success
                    error: function (msg, error, errorThrown) {
                        alert(error + ":\r\n" + msg.responseText + ":\r\n" + errorThrown);
                    }
                });

            });            
        });
    </script>
</head>
<body>
    <form id="form1">
    <div>
        <p>
            <input id="txtTitle1" type="text" />
            <input id="btnHelloJS" type="button" value="Hello JS" />
            <span id="Label1" class="Label1"></span>
        </p>
        <p>
            <input id="btnNomi" type="button" value="Nomi" />
        </p>
        <div id="query_results"></div>
    </div>
    </form>
</body>
</html>

Questo è il risultato finale:

Il messaggio di benvenuto è stato inserito dentro il marcatore Label1, e il Jagged Array è stato convertito in una tabella e inserito dentro il div chiamato query_results.

Autore: Sergio Roberto Boarina