Ajax in DHTMLX Touch

Problem

How to use Ajax in TOUCH app?

Solution

There are 2 main ways (plus 1 additional) to use Ajax in your app:

  • Simple form.
  • Complex form.
  • Additional form. This way is not so useful as mentioned above, but you can use it as well.

Simple form

The simplest way of Ajax using can be implemented in 5 forms:

  1. dhx.ajax("some.php")
  2. dhx.ajax("some.php", function(){ ... });
  3. dhx.ajax("some.php", function(text, xml, XmlHttpRequest){
       // text - full text of response 
       // xml - response parsed as xml , if applicable
       // XmlHttpRequest - loader object
       //...
    }); 
  4. dhx.ajax("some.php", function(text, xml, XmlHttpRequest){
       // this == master_object
       //...
    }, master_object);
  5. dhx.ajax("some.php",  {
                            error:function(text, xml, XmlHttpRequest){
                              alert("error");
                            },
                            success:function(text, xml, XmlHttpRequest){
                              alert("success");
                            }
    });
    // callback is presented as a combination of 'error' and 'success' functions

Complex form

There are two ways that Ajax can access the server:

  • synchronous (before continuing, script waits for the server back reply).
  • asynchronous (script continues page processing and handles reply as it comes).

async

dhx.ajax().get("some.php");
dhx.ajax().post("some.php");

sync

XmlHttpRequest = dhx.ajax().sync().get("some.php");
XmlHttpRequest = dhx.ajax().sync().post("some.php");

extra params

dhx.ajax().get("some.php","a=1"); //GET: some.php?a=1
dhx.ajax().post("some.php","a=2"); //GET: some.php; POST: a=2;
dhx.ajax().get("some.php",{
  a:1
}); //GET: some.php?a=1
dhx.ajax().post("some.php",{
  a:2
}); //GET: some.php; POST: a=2;

callback

dhx.ajax().get("some.php","", function(text, xml, XmlHttpRequest){
   //..
});
dhx.ajax().post("some.php","", function(text, xml, XmlHttpRequest){
   //..
});

Additional form

This way is not so useful as mentioned above, but you can use it as well.

dhx.ajax.get("some.php", [callback1, callback2]);
dhx.ajax().get("some.php", "", [callback1, callback2]);

Incoming data parsing

If the response from the server is not string, you can use the toObject method. The method returns the response as a string which you can use accordingly:

XML

dhx.ajax.get("some.php", function(text,xml){
  var obj = dhx.DataDriver.xml.toObject(text,xml);
});

JSON

dhx.ajax.get("some.php", function(text,xml){
  var obj = dhx.DataDriver.json.toObject(text,xml);
});

CSV

dhx.ajax.get("some.php", function(text,xml){
  var obj = dhx.DataDriver.csv.toObject(text,xml);
});

HTML

dhx.ajax.get("some.php", function(text,xml){
  var obj = dhx.DataDriver.html.toObject(text,xml);
});

JSArray

dhx.ajax.get("some.php", function(text,xml){
  var obj = dhx.DataDriver.jsarray.toObject(text,xml);
});