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.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!