ajax

модуль ajax для gantt

объект ajax;

Example

// предполагая, что ответ выглядит следующим образом
{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") {
        // ответ в порядке
    }
});
 
// HTTP POST
xhr.post({
    url:"server.php", 
    data: {
       paramName: "paramValue"
    }
}).then(function(response){
    var res = JSON.parse(response.responseText); 
    if (res && res.status == "ok") {
        // ответ в порядке
    }
});

Details

Справочник API

Все методы могут принимать в качестве параметров либо:

1) RequestConfig - объект с параметрами конфигурации запроса, который выглядит следующим образом:

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

где:

url - URL на серверную часть
method - необязательный, метод, используемый для отправки запроса, "GET" по умолчанию
data - необязательный, данные, отправляемые на сервер методом POST. Методы POST и PUT принимают как строку, так и объект с данными
async - необязательный, режим отправки данных на сервер, true по умолчанию
callback - необязательный, функция, которая будет вызвана после загрузки ответа
headers - необязательный, набор заголовков, определённых в виде пар "ключ":"значение", которые должны быть отправлены с запросом

или:

2) Три параметра (кроме метода query(), который может принимать только объект RequestConfig):

url - URL на серверную часть
data - необязательный, данные, отправляемые на сервер методом POST
callback - необязательный, функция, которая будет вызвана после загрузки ответа

Список API модуля ajax приведён ниже:

Опции обратного вызова

Все методы допускают как обратные вызовы, так и промисы для обработки ответа.

Промис ajax возвращает завершенный XmlHttpRequest:

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

По историческим причинам, опция обратного вызова получает значение в несколько ином формате:

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

query

общий метод отправки запросов. Позволяет отправлять любой тип запроса (необходимо просто указать желаемый запрос в параметрах)

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

get

отправляет GET запрос

gantt.ajax.get("some.php", function(){
    // ваш код здесь
});
// или
gantt.ajax.get({
    url: "https://…",
    callback: function() {…},
    headers: { "Content-Type": "application/json" }
});

put

отправляет PUT запрос

gantt.ajax.put("server.php", "keep_alive=1&version=std", function(){
    // ваш код здесь
});
// или
gantt.ajax.put({
   url: "https://…",
   callback: function() {…},
   headers: { "Content-Type": "application/json" },
   data: {}
});

del

отправляет DELETE запрос

gantt.ajax.del("server.php", function(){
    // ваш код здесь
});
// или
gantt.ajax.del({
   url: "https://…",
   callback: function() {…},
   headers: { "Content-Type": "application/json" }
});

post

отправляет POST запрос

gantt.ajax.post("server.php", "keep_alive=1&version=std", function(){
    // ваш код здесь
});
// или
gantt.ajax.post({
      url: "https://…",
      callback: function() {…},
      headers: { "Content-Type": "application/json" },
      data: {}
});

Отправка данных с помощью методов POST/PUT

Вы можете передать объект с данными вместо строки в методы post и put. В случае передачи объекта, модуль ajax сериализует его самостоятельно. Простой объект будет сериализован как данные формы (&param=value), вложенные структуры будут сериализованы с помощью JSON.stringify().

Например, следующий объект:

{
    id: 1,
    text: "My Task",
    users: [1,2,3]
}

будет преобразован в строку, которая выглядит как id=1&text=My%20Task&users=%5B1%2C2%2C3%5D.

Промисы

dhtmlxGantt поддерживает использование промисов (включая IE8+). Для работы с промисами Gantt использует библиотеку промисов Bluebird. Чтобы создать промис, необходимо использовать следующий конструктор:

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

Промис объявляется внутри Gantt, а не глобально для приложения.

Модуль AJAX возвращает промис, что позволяет использовать интерфейс промисов вместо обратного вызова. Таким образом, вместо использования

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

Например, при отправке POST запроса вы можете использовать следующую запись:

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

Возможно использовать обратные вызовы и промисы одновременно.

Пример ниже показывает, как вы можете отправить несколько запросов на сервер одновременно и перезагрузить данные после этого:

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

добавлено в версии 4.0

К началу