jQuery ajax() 이용하기
jQuery.ajax()는 비동기 HTTP 통신을 위한 함수 입니다. 이 함수를 이용해 비동기로 그리드뷰(GridView) 또는 트리뷰(TreeView)에 원격의 데이터를 가져올 수 있습니다.
jQuery.ajax()는 비동기 HTTP 통신을 위한 함수 입니다. 이 함수를 이용해 비동기로 그리드뷰(GridView) 또는 트리뷰(TreeView)에 원격의 데이터를 가져올 수 있습니다.
(Only JS Support)
jQuery.ajax()함수를 이용해 원격 데이터를 가져오는 코드를 작성해 보겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 원격 데이터를 다운로드 하는 동안 프로그래스바를 표시합니다.
treeView.showProgress();
// jQuery ajax() 함수 호출
$.ajax({
type: "GET",
url: "https://" + location.host + "/resource/data/treedata3.json?__time__=" + new Date().getTime(),
dataType: "text",
success: function (data) {
// 원격 데이터를 비동기로 가져온 경우 호출 되는 콜백
treeDataProvider.fillJsonData(data, { rows: "rows", icon: "icon" });
treeView.setFocus();
},
error: function (xhr, status, error) {
// 원격 데이터를 비동기로 가져오는 동안 오류가 발생하면 호출 되는 콜백
alert(error);
},
complete: function (data) {
// ajax()함수 호출이 완료되면 호출 되는 콜백
treeView.closeProgress();
},
xhr: function () {
var xhr = new window.XMLHttpRequest();
// xhr 요청 정보를 이용해 progress 이벤트 리스너 등록
xhr.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
treeView.setProgress(0, evt.total, evt.loaded);
}
}, false);
return xhr;
}
});
RealGrid의 기반 클래스인 GridBase의 showProgress()함수를 사용하면 원격에서 데이터를 가져오는 동안 프로그래스바(Progress Bar)를 보여줄 수 있습니다.
위 버튼을 클릭하면 원격 데이터를 가져오는 동안 프로그래스바(Progress Bar)가 표시 되는데, 이 프로그래스바(Progress Bar)는 그리드나 트리에 데이터가 입력되는 진행상태가 아니라 원격에 있는 데이터를 비동기로 가져오는 동안 네트워크 진행상태를 의미 합니다.
자세한 내용은 jQuery.ajax()함수 페이지를 참조하세요.