Using sadXMLHttpRequest

Ajax customarily means Asynchronous Javascript and XML - and its increasing use has led to a more widespread appreciation of what can be achieved with a rich internet application. The "asynchronous" and "xml" is often provided by the XMLHttpRequest object provided by a browser or as an ActiveX control, and there are planty of references for building applications with Ajax. Though the "A" and the "X" can be obtained in other technologies used to build web applications, there doesn't seem to yet be an attempt to broaden the term to, say, Awax (Asynchronous Web Applications using XML - or Ajax Without Javascript). Since we're using Curl, not javascript, and since Acax doesn't exacly roll off the tongue, I'll be using Awax from now on to mean an Ajax-like application without javascript.

The curlr package COM.CURLR.PACKAGE provides a basic techology stack that can get you started building Awax applications with Curl. Previously I introduced the XML parser and the XML node classes and showed their use in reading and transforming an XML stream into a searchable hierarchy. In this article I'll examine the classes implementing the XML DOM and a Curl implementation of the XMLHttpRequest functionality and give tutorial on their use.

The reason for my providing this object is to enable some of the familiar and increasingly widespread Ajax programming patterns to be implemented using Curl with vey similar code. So similar, in fact that we can adapt the standard Ajax tutorial that's used to introduce the XMLHttpRequest object with very little change.

sadXMLHttpRequest tutorial

The basic tutorial shows the use of the asynchronous part of Awax, and provides a programming template for using the sadXMLHttpRequest object. Obviously there are many variations that you could implement using Curl -

Step 1: Construct the XMLHttpRequestObject

First you are taught to construct the object. This is trivial in Curl code, and of course is browser-independent:
|| Step 1. Create a sadXMLHttpRequest object let xmlhttp:sadXMLHttpRequest = {new sadXMLHttpRequest}

Step 2: Create Event handler

Next you are told to create an event handler for your page to be called as a result of a user action and which will invoke methods on the XMLHttpREquest object. Curl applets do not usually consist of a single page - though this and other tutorials do - and event handlers can be placed on any Curl GUI object displayed in the graphics hierarchy. for the purpose of this tutorial, we will create a button that will initiate a request for the headers of a page:
|| Step 2. Create an event handler that will issue a request let request-button:CommandButton = {CommandButton label="get headers", {on Action do {xmlhttp.open HttpRequestMethod.head, {url "http://www.curlr.org/"}, async? = true} } }

Step 3: Define state change actions.

The third step is to declare the set of actions to be performed when the state of the XMLHttpRequest object changes. This is the "Asynchronous Javascript" part of Ajax- since we are using Curl, its the asynchronous web application.
|| Step 3. Create a procedure to be called when the state of the sadXMLHttpRequest object changes. || first make a Frame to put the returned headers let display-frame:Frame = {Frame} set xmlhttp.onreadystatechange = || We could also use a static procedure {proc {}:void || use a switch statement on the state {switch xmlhttp.readyState case readyStateEnum.Open do || we could make the send call immediately after the open call, || doing it here shows the handling of the state change {xmlhttp.send} case readyStateEnum.Loaded do {if-non-null hdrs = {xmlhttp.getAllResponseHeaders} then || headers are returned as a string || show them in the frame {display-frame.add replace? = true, {pre {value hdrs}} } } } }

Complete the example with a display consiting of the button and the display frame.

Note that the tutorial uses a common pattern for changing part of the display of an application - the Frame container is placed where the dynamic content is to appear, and the method add is used with the parameter replace?=true.

tutorial app - this runs the tutorial application in a new window - click the button to display the headers -

The curlr implementation of the XMLHttpRequest object mostly follows the W3C spec - the source file details the differences, but they are summarized as follows:

• readyState is defined from the enumeration readyStateEnum.
• onreadystatechange is called when the readyState setter is called - not when a DOM event is raised.
• the check for xml content is made by searching the mime-type for the string "xml"
• uses a look-up table to find the statusText
• raises excpetion sadBadStateException for unexpected readyState
• does not support Http PUT and DELETE, does not support userinfo.

Using XML and sadXMLDom

The pattern we've just seen enables application behavior to be determined by the change in state of the XMLHttpRequest object. The interesting usage starts when the data returned by the request is in the form of XML.

The simple sadXMLDom provides a XML Document Object Model, with a root sadXMLNode through which the elements can be accessed. The sadXMLDom object also has a sadXMLParser object, which operates on thr Url or StringBuf defined as input to one of the factories of sadXMLDom; this can make the code less verbose than using the parser directly. For example, the feed code of the previous article could be written using the sadXMLDom as

When the sadXMLHttpRequest object is used to query an XML source the responseXML accessor prodives the parsed document as a sadXMLDom which can be used by the onreadystatechange handler, e.g.

A Simple Flickr RSS Viewer

With the information we now have about sadXMLHttpRequest and sadXMLDom we can put together an example of a RSS viewer.

We'll build the viewer as a simple Curl Dialog (see code page) to which we can add a Commit action, and which has these three imterfaces

current-feed-url - the Url of the selected feed

display-feed - a method that takes an sadXMLDom to pouplate the display

display-text - method which will display an input string

Using this object we can write code very similar in structure to the tutorial, to create the viewer:

Flickr RSS Viewer - this runs the result in a new window - simply select a feed in the dropdown list, then click on a thumbnail to see a larger version of the picture:

Reference

The methods and properties of sadXMLHttpRequest are summarized in this table