아약스
JavaScript 프레임워크를 사용하는 가장 강력한 이유는 브라우저 전반에 걸쳐 Ajax 요청을 표준화하기 위해서입니다. Ajax 요청은 서버 측 스크립트에 요청을 보낸 다음 XML, JSON, HTML 또는 일반 텍스트 형식의 데이터와 같은 응답 결과를 얻는 비동기 HTTP 요청입니다. 대부분의 JavaScript 프레임워크에는 일련의 옵션을 매개변수로 허용하는 Ajax 요청 객체 형식이 있습니다. 이러한 옵션에는 웹 서버에서 응답이 수신될 때 호출되는 콜백 함수가 포함되어 있습니다. ExtJS, MooTools 및 Prototype에 대한 Ajax 요청은 다음과 같습니다.
목록 11: ExtJS 라이브러리의 Ajax 요청
Ext.Ajax.request({
URL: 'server_script.php',
매개변수: {
이름1: '값1',
이름2: '값2'
},
메소드: 'POST',
성공: 함수(운송) {
경고(transport.responseText);
}
});
ExtJS는 url, params, 메소드 및 성공 처리 기능과 같은 필드를 포함하는 매개변수를 허용합니다. url 필드에는 Ajax 요청에 의해 호출되는 서버 측 스크립트의 주소가 포함됩니다. Params 자체는 서버에 전달되는 키/값 쌍으로 구성된 개체입니다. 메소드 필드에는 GET 또는 POST라는 두 가지 선택적 값이 있으며 기본값은 post 메소드입니다. 마지막 필드는 성공이며, 서버가 성공적인 응답을 받은 후에 호출됩니다. 이 예에서는 서버가 일반 텍스트를 반환하고 이 텍스트가 Alert() 메서드를 통해 사용자에게 표시된다고 가정합니다.
다음으로 MooTools에서 Ajax 요청을 더 자세히 살펴보겠습니다.
목록 12: MooTools의 Ajax 요청
새로운 요청({
URL: '서버-스크립트.php',
데이터: {
이름1: '값1',
이름2: '값2'
},
방법: '게시',
onComplete: 함수(응답) {
경고(응답);
}
}).보내다();
보시다시피 MooTools는 ExtJS와 매우 유사합니다. 변수는 데이터 필드를 통해 전달되며 메소드 필드는 소문자여야 합니다. 또한 MooTools는 성공 핸들러 함수와 달리 onComplete 함수를 사용합니다. 마지막으로 ExtJS와 달리 MooTools는 실제로 Request send() 함수를 사용하여 요청을 보냅니다.
마지막으로 Prototype 간의 명백한 차이점을 살펴보겠습니다.
목록 13: 프로토타입의 Ajax 요청
new Ajax.Request('서버-스크립트.php', {
매개변수: {
이름1: '값1',
이름2: '값2'
},
방법: '게시',
onSuccess: 함수(전송) {
경고(transport.responseText);
}
});
Prototype은 동일한 방식으로 작동하지만 약간의 구문 차이가 있습니다. 우선, 프로토타입 Request 객체는 생성자에 전달될 두 개의 매개변수를 허용합니다. 첫 번째 매개변수는 이전 두 예제에서 본 것처럼 요청을 보낼 URL이고, 두 번째 매개변수는 각 Ajax 요청에 대한 옵션을 포함하는 객체입니다. 물론 UR1은 별도의 매개변수로 전달되며 옵션 목록에는 없습니다. 또한 MooTools와 달리 Prototype 객체의 생성자는 암시적으로 요청을 전송하므로 HTTP 요청을 트리거하기 위해 메서드를 호출할 필요가 없다는 점에 주목할 가치가 있습니다.
대부분의 JavaScript 프레임워크는 내가 여기서 언급한 것 이상으로 Ajax를 지원합니다. 몇 가지 주목할 만한 개선 사항에는 특별한 onSuccess 함수가 필요 없이 응답을 받으면 자동으로 요소를 업데이트하는 기능이 포함됩니다. 일부 라이브러리에는 Google 검색 엔진에서 볼 수 있듯이 입력할 때 몇 가지 검색어 제안을 제공하는 자동 완성 기능이 사전 구축되어 있습니다.
다음 장에서는 JavaScript 프레임워크가 웹 개발자에게 제공하는 사용자 경험(UE) 개선 사항에 대해 알아봅니다.
재인쇄 주소: http://www.denisdeng.com/?p=729
원래 주소: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html