앱스프레소 확장 API를 사용한 AJAX

앱스프레소 확장 API를 사용한 AJAX

/*
앱스프레소(Appspresso)는 이클립스 기반의 SDK 형태로 배포되어 사용하기 더 편리하다(?)는 것과 WAC(Wholesale Applications Community)의 Waikiki API를 제공한다는 점을 빼면  폰갭(PhoneGap)과 비슷한 하이브리드 웹앱 프레임웍/툴이다. 이 녀석을 만든 장본인이라 블로그질 하기가 좀 뭣하지만... 어차피 보는 사람도 별로 없는 블로그라 ㅋㅋ

*/

일반적인 웹 어플리케이션(혹은 웹 서비스)이 갖는 크로스 도메인 제약이 (폰갭과 달리) 앱스프레소로 만든 웹앱에도 동일하게 적용됩니다.

W3C에 준비중인 Cross-Origin Resource Sharing(CROS)이 표준화되어 모바일 webkit에 적용되면 좋겠지만, 현재로썬 크로스도메인 제한을 극복하려면 script 태그(JSONP)나 iframe 태그(Facebook의 XFBML, dojo의 iframe IO 등)를 이용해야 합니다.

앱스프레소에서는 개발의 편의를 위해 확장 API를 제공하는데, 네트웍 관련 API들은 ax.ext.net에 모여있습니다.

이 글에서는 예제를 통해 크로스도메인 AJAX 요청을 지원하는 앱스프레소 확장 API들에 대해 알아보겠습니다.
 

중요: 첨부된 예제의 src/apis 폴더 아래에 여러개의 js 파일들이 들어있는데, 이는 기존에 배포된 Appspresso SDK의 버그로 인해 사용할 수 없었던 확장 API를 사용할 수 있도록 임시로 제공되는 것이며, 이후에 배포될 Appspresso SDK에서는 이 js 파일들이 없어도 확장 API를 사용할 수 있습니다.

예제 웹앱 프로젝트

AxExtNet.zip 파일을 Appspresso SDK의 Workspace 디렉토리에 압축을 풀고, File/Import/Existing Projects into Workspace로 이클립스 프로젝트로 추가하세요.

src/index.html에 이 글에서 설명할 ax.ext.net.get/post/curl API를 사용한 예제 코드가 모두 들어있습니다.

GET 요청 보내기 - ax.ext.net.get

function successCallback(result) { if(result.status >= 200 && result.status < 300) { var data = JSON.parse(result.data); var etag = response.headers['ETag']; // ... } } function errorCallback(error) { alert(error); } ax.ext.net.get('http://.../api/item.json?id=123', successCallback, errorCallback);

첫번째 인자로 지정한 URL로 GET 요청을 보냅니다.
요청이 성공하면(서버의 응답 코드와 무관하게, 요청이 서버로 보냈고 응답을 받았으면) success 콜백함수가 호출되고, 실패하면 error 콜백함수(생략가능)가 호출됩니다. success 콜백 함수로 전달되는 인자의 data, status, headers 등의 속성을 이용해서 응답의 세부 결과를 확인할 수 있습니다.

참고:jQuery.get

POST 요청 보내기 - ax.ext.net.post

var params = { 'firstname': 'foo', 'lastname': 'bar', … }; ax.ext.net.post('http://.../api/update.json', params, successCallback, errorCallback);

ax.ext.net.get과 동일하지만, 두번째 인자로 전달한 key-value 쌍들을 포함하는 POST 요청을 보냅니다.

더 복잡한 HTTP 요청 보내기 - ax.ext.net.curl

var settings = { 'method': 'DELETE', // 'GET', 'POST', 'PUT', … 'url': 'http://.../...', 'headers': { 'X-Custom-Header': 'custom header value', .. }, 'params': { 'param1': 'value1', 'param2': 'value2', .. }, 'files': { 'fileparam1': 'filepath1', 'fileparam2': 'filepath2', .. }, 'success': successCallback, 'error': errorCallback, 'sent': sentCallback, 'received': receivedCallback, ... }; ax.ext.net.curl(settings);

GET, POST 외에 PUT, DELETE 등의 요청 메소드, 커스텀 요청 헤더, 파일 등을 포함한 더 다양한 형태의 요청을 보냅니다. method와 url을 제외한 모든 속성은 생략할 수 있습니다.

참고: jQuery.ajax

ax.ext.net에는 이 글에서 설명한 것 외에도 업로드/다운로드(진행 상황을 확인까지), 메일 보내기 등의 기능을 제공합니다. 이 확장 API들을 활용하기 위해서는deviceapis.filesystem를 함께 사용해야 하는데, 다음 기회에 별도의 예제와 함께 설명하겠습니다.

오늘은 여기까지~ 휘릭=3=3=33