HowTo: AJAX

Da ich momentan in einem Projekt die AJAX-Funktionalität auch ohne Framework implementieren muss, hier eine kurze Anleitung dafür:

1. Schritt: HTML Datei erstellen:

<html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
    <title>Meine AJAX Seite \o/</title>
    <script language=”javascript” type=”text/javascript” src=”main.js”>
    </script>
  </head>
<body>
  <button onclick=”makeRequest()”>Klick mich</button>
  <p id=”Debug”></p>
  <p id=”Result”></p>
</body>
</html>

2. Schritt: Javascript Datei “main.js” erstellen

var httpRequest;

function makeRequest()
{
addDebugMessage(‘[MAKE REQUEST]‘);
if (window.XMLHttpRequest) // Mozilla, Safari, Opera, IE7
    {
    addDebugMessage(‘[CREATE XMLHttpRequest OBJECT]‘);
    httpRequest = new XMLHttpRequest();
    }
else if (window.ActiveXObject) // IE6, IE5
    {
    addDebugMessage(‘[CREATE ActiveXObject]‘);
    httpRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
    }

httpRequest.onreadystatechange = getResponse; // Callback Function
httpRequest.open(‘GET’, ‘test.xml’, true);
// Method, url, Async = true / Sync = false
httpRequest.send(”); // Start request
}

function getResponse()
{
addDebugMessage(‘[CALLBACK FUNCTION]‘);
addDebugMessage(‘[httpRequest.readyState ' + httpRequest.readyState + ']‘);
addDebugMessage(‘[httpRequest.status ' + httpRequest.status + ']‘);
if (httpRequest.readyState == 4 && httpRequest.status == 200)
    {
    addDebugMessage(‘[REQUEST COMPLETE]‘);
    addDebugMessage(‘[RESPONSE TEXT: ' + httpRequest.responseText + ']‘);
    var responseXml = httpRequest.responseXml;

    }
}

function addDebugMessage(message)
{
    var textElement = document.createElement(“p”);
    textElement.appendChild(document.createTextNode(message));
    document.getElementById(‘Debug’).appendChild(textElement);
}

3. Schritt: Datenquelle “test.xml” erstellen

<?xml version=”1.0″ encoding=”utf-8″?>
<root>
    <test>Testtest</test>
</root>

Fertig

Getestet ist es mit einem IE7 und Firefox 2 unter Windows Vista. Ich musste allerdings die Webseite im Visual Studio öffnen, da ich ansonsten den Fehler “Zugriff verweifert” bekam.

Letzte Frage: Wie kann ich ASP.NET XML Webservices anbinden ohne das AJAX Framework zu benutzen?

Dazu hab ich dieses HowTo gemacht.

Letzte Posts

  • image_thumb.png
    NuGet Package Restore & Build Server wie z.B. AppVeyor

    NuGet ist ja mittlerweile weit verbreitet, aber eine Frage stellt sich natürlich immer noch: Checkt man die NuGet Packages ein oder nicht? In meinem kleinen Side-Projekt, welches auf GitHub liegt und ich über AppVeyor auch bauen lasse nutze ich das Package Restore Feature von NuGet, d.h. in meinem Repository befindet sich kein NuGet Package mehr, […]

  • image.png
    Microsoft Account Login via ASP.NET Identity

    Der Microsoft Account ist die zentrale Identifikationsstelle in der “Consumer-Microsoft-Welt”, allerdings ist das Einbinden eben dieser in die eigene Applikation eher schwierig. Das “Live SDK” ist nun unter dem OneDrive Dev Center zu finden und ganz professionell wurden auch alle Links zum alten Live SDK damit unbrauchbar gemacht. Beim Microsoft Account ist es auch unmöglich […]

  • image.png
    Zeitgesteuerte Azure WebJobs – so einfach kann Azure sein

    Das noch in Entwicklung befindliche Azure WebJob SDK bietet einige coole Features zum Verarbeiten und Bereitstellen von Daten. Bekanntes Beispiel ist das Sample welches auf eine Azure Queue lauscht und sobald ein Item da vorhanden ist anfängt dies zu verarbeiten. Szenario: Zeitgesteuerte Aktivitäten – ohne Queue und co. Mein Szenario war allerdings wesentlich trivialer: Ich […]

  • image.png
    Get Involved in OSS! Ja, aber wie geht das denn mit GitHub?

    Auch im .NET Lager gibt es Bewegung im OSS Bereich und es gibt verschiedene Arten wie man bei einem Open Source Projekt “Contributed”. Was zählt alles zu “Contribution”? Unter “Contribution” läuft eigentlich alles – ob es Fragen/Probleme zu dem Projekt via Issues ist oder Dokumentation nachreicht oder ob man darüber bloggt oder das Projekt vorstellt. […]

  • HowTo: Web.config samt eigener ConfigSection zur Laufzeit ändern

    In dem HowTo geht es darum wie man die Web.config zur Laufzeit ändert und was es dabei zu beachten gilt. Das ganze klappt auch mit komplexeren ConfigSections. Eigene ConfigSection? Vor einer ganzen Weile habe ich mal über das Erstellen einer eigenen ConfigSection geschrieben – im Grunde nutzen wir jetzt fast dieselbe Config. Zur Laufzeit? Startet […]

Support us!