Using AJAX
This tutorial will introduce you some sample on how to use haXe to program AJAX website. AJAX stands for "Asynchronous Javascript and XML". It's a way to asynchronously refresh parts of your website without reloading the whole page.
DOM Access
You can easily access and modify the HTML page of your website by using Browser DOM. Here's a quick sample that does that :
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, uses the following HXML file :
-main Test -js test.js
Once compiled, this will produce a test.js file that can be included as part of your index.html file, such 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, you should be able to see a link. Clicking on the link will call Test.click() that will change the content of the HTML div.
Loading Data
Now, let's try to load some website URL when the user click the link. Modify the click method with the following code :
static function click() { setContent("main",haxe.Http.request("data.xml")); }
Now recompiles by running the HXML one more time.
In that case, we are loading the file data.xml into the div main. The fact that data.xml is a static file is not important here, it should be a complete URL with parameters as well. We will just try now with a static file for the sake of simplicity.
Let's create a data.xml in the same directory as your HTML file :
<em>Hello World !</em>
Runnning this example using the local filesystem will not work. For security reasons, browsers don't allow javascript to read the local files. You have then to run this example from a web server.
Fortunately, haXe comes with a small web server for development purposes. Go inside the haXe install directory and either run haxeserver.bat on windows or nekotools server from the commandline on other platforms. You can now browse 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
We are almost done with this tutorial. One last thing is that the haxe.Http.request call is synchronous. It means that during the time the URL is requested and the content downloaded, your application will stop responding. This can be useful sometimes, but in general you would prefer an anychronous behavior.
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); }
Let's detail what we are doing there :
- we create a new http request on the url
data.xml. - we set the error handler to display a message if an error occur.
- when receiving data, we will set the content of the
div. - we execute the request in
GETmode (trueforPOST).
Note : if we wanted to add parameters to the URL, we could have called r.setParameter("param","value").
Compile the sample one more time by running the HXML file and browse the local web server to display the content. This should work as expected. 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.