Intermediate

Ajax операции

Отправка данных

Простейший AJAX запрос можно представить как:

webix.ajax("some.php").then(function(data){
    console.log(data.json());
});

Код выше создаёт асинхронный GET-запрос к скрипту "some.php" и выводит полученный данные как только они доступны. Вы также можете послать GET или любой другой запрос явным образом:

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

Webix интегрирован с библиотекой Promiz.js для обеспечения кросс-браузерных асинхронных запросов.

Передача параметров

Вы можете передать дополнительные параметры:

  • включив их в строку запроса:
webix.ajax("some.php?action=info&id=123");
  • отдельной строкой, передав её вторым параметром методу get:
webix.ajax().get("some.php", "action=info&id=123");
  • ииспользуя отдельный JSON-объект. Для GET-запросов параметры будут добавлены в конец строки запроса; для других - будут переданы в тело запроса:
webix.ajax().get("some.php", { action:"info", id:123 });
 
// возможен вложенный JSON-объект
webix.ajax().post("some.php",{ action:"info", id:{ row:123, column:"title" }});

Параметры в виде вложенных объектов автоматически конвертируются в строки методом stringify до того, как отправятся на сервер:

{
    "action":"info",
    "id":"{\"row\":123,\"column\":\"title\"}"
}

Если в параметрах есть объекты Date они отформатируются методом parseFormatStr.

{
    "action":"info",
    "date":"2018-05-27 11:15:00"
}

Если вы хотите переопределить сериализацию данных для Ajax-запросов, рассмторите следующий вариант:

webix.ajax.prototype.stringify = function(obj){ 
    // или используйте свой сериалайзер
    return JSON.stringify(obj);
}

По умолчанию, параметры тела запроса передаются на сервер как FormData. Вы можете обернуть их в FormData самостоятельно, что позволит избежать сериализации по шаблону выше:

var formData = new FormData();
 
formData.append("action", "info");
formData.append("id", "123");
 
webix.ajax().post("some.php", formData);

Типы запросов

Get

Этот запрос посылается в Webix по умолчанию:

webix.ajax("some.php").then(function(data){
    // текст ответа
    console.log(data.text());
});

Или же вы можете создать запрос явно, с помощью метода get:

webix.ajax().get("some.php").then(function(data){
    // текст ответа
    console.log(data.text());
});

Post

Вы также можете отправлять POST запросы с помощью метода post, который возвращает промис:

webix.ajax().post("some.php").then(function(data){
    // текст ответа
    console.log(data.text());
});

Чтобы передать запросу дополнительные параметры, добавьте их отдельной строкой или объектом (как в случае с GET-запросами).

Put

Чтобы отправить PUT-запрос, используйте метод put:

webix.ajax().put("data.php", { id : "11" }).then(function(data){
    // текст ответа
    console.log(data.text());
});

Delete

Чтобы отправить DELETE-запрос, используйте метод del:

webix.ajax().del("data.php", { id : "11" }).then(function(data){
    // текст ответа
    console.log(data.text());
});

Patch

Чтобы отправить PATCH-запрос, используйте метод patch:

webix.ajax().patch("data.php", { id : "11" }).then(function(data){
    // текст ответа
    console.log(data.text());
});

Ружим Sync

По умолчанию все запросы выполняются асинхронно и возвращают промис возможных данных. Метод sync вызывает любой из методов синхронно:

webix.ajax().sync().get("some.php");
webix.ajax().sync().post("some.php");

Такой вариант возвращает вместо промиса объект XMLHttpRequest, что дают возможность запарсить xhr.responseText в компонент данных:

var xhr = webix.ajax().sync().get("data.php");
view.parse(xhr.responseText);

Парсинг входящих данных

Любой асинхронный AJAX-запрос в Webix возвращает промис, который выполняется, как только данные приходят с сервера. Вы можете посмотреть как это реализовано в статье о загрузке данных.

Используя метод then() можно получить данные ответа. Промис возвращает объект data, у которого есть несколько методов для получения ответа с сервера:

  • text() для получения простого текста
  • json() получение обработанных JSON данных
  • xml() и rawxml() получение обработанных XML данных

Простой текст

Чтобы получить текст овтета, вызовите метод text():

webix.ajax("some.php").then(function(data){
    data = data.text();
});

JSON формат

Чтобы получить JSON-данные, вызовите метод json():

webix.ajax("some.php").then(function(data){
    data = data.json();
});

XML формат

Если сервер возвращает XML-данные, вы можете получить их с помощью метода data.xml():

webix.ajax("some.php").then(function(data){
    data = data.xml();
});

При необходимости вы можете получить доступ к rawXML-объекту, используя метод data.rawxml().

Другие форматы

Если данные приходят в другом формате, вы можете получить текст ответа и использовать Webix DataRivers для парсинга данных в компонент. Например, вот так вы можете обработать CSV-данные:

CSV

webix.ajax("some.php").then(function(data){
    var arr = webix.DataDriver.csv.getRecords(data.text());
    for (var i = 0; i < arr.length; i++){
        arr[i] = webix.DataDriver.csv.getDetails(arr[i]);
    }
    $$("pivot").parse(arr);
});

Related sample:  Webix Ajax for CSV

Схожим образом можно обработать JSArray, HTML, и др.

Как получить бинарные данные

Webix Ajax даёт возможность получения объектов бинарных данных с сервера.

Достичь этого можно с помощью метода response(), который позволяет задавать responseType напрямую. В настоящий момент полностью поддерживается только "blob", а также "arraybuffer" с некоторыми ограничениями.

webix.ajax().response("blob").get("patch.zip",function(text,data){
    //data - это blob-данные
});

Эта функциональность не будет работать в IE8-IE9, т.к. эти браузеры не умеют работать с blob-объектами.

Отправка нескольких запросов

Вы можете послать несколько запросов цепочкой, чтобы последовательно обработать их:

webix.ajax("someA.php").then(function(dataA){
    return webix.ajax("someB.php",{ id:dataA.id });
}).then(function(dataB){
    return webix.ajax("someC.php",{ userdata:dataB.user })
}).then(function(dataC){
    $$("grid").parse(dataC.json());
});

Вы также можете отправить их параллельно и обработать результаты вместе с помощью webix.promise.all:

var a = webix.ajax("someA.php");
var b = webix.ajax("someB.php");
var c = webix.ajax("someC.php");
 
webix.promise.all([a,b,c]).then(function(results){
    var a_result = results[0];
    var b_result = results[1];
    var c_result = results[2];
    // какое-л. действие
    // ...
});

Обработка ошибок

Как и в случае с нативными промисами, вы можете задать два обработчика внутри метода then():

var promise = webix.ajax("some.php");
promise.then(function(data){
    /* в случае успеха */
}, function(err){
    /* обработать ошибку */
});

Или с помощью методов fail()/ catch() (Webix алиас для fail()):

var promise = webix.ajax("a.php");
// ...
promise.then(function(data){
    /*успешно*/
});
promise.fail(function(err){
    /*ошибка*/
});

Если вы хотите выполнить какие-либо действия после (не)успешного запроса, используйте метод finally():

promise.finally(){
    // действия вне зависимости от статуса запроса
}

Коллбэк в webix.ajax()

Если промисов недостаточно, можно передавать коллбэк в качестве третьего параметра методам для асинхронных AJAX-запросов. Это может быт ьфункция или объект с коллбэками в случаях успеха и ошибки.

Коллбэк функция

Коллбэк принимает следующие параметры:

  • text - полный текст ответа;
  • data - данные ответа;
  • XmlHttpRequest - объект загрузки.

Вот так можно добавить коллбэк в запрос:

webix.ajax("some.php", function(text, data, XmlHttpRequest){
    data = data.json();
    //..
});

Если вы передаёте параметры в серверный скрипт, коллбэк будет третьим:

webix.ajax().get("some.php", { id:12 }, function(text, data, XmlHttpRequest){
    data = data.json();
    //..
});

Коллбэк объект

Вы можете описать два коллбэк метода: один для успешного ответа и один для ошибки:

webix.ajax("some.php",{
    error:function(text, data, XmlHttpRequest){
        console.log("error");
    },
    success:function(text, data, XmlHttpRequest){
        console.log("success");
    }
});

Дополнительные заголовки

Если серверный код требует дополнительных заголовков, вы можете отправить их следующим образом:

webix.ajax().headers({
    "Sent-by":"My Script" // таким образом можно указать любой пользовательский заголовок  
}).get("./data.php");

Вы можете использовать заголовки в комбинации со всеми Ajax-методами (например, get() и post()).

Отправка JSON

Если вы работаете с каким-либо веб-сервисом, вам может понадобиться отправка JSON-данных на сервер. Достичь этого можно так:

webix.ajax().headers({
    "Content-type":"application/json"
}).post("./data.php", JSON.stringify(payload));
Наверх