Ich habe mir gerade ein kleines Beispiel für den Zugriff auf einen Webservice per JavaScript per AJAX zusammengebaut. Da ich hier einige Informationen aus verschiedenen Quellen zusammengetragen habe, möchte ich das Beispiel hier kurz posten, vielleicht hilft es dem einen oder anderen, einige Informationen gesammelt zu finden.

Hier zunächst der Code für den Webservice:

   1: namespace ValuePlanner_2008.Services

   2: {

   3:     /// <summary>

   4:     /// Summary description for INNProjectExplorerWebService

   5:     /// </summary>

   6:     [WebService(Namespace = "http://tempuri.org/")]

   7:     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

   8:     [GenerateScriptType(typeof(myData))]

   9:     [ToolboxItem(false)]

  10:     [ScriptService]

  11:     public class INNProjectExplorerWebService : System.Web.Services.WebService

  12:     {

  13:         [WebMethod]

  14:         [ScriptMethod]

  15:         public myData HelloWorld(int ID)

  16:         {

  17:             return new myData { ID = ID, Text = "Hello World" + ID.ToString() };

  18:         }

  19:     }

  20:     

  21:     public class myData

  22:     {

  23:         public int ID { get; set; }

  24:         public string Text { get; set; }

  25:     }

  26: }

Kurz zu erwähnen sind hier folgende Details: In Zeile 10 wird über ein entsprechndes Attribut der Webservice für die Zusammenarbeit mit AJAX konfiguriert. Das selbe gilt in Zeile 14 für die Methode, die der Webservicebereitstellt. Da die Methode einen eigenen Datentyp (myData) zurückgibt, wird in Zeile 8 dieser Typ ebenfalls für AJAX veröffentlicht. Man kan so beliebig komplexe Datenstrukturen zwichen JavaScript und dem WebService austauschen, solange diese auf Datentypen basieren, dieJavaScript auch verarbeiten kann (also z.B. keine generischen Listen etc.). Der restliche Code wird automatisch über das Webservice Template erzeugt bzw. sollte keiner weiteren Erklärung bedürfen.

In der ASPX-Seite muss ein Scriptmanager eingebaut werden und der Service darauf registriert werden. Da ich de Scriptmanager in meinem Beispiel in der Master-Page habe, verwende ich einen ScriptmanagerProxy, der es erlaubt, die Registrierungen für einzelne Seiten vorzunehmen und an den Scriptmanager in der Master-Page weiterleitet. Dies ist deshalb notwendig, da auf einer Seite nur ein einziger Scriptmanager vorkommen darf.

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

   2:     <Services>

   3:         <asp:ServiceReference Path="~/Services/INNProjectExplorerWebService.asmx" />

   4:     </Services>

   5: </asp:ScriptManagerProxy>

Noch ein wichtiger Hinweis: Ich hatte zuerst den ToolScriptManager aus dem AJAX Component Toolkit in meiner Masterpage. Dieser scheint nicht mit dem ScriptManagerProxy zusammenzuarbeiten, jedenfalls wurde bei mir die Proxy-Klasse nicht erstellt. Erst als ich einen "normalen" ScriptManager verwendet habe, funktionierte das problemlos.

Auf dem Client wird nun eine Proxy-Klasse erstellt, die die Datentypen und die Methoden des Webservices in JavaScript nachgebildet werden. Darüber lässt sich der WebService sehr einfach aufrufen.

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

   2:     

   3:    function fnCallWebService()

   4:     {

   5:         ValuePlanner_2008.Services.INNProjectExplorerWebService.HelloWorld(5, fnHelloWorlSuccess, fnHelloWorlFailed);

   6:     }

   7:     

   8:     function fnHelloWorlSuccess(results, context, methodName)

   9:     {

  10:         alert(results.Text);

  11:     }

  12:     

  13:     function fnHelloWorlFailed(results, context, methodName)

  14:     {

  15:         alert ("Error calling webservice");

  16:     }

  17: </script> 

in Zeile 5 wird der WebService mit der dem Namespace und dem Namen der Webservice Klasse aufgerufen. Zunächst wird der Parameter der HelloWorld-Methode übergeben. Da der Aufruf asynchron erfolgt kann wird noch eine Methode angegeben angegeb, die im Erfolgsfall aufgerufen wird, optional noch eine Methode, wenn der Aufruf fehlschlägt. In Zeile 10 sieht man schön, dass man in JavaScript nun auch das Datenobjekt des Rückgabewertes in gewohnter Weise zugreifen kann.