Ajax를 사용하는 웹 애플리케이션 작성은 일반적으로
XmlHttpRequest(XHR) 오브젝트를 작성하여 수행되며, 이 오브젝트는 주어진 URL로 HTTP 요청을 하여 요청 헤더와 본문을 전달하고, 응답이 성공적인 응답 본문이나 HTTP 실패 응답으로 리턴될 때 수행되어야 하는 조치를 정의하는 콜백 함수를 정의한다. 크로스 브라우저 XHR을 구현하는 과정은 아무래도 힘들 수밖에 없지만, 다행히도 Dojo를 이용하여 GET, POST, PUT 및 DELETE 요청을 가능하게 하는 일련의 dojo.xhr* 함수를 사용하면 이러한 힘든 작업을 상당히 완화할 수 있다.
제공되는 네 가지 함수는 다음과 같다.
xhrGetxhrPostxhrPutxhrDelete
이러한 함수는 모두 동일한 구문을 따르며, 단일 특성 구성 오브젝트를 인수로 받는다. 이 오브젝트에서 작성하고자 하는 Ajax 요청의 다양한 특성을 정의할 수 있다. 또한, 이러한 옵션은 모든 XHR 함수에서 동일하다.
XHR 함수에서 사용 가능한 더 유용한 구성 옵션 중 일부는 다음과 같다.url- 이 옵션은 HTTP 요청이 작성되어야 하는 URL이다. 이 URL은 요청을 작성 중인 페이지와 같은 도메인과 포트의 조합으로 되어 있어야 한다.
handleAs- 응답 처리 유형을 정의할 수 있게 한다. 기본값은
text이지만,json,javascript,xml및 기타 두 가지 옵션이 사용 가능하다. 나중에 이 섹션에서는 JSON 응답 형식을 처리하는 콜백 함수를 사용하여 Ajax 요청을 작성하는 예제를 살펴볼 것이다. form<form>요소의 문자열 ID 표현이나 참조이다. 양식에 있는 각 필드의 값은 요청과 함께 요청 본문으로서 전송된다.content- 요청 본문에 있는 자원에 전달할 매개변수를 포함하고 있는 오브젝트이다. 이 오브젝트는
form특성에서 가져온 값과 혼합된다(이 두 값이 모두 제공되는 경우).
XHR 함수 예제는 목록 22에 표시되어 있다.목록 22. XHR 함수 호출 예제
dojo.xhrGet({
url: "save_data.php",
content: {
id: "100",
first_name: "Joe",
last_name: "Lennon"
}
});
|
이 예제에서는 문서 자체와 같은 위치에 있는 save_data.php 파일에 비동기적으로 HTTP
GET 요청을 한다. 또한, 컨텐츠 오브젝트의 특성을 매개변수로서 PHP 스크립트에 전달한다. PHP에서는 $_GET 변수를 사용하여 이러한 값을 검색한 후, 이 값을 데이터베이스에 저장한다.
이전 예제에서는
dojo.xhrGet을 사용하여 Ajax 요청을 호출하는 방법을 배웠다. 이 예제는 실제로 요청을 작성하기에 충분하지만, 이 예제에는 처리 및 응답 기능이 없다. 또한, 콜백 함수가 구성 오브젝트로 전달된다. 사용 가능한 옵션은 다음과 같다.load- 이 함수는 Ajax 요청이 성공적인 응답 메시지를 리턴할 때 실행된다. 응답 데이터와 요청 오브젝트는 매개변수로 이 함수에 전달된다.
error- 이 함수는 Ajax 요청에 문제가 발생할 때 실행된다. 이러한 현상은 Ajax 요청에 지정되어 있는 URL이 올바르지 않은 경우, 요청 제한시간이 초과한 경우 또는 기타 HTTP 오류가 생기는 경우에 발생한다. 오류 메시지와 요청 오브젝트는 인수로서 전달된다.
handle- 이 함수를 이용하면 로드 및 오류 콜백 함수를 하나의 함수로 결합할 수 있으며, 요청이 성공하든지 오류가 발생하든지 사실상 신경 쓰지 않는 경우에는 이렇게 하는 것이 유용하다.
다음 예제에서는 JSON 파일에서 데이터를 일부 로드하여 해당 페이지에 표시하는 로드 콜백 함수가 있는 Ajax 호출을 작성한다.
더 현실적인 예제를 작성하여
dojo.xhr* 함수를 충분히 테스트해보자. 우선 파일을 새로 작성한 후, 이 파일을 listing1.html과 같은 디렉토리에 삽입한 다음 이 파일에 JSON 데이터를 일부 추가한다. 이 파일의 컨텐츠는 목록 23에 표시되어 있다.목록 23. data.json — Ajax 요청으로 처리할 JSON 데이터
{
count: 4,
people: [
{
first_name: "Joe",
last_name: "Lennon",
age: 25
},{
first_name: "Darragh",
last_name: "Duffy",
age: 33
},{
first_name: "Jonathan",
last_name: "Reardon",
age: 30
},{
first_name: "Finian",
last_name: "O'Connor",
age: 23
}
]
}
|
이제 Firebug에서 Ajax 요청을 작성하고, Dojo가 로드되도록 Firefox에서 listing1.html 페이지가 로드되었는지 확인한다. 이 요청은
load 콜백 함수를 사용하여 JSON 응답을 처리하고 테이블을 페이지에 표시한다(목록 24 참조).목록 24. Ajax를 사용하여 JSON 데이터를 로드하고 처리
dojo.xhrGet({
url: "data.json",
handleAs: "json",
load: function(data) {
var table = "<table border=\"1\">";
table += "<tr><th>Name</th><th>Age</th>
</tr>";
dojo.forEach(data.people, function(person) {
table += "<tr><td>";
table += person.first_name+" "+person.last_name;
table += "</td><td>";
table += person.age;
table += "</td></tr>";
});
table += "</table>";
dojo.place(table, dojo.body());
}
});
|
Firebug에서 목록 24에 있는 코드를 시도한다. JSON 파일에서 로드한 데이터와 함께 테이블이 페이지에 동적으로 추가된다. 이 과정은 그림 5에 표시되어 있다.
chrome browser에서는 firefox에서처럼 data.json 처럼 파일로 받는건 안된다..
chrome browser에서는 firefox에서처럼 data.json 처럼 파일로 받는건 안된다..
그림 5. Ajax로 JSON 데이터를 로드한 테이블
실제로는 PHP, Python, ASP, .NET 또는 Java와 같은 서버측 언어를 사용하여, Ajax 요청을 통해 전달되는 매개변수를 기반으로 JSON 데이터를 동적으로 생성한다.
