Monday, September 7, 2009

Consuming WebServices, WCF Services and static Page methods from JavaScript (sans MS AJAX)


The Microsoft ASP.NET AJAX platform, known previously as ATLAS and ASP.NET 2.0 AJAX Extensions and fully rolled into ASP.NET 3.5, offers rich functionality but in certain scenarios the the required .ASPX client page and ScriptManager control coupled with the Microsoft Ajax library may conflict with existing requirements or present unnecessary overhead.
This document will illustrate that it is possible to leverage the full power of the ASP.NET platform from client script with just a few lines of javascript code on an HTML page.
  1. This document will not attempt to illustrate a robust implementation of an AJAX client, only the barest minimum protocol, configuration and script for accessing ASP.NET endpoints from 'raw' JavaScript code.  The implementation details documented herein can be applied to any JavaScript framework, such as jQuery, that has an AJAX implementation.   Also, the author is currently developing a lightweight robust client script AJAX library that includes support for ASP.NET endpoints, including FormsAuthentication, to be introduced at a later date.
  2. This document will not attempt to address the very relevant issue of handling session state and Authentication/Authorization from client script, only the mechanics of consuming the endpoints via XMLHttpRequest.  These slightly more complicated issues will be addressed in a later document.

Asynchronous JavaScript And XML - AJAX

The simplest implementation of 'AJAX' involves instantiating an XMLHttpRequest object, overriding it's onreadystatechanged event to parse the response and then calling the send method.
Listing 1:

function createXHR()
    var xhr;

    if (window.XMLHttpRequest)
        // if browser is not IE or is IE >= 7 XMLHttpRequest
        // will be exposed in the window namespace
        xhr = new XMLHttpRequest();
    else if (window.ActiveXObject)
        // if IE < 7 create via ActiveX
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
        throw new Error("Could not create XMLHttpRequest object.");
    return xhr;

var xhr = createXHR();"GET", "some web resource", true);

xhr.onreadystatechange = function()
    if (xhr.readyState === 4)
        // xhr.responseText will always contain the
        // response content
        var responseText = xhr.responseText;

        // if the resource content-type is of an xml flavor
        // xhr.responseXML will contain a valid XML DOMDocument
        var responseXML = xhr.responseXML;
        // do something with response....



 AJAX and XML WebServices

Consuming an XML WebService from client script is not much more involved than the basic implementation of AJAX and has been possible since 2.0 without the necessity of AJAX Extensions.

See full detail:

No comments: