ASP.NET Webservice – jQuery

Der Trend der singlepage-Applications schreitet ganz klar voran. Der erste Schritt dafür ist das neuladen der Seite zu reduzieren und – mithilfe von jQuery – nichts einfacher als das.

GET und POST

Ein Problem von GET-Requests mit Javascript/jQuery ist die Sicherheit, da GET-Requests von überall gemacht werden können. Man spricht dabei über XSS (Cross-site-scripting). Mit POST-Requests hingegen gibt es dieses Problem in dem Form nicht, da nur Abfragen von der selben Domain gemacht werden können, somit sollte im Zweifelsfall immer ein POST verwendet werden.

POST-Request in jQuery:

$.ajax({
    type        : "POST",
    url         : "Webservice.asmx/HelloWorld",
    data        : "",
    contentType : "application/json; charset=utf-8",
    dataType    : "json",
    success     : function(result) {
        // ...
    }
}

[WebMethod()]
public string HelloWorld()
{
    return "Hello world!";
}

Das übliche Hello-World Beispiel zeigt die Rückgabe von einfachen Datentypen, was nur selten der Fall ist.
Interessant wird es mit komplexen Datentypen, wie Objekte oder generische Listen.

[WebMethod()]
public IList<Customer> GetCustomers()
{
    var list = new List<Customer>();
    list.Add(new Customer());
    // ...

    return list;
}

...
success : function(result) {
    $.each(result.d, function(key, customer) {
        $("#container").append("<p>" + customer.name + "</p>");
    });
}

Der umgekehrte Weg, also das übergeben von Daten an den Webservice funktioniert gleich:

var customer = { Name: 'Max' };

$.ajax({
    ...
    url  : "Webservice.asmx/SetCustomer",
    data : '{"customer":' + JSON.stringify(customer) + '}',,
}

Die Klasse Customer muss auf dem Server existieren damit der Webservice die übergebenen Daten deserialisieren kann.

public class Customer
{
    string Name { get; set; }
}

[WebMethod()]
public bool SetCustomer(Customer customer)
{
    // ...
}

Eigentlich ganz einfach, oder?