gantt ajax 모듈
// 응답이 다음과 같이 생겼다고 가정
{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") {
// 응답이 정상임
}
});
모든 메서드는 두 가지 방식 중 하나로 매개변수를 받습니다:
1) RequestConfig - 요청 구성을 위한 옵션 객체로, 다음과 같은 구조입니다:
{
url: string,
method: "PUT|GET|POST|DELETE",
data: string | object,
async: true|false,
callback: function,
headers: object
}
각 항목의 의미는:
또는:
2) 세 개의 매개변수 (단, query() 메서드는 RequestConfig 객체만 받음):
아래는 ajax 모듈 API에서 사용 가능한 메서드 목록입니다:
모든 메서드는 콜백과 프로미스를 모두 지원하여 응답을 처리할 수 있습니다.
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);
}
});
요청을 보내는 일반 메서드입니다. 파라미터에서 어떤 HTTP 메서드든 지정할 수 있습니다.
gantt.ajax.query({
url:"some.php",
method:"POST",
data: {
paramName: "paramValue"
}
}).then(function(response){
alert(response.responseText);
});
GET 요청을 보냅니다.
gantt.ajax.get("some.php", function(){
// 여기에 코드 작성
});
// 또는
gantt.ajax.get({
url: "https://…",
callback: function() {…},
headers: { "Content-Type": "application/json" }
});
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: {}
});
DELETE 요청을 보냅니다.
gantt.ajax.del("server.php", function(){
// 여기에 코드 작성
});
// 또는
gantt.ajax.del({
url: "https://…",
callback: function() {…},
headers: { "Content-Type": "application/json" }
});
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 메서드의 data로 전달할 수 있습니다. 객체가 전달되면 ajax 모듈이 자동으로 직렬화를 처리합니다. 단순 객체는 폼 데이터(¶m=value) 형태로 직렬화되고, 중첩 구조는 JSON.stringify()를 사용해 직렬화됩니다.
예를 들어, 아래 객체는:
{
id: 1,
text: "My Task",
users: [1,2,3]
}
id=1&text=My%20Task&users=%5B1%2C2%2C3%5D
와 같은 문자열로 변환됩니다.
dhtmlxGantt는 IE8 이상을 포함한 프로미스를 지원합니다. 내부적으로 Bluebird 프로미스 라이브러리를 사용합니다. 프로미스를 생성하려면 다음 생성자를 사용하세요:
var promise = new gantt.Promise(function(resolve, reject) {...});
Promise 객체는 Gantt 내부에 정의되어 있으며 전역 객체가 아닙니다.
AJAX 모듈은 프로미스를 반환하므로 콜백 대신 프로미스 문법을 사용할 수 있습니다. 예를 들어, 다음과 같이:
gantt.ajax.post(url, params, callback);
다음과 같이 쓸 수 있습니다:
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");
});
버전 4.0에 추가됨
Back to top