Using AJAX

This tutorial gives examples of how to use Haxe to produce JavaScript for use with AJAX-based websites. AJAX, which stands for Asynchronous JavaScript and XML, is a way to refresh parts of a web page without reloading the whole page.

DOM Access

A web browser's internal representation of a web page's HTML is called a DOM (Document Object Model) and is easily accessed and modified using Haxe. For example:

class Test {

    // change the HTML content of a DIV based on its ID
    static function setContent(id,content) {
        var d = js.Lib.document.getElementById(id);
        if( d == null )
            js.Lib.alert("Unknown element : "+id);
        d.innerHTML = content;
    }

    // create a JavaScript HTML link
    static function makeLink(title,code) {
        return '<a href="javascript:'+code+'">'+title+'</a>';
    }

    // function called when the user click on the link
    static function click() {
        setContent("main","Congratulations !");
    }

    static function main() {
        // set initial content
        setContent("main",makeLink("click here","Test.click()"));
    }
}

To compile this example, use the following HXML file :

-main Test
-js test.js

optional:
--js-namespace a_namespace

Once compiled, this will produce a test.js file that can be included as part of your index.html file, as the following example shows:

<html>
<head><title>Haxe AJAX</title></head>
<body>

<div id="haxe:trace"></div>

<div id="main"></div>

<script type="text/javascript" src="test.js"></script>

</body>
</html>

If you open this HTML in a web browser, you will see a link. Clicking on the link will call Test.click(), which will change the content of the HTML div.

Loading Data

Aside from manipulating the content that already exists in a web page, Haxe can also load new content from an external server. The following modification to the above example will load the data.xml file when the link is clicked:

static function click() {
    setContent("main",haxe.Http.requestUrl("data.xml"));
}

To use this code, recompile the HXML file.

In this example, the data.xml file is loaded into the main div. For the sake of concreteness this example loads a static file, though dynamically generated HTTP responses can be loaded in the same way. (See below for information on how to add URL parameters.) To follow this example, create a data.xml file in the same directory as your HTML file :

<em>Hello World</em>

Running this example using the local file system will not work because, for security reasons, browsers don't allow JavaScript to read local files. Therefore, this example needs to be run from a web server. Fortunately, Haxe comes with a small web server for development purposes. From the Haxe install directory run:

haxeserver.bat
(on windows), or:

nekotools server
(from the command line on other platforms).

Point a browser to the URL http://localhost:2000/server:config and change the base directory to the one you have put the index.html into.

Now, if you visit http://localhost:2000/index.html, and click on the link, you should see Hello World being displayed. This is the content of the data.xml which was loaded into your div.

Asynchronous

Notice that the haxe.Http.request call is synchronous, which means that during the time the request is made and the response is received, the web application will not respond to user input. This can be useful sometimes, but in general anychronous behavior is preferable.

To convert the above example from synchronous to asynchronous, modify the click method with the following code :

static function click() {
    var r = new haxe.Http("data.xml");
    r.onError = js.Lib.alert;
    r.onData = function(r) { setContent("main",r); }
    r.request(false);
}

Here's what's happening:

  • We create a new HTTP request for the data.xml URL.
  • We set the error handler to display a message if an error occurs.
  • Once data is received, we will set the content of the div.
  • We execute the request using the GET method (true for POST).

To add parameters to the URL, we could have called r.setParameter("param","value").

Compile the example one more time by running the HXML file and browse the local web server to display the content. You can change the content of the data.xml and click again on the link to see the changes. If you change the request URL or if you remove the data.xml file, clicking on the link will display an error.

version #9560, modified 2011-01-24 18:26:30 by jhl