ajax

gantt ajax Modul

object ajax;

Example

// vorausgesetzt, die Antwort ist wie folgt
{status: "ok", data: "value", data2: "value2"}
 
 
var xhr = gantt.ajax;
 
// HTTP GET
xhr.get("server.php").then(function(response) {
    var res = JSON.parse(response.responseText); 
    if (res && res.status == "ok") {
        // Antwort ist ok
    }
});
 
// HTTP POST
xhr.post({
    url:"server.php", 
    data: {
       paramName: "paramValue"
    }
}).then(function(response){
    var res = JSON.parse(response.responseText); 
    if (res && res.status == "ok") {
        // Antwort ist ok
    }
});

Details

API Referenz

Alle Methoden können als Parameter entweder:

1) RequestConfig - ein Objekt mit Konfigurationsoptionen für die Anfrage, das wie folgt aussieht:

{
  url: string,
  method: "PUT|GET|POST|DELETE",
  data: string | object,
  async: true|false,
  callback: function,
  headers: object
}

wo:

url - die URL zur Serverseite
method - optional, die Methode, die zum Senden der Anfrage verwendet wird, standardmäßig "GET"
data - optional, die Daten, die an die Serverseite durch die POST-Anfrage gesendet werden. Die POST- und PUT-Methoden akzeptieren sowohl einen String als auch ein Objekt mit Daten
async - optional, der Modus zum Senden von Daten an einen Server, standardmäßig true
callback - optional, eine Funktion, die nach dem Laden der Antwort aufgerufen wird
headers - optional, eine Menge von Headern, definiert als "key":"value" Paare, die mit einer Anfrage gesendet werden sollen

oder:

2) Drei Parameter (außer für die query() Methode, die nur das RequestConfig Objekt annehmen kann):

url - die URL zur Serverseite
data - optional, die Daten, die an die Serverseite durch die POST-Anfrage gesendet werden
callback - optional, eine Funktion, die nach dem Laden der Antwort aufgerufen wird

Die Liste der API des ajax Moduls ist unten angegeben:

Callback-Optionen

Alle Methoden erlauben sowohl Callbacks als auch Promises zur Bearbeitung der Antwort.

Ein ajax Promise gibt ein abgeschlossenes XmlHttpRequest zurück:

gantt.ajax.post({ 
    url:"some.php",
    data: {
       paramName: "paramValue"
    }
}).then(function(response){
    alert(response.responseText);
});

Aus historischen Gründen erhält die Callback-Option den Wert in einem etwas anderen Format:

gantt.ajax.post({ 
    url:"some.php",
    data: {
       paramName: "paramValue"
    },
    callback: function(result){
       var response = result.xmlDoc;
 
       alert(response.responseText);
    }
});

query

die allgemeine Methode zum Senden von Anfragen. Ermöglicht das Senden jeder Art von Anfrage (Sie müssen nur die gewünschte Anfrage in den Parametern angeben)

gantt.ajax.query({ 
    url:"some.php",
    method:"POST",
    data: {
       paramName: "paramValue"
    }
}).then(function(response){
    alert(response.responseText);
});

get

sendet eine GET-Anfrage

gantt.ajax.get("some.php", function(){
    // Ihr Code hier
});
// oder
gantt.ajax.get({
    url: "https://…",
    callback: function() {…},
    headers: { "Content-Type": "application/json" }
});

put

sendet eine PUT-Anfrage

gantt.ajax.put("server.php", "keep_alive=1&version=std", function(){
    // Ihr Code hier
});
// oder
gantt.ajax.put({
   url: "https://…",
   callback: function() {…},
   headers: { "Content-Type": "application/json" },
   data: {}
});

del

sendet eine DELETE-Anfrage

gantt.ajax.del("server.php", function(){
    // Ihr Code hier
});
// oder
gantt.ajax.del({
   url: "https://…",
   callback: function() {…},
   headers: { "Content-Type": "application/json" }
});

post

sendet eine POST-Anfrage

gantt.ajax.post("server.php", "keep_alive=1&version=std", function(){
    // Ihr Code hier
});
// oder
gantt.ajax.post({
      url: "https://…",
      callback: function() {…},
      headers: { "Content-Type": "application/json" },
      data: {}
});

Daten mit POST/PUT-Methoden senden

Sie können anstelle eines Strings ein Objekt mit Daten in die post und put Methoden übergeben. Falls ein Objekt übergeben wird, serialisiert das ajax Modul es selbst. Ein einfaches Objekt wird als Formulardaten (&param=value) serialisiert, verschachtelte Strukturen werden mit Hilfe von JSON.stringify() serialisiert.

Zum Beispiel wird das folgende Objekt:

{
    id: 1,
    text: "Meine Aufgabe",
    users: [1,2,3]
}

in einen String umgewandelt, der wie id=1&text=Meine%20Aufgabe&users=%5B1%2C2%2C3%5D aussieht.

Promises

dhtmlxGantt unterstützt die Verwendung von Promises (einschließlich IE8+). Für die Arbeit mit Promises verwendet Gantt die Bluebird Promise-Bibliothek. Um ein Promise zu erstellen, müssen Sie den folgenden Konstruktor verwenden:

var promise = new gantt.Promise(function(resolve, reject) {...});

Promise wird innerhalb von Gantt deklariert, nicht global für die Anwendung.

Das AJAX-Modul gibt ein Promise zurück, das die Verwendung der Promise-Schnittstelle anstelle des Callbacks ermöglicht. Statt also zu verwenden

gantt.ajax.post(url, params, callback);

können Sie beim Senden einer POST-Anfrage die folgende Schreibweise verwenden:

gantt.ajax.post(url, params).then(function(){…});

Es ist möglich, Callbacks und Promises gleichzeitig zu verwenden.

Das folgende Beispiel zeigt, wie Sie mehrere Anfragen gleichzeitig an den Server senden und danach die Daten neu laden können:

gantt.Promise.all([
    gantt.ajax.post({url: "api/task", data: task1}),
    gantt.ajax.post({url: "api/task", data: task2}),
    gantt.ajax.post({url: "api/task", data: task3})
]).then(function(){
   gantt.clearAll();
   gantt.load("/api");
});

Change log

hinzugefügt in Version 4.0

Zurück nach oben