HowTo: AJAX und ASP.NET Webservice (die Sache mit dem GET)

Da ich momentan in einem Projekt nicht das AJAX Framework von Microsoft nutzen soll, sondern mich komplett ohne solch ein Framework auf das AJAX Gebiet stürtzen soll, stieß ich auf ein kleines Problem:

Mit ASP.NET ist es recht einfach Webservices (.asmx) zu erstellen. Mit dem AJAX Framework könnte man jetzt noch das “ScriptService”-Attribut drüber setzen und man könnte es bequem per Javascript abrufen. Da ich das allerdings nicht machen kann und somit alles nativ mit den Komponenten des XmlHttpRequest Objekt mache, ist es etwas anders.

In der ersten Variante werd ich mich auf das Daten schicken per POST beziehen. Die zweite Variante dann per GET.

Schritt 1: Webservice erzeugen

Neuen Webservice (z.B. Welcome.asmx – Datei) anlegen und eine beliebige Methode schreiben. Die Methode kann später per POST, GET, SOAP etc. angesprochen werden. ASP.NET übernimmt sozusagen die Drecksarbeit.

[WebMethod]
public string GetHelloMessage(string name)
{
return “Hallo “+name;
}

2. Schritt: Webservice testen (einfach im Visual Studio z.B. den Debugger starten):

Sobald man dies macht, kommt man zu einer Seite, welche alle Methoden des Webservices aufzeigt – mit einem Klick auf die entsprechende Methode kann man den Webservice so testen (oder die URL Welcome.asmx?op=GetHelloMessage aufrufen)
Jetzt steht da standardmäßig neben der Testmöglichkeit wo man den Parameter eingeben kann noch folgendes:

SOAP 1.1
SOAP 1.2
HTTP POST

Mhhh… Get wird erstmal nicht Angeboten - naja – wird bestimmt auch so gehen (da die meisten Beispiele mit POST funktionieren, werden nur wenige es versucht haben ;) )
Was noch wichtig ist: Die URL zum Aufrufen ist immer ServiceName.asmx/Method oder bei uns “Welcome.asmx/GetHelloMessage”.

Variante 1: Daten per POST
3. Schritt: Erstellung des Javascript (main.js) (Standard XmlHttpRequest Objekt erzeugen etc. – zur Einfachheit, jetzt nur für den IE7 sowie allen anderen modernen Browsern):

var httpRequest;

function makeRequest(url, message)
{
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = getResponse;
httpRequest.open(”™POST”™, url, true);
httpRequest.setRequestHeader(”™Content-Type”™, ”˜application/x-www-form-urlencoded”™);
httpRequest.send(message);
}

function getResponse()
{
if (httpRequest.readyState == 4 && httpRequest.status == 200)
  {
  var responseXml = httpRequest.responseXml;
  alert(httpRequest.responseText);
  }
}

Schritt 4: JS aufrufen (einfache HTML Seite mit einem Button)

<button onclick=”makeRequest(”™Welcome.asmx/GetHelloMessage”™, ”˜name=Robert”™)”>Klick mich!</button>

Der zweite Parameter entspricht den Parametern, welche wir dem Webservice übergeben – “name” steht dabei für den Parameter der Webservice-Methode.

So… so können wir Daten per POST an den Webservice schicken und wieder empfangen, allerdings klappt es mit GET nicht so einfach.

Variante 2: Daten per GET
3. Schritt: Anpassen der Web.config
Egal wie man sich verbiegt – solange man die Web.Config nicht anpasst, nimmt der Webservice keine GET Parameter an.
Dazu muss man diese Zeilen hier in den Abschnitt system.web einfügen:

<webServices>
  <
protocols
>
    <
add name=HttpGet
/>
    <
add name=HttpPost
/>
    <
add name=HttpSoap
/>
  </
protocols
>
</
webServices>

4. Schritt: Erstellung des Javascript (main.js) var httpRequest;

function makeRequest(url, message)
{
var endurl = url + “?” + message;
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = getResponse;

httpRequest.open(”™GET”™, endurl, true);
httpRequest.send(null);
}

function getResponse..// wie oben

Hier wurde jetzt bei “open” GET angeben und die Parameter wurden nicht im “send” mitgeschickt, sondern an die URL dran gehangen.

Das wär es – jetzt kann man entweder per GET oder per POST (oder man baut sich per JS das SOAP XML zusammen) Daten schicken und empfangen. Auch ohne Framework.

Back to the Root halt.

Letzte Posts

  • image.png
    Source Code veröffentlichen – aber bitte mit Lizenz

    Seit es den Blog gibt wird auch meist der gesamte Demo Source Code mit veröffentlicht. Das Ganze hatte ich am Anfang noch als .zip verteilt, später lag es mal auf Google Code und nun liegen alle Samples und sonstige Sachen auf GitHub. Beim letzten User Group Treffen in Zürich mit dem Titel “Open Source: Get […]

  • Fix: Cannot convert from ‘CConnectProxy::_ComMapClass *’ to ‘AddInDesignerObjects::IDTExtensibility2 *’

    Mal einen etwas esoterischer Blogpost, welcher auftaucht wenn man zu viel mit Office Addins rumspielt. Der Fehler passiert beim Bauen von C++ Projekten, welchen diesen Typ benötigen. Lösung (auf 64bit Systemen): C:\Program Files (x86)\Common Files\DESIGNER>regsvr32 MSADDNDR.DLL And Rebuild. Meine lieben Kollegen hatte mir dies schon mehrfach gesagt, allerdings hatte ich es immer wieder vergessen Das […]

  • Gegen das Gesetz verstoßen: X Jahre Haft. Gegen die Terms of Use verstoßen: Bann auf Lebenszeit. Danke Google & co.

    Bei fast allen Diensten die man im Internet nutzen kann muss man den “Terms of use” zustimmen. Völlig logisch dass da natürlich drin steht was erlaubt und was nicht. Wenn man gegen diese Regelungen verstößt hat das Unternehmen natürlich das Recht etwas dagegen zu unternehmen. In der heutigen Welt beherrschen einige wenige Unternehmen die digitale […]

  • image.png
    RSS Feed samt Kommentaranzahl und andere nicht Standard Elemente mit dem SyndicationFeed auslesen

    Jetzt mal ein Blogpost ohne ein fancy NuGet Package: Seit .NET 3.5 gibt es die SyndicationFeed Klasse. Eine schon etwas ältere API, reicht aber aus um Atom bzw. RSS Feeds zu lesen. In diversen RSS Feeds gibt es aber Erweiterungen, welche man natürlich auch auslesen möchte. So gibt WordPress z.B. auch die Anzahl der geposteten […]

  • image.png
    ASP.NET Bundling & Fontawesome

    Vor einer halben Ewigkeit hatte ich mal geschrieben wie man Fontawesome in ASP.NET nutzen kann. Aufgrund des Alters des Post und einem Kommentar ob man denn Fontawesome auch in das ASP.NET Bundling Framework integrieren kann möchte ich nur ein kurzes Update schreiben. TL;DR: NuGet Package “Fontawesome” runterladen und Pfad in der Bundleconfig angeben. Kurze Schritte […]

Support us!