Простейший 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");
webix.ajax().get("some.php", "action=info&id=123");
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);
Этот запрос посылается в 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, который возвращает промис:
webix.ajax().post("some.php").then(function(data){
// текст ответа
console.log(data.text());
});
Чтобы передать запросу дополнительные параметры, добавьте их отдельной строкой или объектом (как в случае с GET-запросами).
Чтобы отправить PUT-запрос, используйте метод put:
webix.ajax().put("data.php", { id : "11" }).then(function(data){
// текст ответа
console.log(data.text());
});
Чтобы отправить DELETE-запрос, используйте метод del:
webix.ajax().del("data.php", { id : "11" }).then(function(data){
// текст ответа
console.log(data.text());
});
Чтобы отправить PATCH-запрос, используйте метод patch:
webix.ajax().patch("data.php", { id : "11" }).then(function(data){
// текст ответа
console.log(data.text());
});
По умолчанию все запросы выполняются асинхронно и возвращают промис возможных данных. Метод 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():
webix.ajax("some.php").then(function(data){
data = data.text();
});
Чтобы получить JSON-данные, вызовите метод json():
webix.ajax("some.php").then(function(data){
data = data.json();
});
Если сервер возвращает 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-данные
});
Вы можете послать несколько запросов цепочкой, чтобы последовательно обработать их:
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(){
// действия вне зависимости от статуса запроса
}
Если промисов недостаточно, можно передавать коллбэк в качестве третьего параметра методам для асинхронных AJAX-запросов. Это может быт ьфункция или объект с коллбэками в случаях успеха и ошибки.
Коллбэк принимает следующие параметры:
Вот так можно добавить коллбэк в запрос:
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-данных на сервер. Достичь этого можно так:
webix.ajax().headers({
"Content-type":"application/json"
}).post("./data.php", JSON.stringify(payload));