'Web/ajax'에 해당되는 글 5건
- 2009.01.12 Ajax와 XML: 다섯 개의 추천할 만한 Ajax 위젯 (한글)
- 2009.01.12 ASP.NET AJAX를 지원하지 않는 웹호스팅에 AJAX 사용하기 닷넷
- 2009.01.12 Ajax와 XML: 최고의 Ajax 배우기 (한글)
- 2009.01.12 php java ajax 웹프로그래밍 기술서 출처
- 2009.01.12 [IBM 디벨로퍼웍스] Ajax로 SOAP 웹 서비스 호출하기, Part 1: 웹 서비스 클라이언트 구현하기 (한글) [출처] [IBM 디벨로퍼웍스] Ajax로 SOAP 웹 서비스 호출하기, Part 1: 웹 서비스 클라이언트 구현하기 (한글)
Ajax와 XML: 다섯 개의 추천할 만한 Ajax 위젯 (한글)
난이도 : 중급
Jack D Herrington, Senior Software Engineer, Leverage Software Inc.
Web 2.0은 사용자 경험을 강조하고 있습니다. 이것의 일환으로 고급스러운 방식으로 사용자와 인터랙팅 하고 사용자에게 정보를 제공하는 것입니다. 이러한 새로운 인터페이스들을 위젯이라고 하며, Asynchronous JavaScript + XML (Ajax)을 사용하여 서버와 통신합니다. 사이트와의 상호 작동을 향상시키는데 사용할 수 있는 다섯 개의 위젯에 대해 알아봅시다.
Web 2.0 혁명은 웹 사이트 상에서 고객과 상호 작동하는 독특하면서도 고급스러운 방식이 탄생했다.
SWF/Charts 위젯부터 설명하겠다. 내가 생각하기에 이 위젯이 전개하기에 가장 쉽다. "한편의 그림이 천마디 말보다 낫다"라는 속담을 무시할 수 없으며 특히, 그래프가 관여된 XML로 인코딩 된 데이터를 그릴 수 있는 위젯이 있다면 정말 좋을 것 같지 않은가? 마침 Listing 1. Chart_page.html
Charts.swf 는 두 개의 매개변수를 취한다. 라이브러리 디렉토리의 위치와 XML 데이터의 Listing 2. Chart_data.xml
이 파일은 차트용 데이터이고, 선택적인 비주얼 정보도 있다. 이 경우, 필자는 차트 유형을 Firefox 브라우저에서 파일을 검색하면 그림 1과 같은 그래프를 볼 수 있다. 그림 1. Chart Widget ![]() 기본 컬러 스킴과 모습도 멋지며, 그래프는 중심축 값을 보기 좋게 처리했다. 적은 노력으로 분명히, graph_data.xml 파일을 동적인 웹 페이지로 대체할 수 있었다. 리턴된 데이터가
데이터를 나타내는 또 다른 방법은 게이지로 표현하는 것이다. 개인적으로는 게이지에 하지만, 웹이 간단한 바 차트도 잘 수행하지 못한다면, 원형 게이지 역시 수행할 수 없다. SWF게이지 위젯을 삽입하는 HTML 페이지로 시작하겠다. (Listing 3) Listing 3. Gauge_page.html
gauge.swf 영화는 하나의 인자를 취한다. 데이터의 위치이다. 이 경우, 그 위치는 Listing 4. Gauge_data.xml
여러분도 보듯, SWF는 이 위젯에 다른 방식을 취했다. 게이지(또는 그래프)용 데이터를 솔직히, 필자는 데이터를 제공할 수 있는 기본 게이지를 선호한다. 하지만, 이 방식도 내 브라우저에 있는 페이지로 갈 때, 그림 2와 같은 게이지를 볼 수 있다. 그림 2. Gauge Widget ![]() 그래픽 프리머티브를 지정하는 것으로는, 이 위젯에서 얻을 수 있는 것이 많이 없다고
사용자들은 이제 데스크탑 애플리케이션에서 In-place editing을 기대하지만, 이러한 기능은 In-place editing을 구현하려면, 직접 작성하거나, JavaScript 프레임웍들 중 하나를 In-place editing용 HTML 테스트 파일은 Listing 5를 참조하라. Listing 5. Inplace.html
Inplace.html에는 필요한 모든 JavaScript 소스 파일이 포함된다. 간단한 테이블에 In-place
Listing 6은 submitted.html 파일이다. Listing 6. Submitted.html
이제 테스트 할 차례이다. 브라우저를 HTML 파일에서 연다. 이곳에서 원래의 텍스트를 그림 3. in-place editing의 시작 포인트 ![]() 노란색 하이라이팅은 이것을 클릭하여 필드를 편집할 수 있다는 사용자용 인디케이터이다. 그림 4. 클릭한 후 텍스트 편집하기 ![]() 텍스트를 수정하고 ok를 클릭한다. 이렇게 하면 데이터가 서버에 게시된다. (또는 이 경우 그림 5. ok를 클릭한 후 새로운 콘텐트 ![]() 이와 같은 간단한 인터페이스 업그레이드는 애플리케이션의 가용성에 차이를 만든다.
브라우저에서 윈도우를 웹 페이지에 구현하기 힘들다는 것은 좋은 일일지도 모른다. 하지만 어쨌든, 내가 말했지만 Dynamic HTML (DHTML) 페이지용 윈도우를 구현하는 것은 쉬운 Listing 7. Window.html
prototype.js와 window.js 소스 파일을 헤더로 가져온다. 그런 다음, 내가 좋아하는 매개변수 이 경우 필자는 terms.html 파일을 참조한다. (Listing 8) Listing 8. Terms.html
내 브라우저에서 이 페이지를 실행하면 그림 6과 같은 윈도우를 보게 된다. 그림 6. 초기 윈도우 ![]() 이것은 단지 두 개의 Mac 윈도우만은 아니다. Mac 처럼 보이는 DHTML 윈도우가 있고 그 윈도우를 늘려 이동할 수 있다. (그림 7) 그림 7. 이동 및 크기 조정 후 윈도우 모습 ![]() 필자는 본 기술자료와 내 작업을 위해 여러 드물 윈도우 라이브러리를 검토했고, 이것이
많은 사용자 인터페이스(UI)를 다루어본 사람이라면 실제 상태를 나타내는 것이 중요하다고 carousel 컨트롤은 고정된 공간에서 여러 이미지들을 보여준다. 이미지 블록의 왼쪽과 공간 절약은 중요하다. 세 개의 공간에 30 개의 앨범 커버를 넣을 수 있고, 각각 알맞은 크기 carousel의 단점은 구현이 쉽지 않다는 점이다. 특히, 이것의 특징 중 하나가 왼쪽 또는 필자는 웹 페이지에 간단한 carousel 위젯을 구현했다. ( Listing 9) Listing 9. Carousel.html
이전 예제들 보다 방대하다. 하지만 코드 대부분이 그래픽을 설정하고 서버에서 리턴된 Ajax 이 carousel용 데이터는 Listing 10에 나와있다. Listing 10. Data.xml
이 경우, 파일은 그림 8. 이미지 carousel ![]() 이미지를 클릭하고 그 이미지가 있는 페이지로 갈 수 있다. (또는 내가 지정한 URL로 간다.)
웹 상에서 사용할 수 있는 무료/상용 위젯과 툴들을 소개했다. 이 글을 쓰면서 보았던 많은
WYSIWYG 에디터 외에도, 프로그래스 바, 탭 다이얼로그 박스, 아코디언 컨트롤, 클락, 데이트 피커(date picker), RSS, Outline Processor Markup Language (OPML) 리더용 솔루션도 있다. 심지어 대화형 터미널 윈도우용 솔루션도 있다. DHTML
교육
제품 및 기술 얻기
토론
|
[출처] Ajax와 XML: 다섯 개의 추천할 만한 Ajax 위젯 (한글)|작성자 파워홍
'Web > ajax' 카테고리의 다른 글
ASP.NET AJAX를 지원하지 않는 웹호스팅에 AJAX 사용하기 닷넷 (0) | 2009.01.12 |
---|---|
Ajax와 XML: 최고의 Ajax 배우기 (한글) (0) | 2009.01.12 |
php java ajax 웹프로그래밍 기술서 출처 (0) | 2009.01.12 |
[IBM 디벨로퍼웍스] Ajax로 SOAP 웹 서비스 호출하기, Part 1: 웹 서비스 클라이언트 구현하기 (한글) [출처] [IBM 디벨로퍼웍스] Ajax로 SOAP 웹 서비스 호출하기, Part 1: 웹 서비스 클라이언트 구현하기 (한글) (0) | 2009.01.12 |
2006년 AJAX (비동기 Javascript and XML) 열풍이 불면서 MS에서는 Atlas라는 코드명으로 시작하여 현재는 ASP.NET AJAX 1.0 정식버전이 나왔지요. Atlas까지는 클래스 라이브러리로 제공을 하지만 ASP.NET AJAX 1.0 부터는 설치형을 제공해주고 있습니다.
하지만 .NET 호스팅을 사용하시는 분들은 많이 고민을 할듯 합니다. 자신의 사이트에 AJAX를 도입하고 싶은데 막상 웹호스팅 회사에서는 AJAX 컴포넌트를 제공해주지를 않는 경우이죠. 이를 극복하기 위해 고민을 하다가 방법을 알아냈습니다~(짝짝짝)
첫번째로 생각할 점은 아무리 Atlas에서 ASP.NET AJAX로 넘어왔다 하더라도 AJAX는 '클래스라이브러리 (.dll)'를 통해서 실행된다는 것이지요. 즉, 바이너리 파일을 담당하는 폴더인 /BIN 에 AJAX에 관련된 .dll 파일을 넣는다면 무리없이 실행된다는 것이지요.
그럼 웹호스팅에 AJAX를 꾸겨넣어(?) 봅시다~~
1. ASP.NET AJAX 공식 사이트(http://ajax.asp.net/)에서 AJAX 1.0을 다운받고 설치합니다.
AJAX에 관심있으신 분들이라면 이 사이트를 안가보신 분이 없겠지요 ^^ 동영상 강좌와 커뮤니티를 지원해주고 가장 최신 버전의 AJAX를 제공해줍니다. 이를 설치하는 이유는 AJAX에 관련된 .dll 파일을 얻기 위한 것입니다.
2. 필요한 .dll파일들을 복사하세요.
저는 C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\ 에 있더군요. AJAX가 설치된 폴더에서 다음 .dll파일들을 따로 복사합니다.
AJAXExtensionsToolbox.dll
System.Web.Extensions.dll
System.Web.Extensions.Design.dll
각각의 클래스 라이브러리들이 어떠한 기능을 하는지 궁금하신 분은.. 저에게는 능력의 한계라~ ASP.NET AJAX Documentation을 확인해주시기 바랍니다.
3. 그리고 ASP.NET AJAX Control Tookit도 다운받고 압축을 푸세요.
(http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx?ReleaseId=1425)
ASP.NET AJAX에서 기본으로 제공해주는 컨트롤을 사용하기 위해서 .dll 파일을(AjaxControlToolkit.dll) 가져와야 합니다. \SampleWebSite\Bin\ 여기에 컴파일된 클래스라이브러리가 있으니 이것도 복사를 해두세요.
4. 자~ AJAX를 도입할 웹사이트에 Bin폴더를 만들고 지금까지 모아놓은 4개의 .dll파일을 복사합니다.
5. 웹호스팅에 올립니다~~ 끝!
'Web > ajax' 카테고리의 다른 글
Ajax와 XML: 다섯 개의 추천할 만한 Ajax 위젯 (한글) (0) | 2009.01.12 |
---|---|
Ajax와 XML: 최고의 Ajax 배우기 (한글) (0) | 2009.01.12 |
php java ajax 웹프로그래밍 기술서 출처 (0) | 2009.01.12 |
[IBM 디벨로퍼웍스] Ajax로 SOAP 웹 서비스 호출하기, Part 1: 웹 서비스 클라이언트 구현하기 (한글) [출처] [IBM 디벨로퍼웍스] Ajax로 SOAP 웹 서비스 호출하기, Part 1: 웹 서비스 클라이언트 구현하기 (한글) (0) | 2009.01.12 |
난이도 : 초급
Jack D Herrington, Senior Software Engineer, Leverage Software Inc.
2007 년 6 월 05 일
[출처] Ajax와 XML: 최고의 Ajax 배우기 (한글)|작성자 마검린
Web 2.0에서 최상의 Asynchronous JavaScript™ + XML (Ajax) 애플리케이션을 사용해봅시다. 이러한 애플리케이션들이 사용자 레벨에서 어떻게 성공을 거둘 수 있는지, 자신의 Web 2.0 애플리케이션에 맞는 기술을 찾아 뛰어난 사용자 경험을 이룩하는 방법은 무엇인지를 모색해봅시다.
본 기술자료에서는 최신 웹 애플리케이션들에게서 배울 점을 찾아볼 것이다. 모방의 대상이 되는 사이트들은 이를 문제 삼지는 않을 것이다. 결국 모방은 칭찬의 또 다른 표현이기도 하다.
필자는 기술적인 측면에만 주 초점을 맞추지는 않을 것이다. 이러한 사이트들의 기술적인 측면, 즉 Ajax를 통해 데이터가 전달되는 방법이 중요하긴 하지만 이것이 성공적인 사이트를 만드는 것은 아니기 때문이다. 이러한 사이트들이 브라우저의 Ajax 기능들과 Dynamic HTML (DHTML)을 함께 사용하여 매력적인 사용자 경험을 어떻게 만들어 내는지를 생각해 봐야 한다. 또한, 이러한 사이트들이 사용자 커뮤니티와 어떻게 상호 작동 할 수 있는지도 봐야 한다. 이러한 모든 요소들이 성공적인 사이트를 만드는데 있어서 기술만큼 중요한 것이다.
"가장 영향력 있는 Web 2.0 애플리케이션"에 대한 오스카 또는 골든 글로브 시상식이 있다면, 상은 Google Maps에 돌아가야 한다. 필자의 동료들이 Google Maps를 처음 봤을 때 그들의 반응이 뚜렷하게 기억난다. 브라우저에서 어떻게 이러한 것들이 가능할까? Google Maps는 브라우저의 애플리케이션에 사용자가 기대하는 바를 재정립함으로써 Web 2.0 혁신을 주도했다고 본다.
이 글을 읽고 있는 독자들도 Google Maps를 사용해 보았는지는 모르겠지만, 어쨌든 그림 1의 사이트를 보도록 하자.
그림 1. 현재의 Google Maps 버전

마치 종이로 된 지도를 보는 것처럼 쉽게 지도를 클릭하고 드래그 할 수 있다. 여러분이 방향을 잡으면 디스플레이 명멸(blinking)이나 지도를 이동시키지 않고도 지도 상에 라인으로서 나타난다. 사실, 대부분의 Google Maps의 기능은 서버의 HTML 페이지 없이도 실행된다.
Google Maps 다음으로 Ajax and Dynamic HTML이라는 단어가 두 번째 웹 혁명을 일으켰다. 이상한 점은 더 정확히 말해서 (XMLHTTP
객체를 사용하여 요청을 송수신 하는 것으로 Ajax를 정의한다면), Google Maps는 Ajax를 사용하지 않는다. Google Maps는 동적으로 생성된 <script>
태그를 사용하여 데이터를 이동한다. 이것은 XMLHTTP
객체 보다 앞서는 기술이다.
그런데 왜 Google Maps는 Ajax를 사용하지 않는 것인가? Google 엔지니어들의 생각까지는 알 수 없지만, 필자의 생각으로는 Google Maps는 "get-go"가 아닌 JavaScript "mashup-able"이 되도록 설계되었기 때문이다.
이 글 초반에서, 필자는 사용자 커뮤니티를 지원하는 것에 대해 이야기 했다. 이것은 중요하다고 생각한다. 매시업은 사용자 커뮤니티를 지원하기에 딱 알맞다. 매시업은 한 사이트에서 기능과 또 다른 사이트의 기능을 결합하여 보다 더 흥미로운 것으로 만드는 것이다. 매시업의 좋은 예는 Craigslist에서 렌탈 리스팅을 가져와서, Google Maps를 사용하여 이들을 지도 위에 배치하는 것이다.
Google Maps 매시업의 또 다른 예제는 MapMyRun.com이다. 이것은 Google Maps를 사용하여 달리기 선수들이 지도 상에서 거리를 파악할 수 있도록 한다. (그림 2)
그림 2. Map My Run 인터페이스

여기에서 필자는 왼쪽 페인에 있는 인풋 필드에 시작 위치를 넣는다. 그런 다음 마우스를 사용하여 달리기 코스를 가리킨다. 필자가 클릭하면 왼쪽 페인은 동적으로 업데이트 되어 거리를 보여준다. 줌인 기능을 통해 보다 상세하게 보거나 길을 벗어날 경우 위성 모드로 변환한다.
모든 어려운 지도 작업은 Google Maps에 의해 수행된다. MapMyRun 사이트는 지도 위에 몇 개의 JavaScript 코드를 배치하여 마우스 클릭을 처리하고 거리를 계산한다.
그렇다면 성공적인 Web 2.0 애플리케이션을 구현할 때 Google Maps에서 무엇을 배웠을까?
- 브라우저를 사용한다: Google Maps는 현대적인 브라우저의 동적인 측면을 매우 잘 활용한다. 이러한 브라우저 기능들을 사용하여 매력적인 사용자 경험을 만들어 낸다.
- Ajax 순수성은 중요하지 않다: 극소수의 사람들은 Google Maps가 순수한 Ajax 애플맄이션이 아니라는 것을 알고 있다. 그러나 이러한 사람들 조차 그것을 문제 삼지 않는다. Google Maps는 사용자에게 놀라운 기능을 제공한다.
XMLHttp
이 사용되지 않는다는 것은 문제가 되지 않는다. 특정 기술에 너무 얽매일 필요가 없다. - JavaScript 매시업: JavaScript 코딩을 사용하여 하나의 사이트에서 또 다른 사이트로 기능을 삽입하는 기능은 매우 매력적이다. 특정 기능에 대한 중요한 소스를 사용할 수 있는 강점을 갖고 있다.
![]() |
![]()
|
이제 직접 경험해 보자. Google Maps는 Web 2.0 애플리케이션에 매우 높은 장벽을 치고 있다. 하지만 Ajax를 사용하여 애플리케이션에 엄청난 가치를 빠르게 추가할 수 있다. 그러한 가치의 예가 TaDaList이다. TaDaList는 매우 단순한 (그리고 무료의) to-do 리스트 매니저이다. 사이트를 설명하기 위해, 수영 연습을 위해 필자가 해야 할 일을 상기시켜 주는 계정과 수영 리스트를 그림 3과 같이 만들었다.
그림 3. 수영 리스트

고글을 구매해야 한다는 것을 추가해야 하므로 그 내용을 텍스트 필드에 입력하고 Add to list를 클릭한다. 이 아이템은 페이지 리프레시 없이 곧 알맞은 리스트에 추가된다. (그림 4)
그림 4. "Buy New Goggles"를 추가한 후

많은 것들이 있는 것 같지는 않고 Ajax를 사용하여 구현하기도 어렵지 않은데도 데스크탑 애플리케이션에서나 기대할 수 있었던 세련된 감각을 느낄 수 있다.
TaDaList는 Rails 프레임웍에서 작성된다는 것을 명심하라. 사실, 이것은 Rails를 배우는 사람들이 사용하는 데모용 애플리케이션이다. Rails 프레임웍에서는 이러한 유형의 Ajax 작업을 매우 빠르게 할 수 있다.
필자는 Rails에서 2분여 만에 매우 기본적인 TaDaList를 작성했다. to-do 아이템의 리스트는 그림 5에 나타나 있다.
그림 5. to-do 아이템 리스트

그리고 나서 Buy earplugs
를 입력하고 Add를 클릭한다. 페이지를 리프레시 하지 않고도 아이템이 리스트에 나타난다. (그림 6)
그림 6. "Buy earplugs"를 추가한 후

그 다음에는 to-do 아이템들을 저장할 작은 데이터베이스를 만들었다. 그리고 나서 Listing 1에 보이는 Rails 컨트롤러를 만들었다.
Listing 1. Todo_controller.rb
|
Listing 1의 코드는 두 개의 메소드를 사용한다. list()
메소드는 페이지를 보여준다. add()
메소드는 새로운 아이템을 리스트에 추가하고 그 리스트를 HTML로 리턴한다.
list()
메소드용 RHTML은 Listing 2에 나타나 있다.
Listing 2. List.rhtml
|
이 페이지는 form_remote_tag
를 사용하여 단순한 형태의 콘텐트를 컨트롤러에 있는 add()
메소드에 제출한다. add()
메소드는 to-do 아이템을 테이블에 추가하고 결과 <div>
태그에 새로운 콘텐트를 리턴한다. 이 코드는 Listing 3과 같다.
Listing 3. Add.rhtml
|
그렇다면 TaDaList에서 필자는 무엇을 배웠을까? 우선, 웹 애플리케이션을 위한 더 나은 데스크탑 느낌을 갖기 위해서는 Ajax가 갈 길이 멀다는 점이다. 두 번째로, Ajax를 채택하고 있는 웹 프레임웍의 선택은 이러한 유형의 작업을 수월하게 한다는 점이다.
![]() |
![]()
|
Campfire는 같은 그룹(37signals)에서 개발한 TaDaList와 비슷한 사이트이다. 이 경우, 애플리케이션은 온라인 채팅을 호스팅 하고 파일 전송을 쉽게 함으로써 원격 팀을 위한 가상의 친목회를 시뮬레이트 하기 위해 개발되었다.
필자는 시험 계정을 설정하고 몇 가지 이미지 업로딩과 함께 채팅을 수행했다. 결과는 그림 7과 같다.
그림 7. 원격 팀들을 위한 가상 친목회

디스플레이의 왼편을 보면 누구나 언제라도 새로운 메시지를 게시할 수 있는 간단한 채팅 창이 있다. 오른편에는 누가 온라인 상태에 있는지, 파일 업로딩 장소는 어디에 있는지를 나타낸다.
파일 업로딩은 그 자리에서 JavaScript 코드를 사용하여 수행되어 파일 업로드 프로세스를 감시한다. 다시 말해서, 대화 시 다른 페이지로 이동할 필요 없이 파일과 이미지를 추가할 수 있다.
Campfire 역시 몇 가지 교훈을 준다. 우선, 사용자들이 데스크탑 애플리케이션에서 기대하는 채팅 서비스를 대체할 대담성을 갖고 있다. 하지만, 그룹 미팅의 정황에서 채팅을 호스팅 함으로써 이를 무난히 수행하고, 데스크탑과 비교해 볼 때 기능면에서 제한이 있는 시스템을 구현하지만 미팅의 정황에서만 사용할 수 있기 때문에 더욱 값지다.
두 번째 교훈은 파일 업로딩 같은 페이지 리프레시를 해야 하는 작동이 처리되어 어떤 페이지 로딩도 필요 없다. 따라서 사용자는 자신의 태스크에 집중할 수 있고 데스크탑 애플리케이션 느낌을 강화할 수 있다.
![]() |
![]()
|
이러한 사이트들의 일부가 Web 2.0을 사용한다면, YourMinis는 또 다른 영역에서, 여러분의 웹의 widget/gadget 사이트가 된다. 이를 사용하여 여러분은 다양한 위젯(또는, Microsoft lingo를 선호할 경우 gadgets,)을 호스팅 하는 페이지를 생성 및 커스터마이징 할 수 있다. 페이지는 대시보드로서 작동하면서 매력적인 방식으로 정보를 제때에 제공한다.
그림 8은 페이지에 Rottentomatoes 영화 위젯을 배치한 후의 사이트 모습니다.
그림 8. 영화 리뷰를 보여주는 YourMinis

Rottentomatoes는 영화 리뷰 사이트인데 약간의 트위스트가 있다. 수 백 개의 영화 리뷰들에서 점수를 모아서 그 수를 백분율로 제공한다. 60% 이상 점수를 가진 영화는 fresh(좋은 영화)로 간주된다. 이 경우, 필자는 Bridge To Terebithia,를 선택했고 우편 번호만 제공하면 위젯을 통해 영화 시간을 알 수 있다. (그림 9)
그림 9. 영화 시간을 보여주는 영화 위젯

인터페이스는 깔끔하고 빠르며 대중적인 브라우저에서도 잘 작동한다. 위젯 역시 다양한 장소(예를 들어, 이 사이트의 생성자의 블로그)에서 호스팅 할 수도 있다.
이 사이트 외에도, YourMinis는 Firefox 확장도 있기 때문에 여러분이 검색하고 있을 때 여러분을 지켜본다. RSS 피드나 MP3 같은 YourMinis와 함께 사용할 것을 찾으면 리소스를 사용할 수 있다는 것을 알려준다. 비교적 쉬운 브라우저와의 통합은 사이트를 사용자 데스크탑과 더욱 밀접히 통합할 수 있는 좋은 방법이다.
YourMinis는 Web 2.0에 대해서 더 많은 교훈을 준다. 우선, minis와 프레임웍은 Macromedia Flash로 구현된다. 사용자의 관점에서 보면, 이는 문제가 아니다. 특정 기술의 선택 문제는 궁극적인 사용자 이익보다는 중요하지 않다.
개발자들이 페이지 디자인을 커뮤니티에 기여하게끔 만든다. 사용자 커뮤니티와 함께 한다는 것은 여러분이 원래 상상하지도 못했던 방향으로 사이트를 만들 수 있다는 것을 시사한다.
특별한 사이트는 아니지만, Lightbox 기술은 최신 사이트에서 중요한 역할을 한다. lightbox는 사용자 인터페이스 기술과 Ajax를 결합한 것이다. 웹 페이지 예제를 보자. (그림 10)
그림 10. Lightbox JS의 홈페이지

이미지를 클릭하면 전체 페이지가 어두워지고 선택한 박스의 줌인 이미지가 페이지 중앙에 나타난다. (그림 11)
그림 11. 이미지 클릭 후에 나타나는 Lightbox

이 기술은 많은 장점이 있다. 사용자의 관심을 페이지의 나머지 부분들에서 끌어내어 선택한 부분에 집중할 수 있도록 한다. 사용자는 Close를 클릭하고 정상 페이지로 돌아갈 수 있기 때문에 사용자들이 페이지를 많이 이동하지 않고도 상세한 부분들을 볼 수 있다.
Lightbox 기술은 이미지나 비디오에 좋을 뿐만 아니라, 텍스트 콘텐트에도 유용하다. 필자가 자주 방문하는 콘텐트 사이트는 Lightbox 기술을 사용하여 홈 페이지에 있는 각 아티클의 시놉시스를 제공한다. 하지만 이 시놉시스는 사용자가 (Ajax를 통해) Lightbox 링크를 클릭할 경우에만 로딩된다. 따라서 사용자는 한 페이지에서 여러 아티클 시놉시스 아이템을 읽을 수 있고 서버 대역폭을 줄일 수 있다.
Lightbox를 만드는데 여러 오픈 소스 JavaScript 라이브러리들을 사용할 수 있다. 위에 설명한 것은 Lightbox JS version 2이다.
![]() |
![]()
|
이 글을 쓰면서 필자는 많은 Web 2.0 사이트들을 둘러보았다. 대부분이 위에 설명한 예제들에는 미치지 못했다. 특히 Google은 여러 가지 뛰어난 오퍼링을 갖고 있다. Google Documents와 Spreadsheets는 브라우저 내에서 WYSIWYG 에디팅이 어디까지 갈 수 있는지를 증명하고 있다. Google Reader는 RSS 피드를 통해 호스팅 솔루션을 제공하여 사용자가 어떤 장소에서든 뉴스를 볼 수 있게 하는 방법을 시사하고 있다. Google Mail은 Ajax, JavaScript, DHTML, Google Maps를 사용한다.
Google이 탁월성을 보이는 또 다른 분야는 모바일 접근성이다. Google의 모든 서비스들은 전화기와 기타 작은 장치에서도 잘 작동하는 버전을 갖고 있다. 하나의 Google 계정으로 웹 버전과 전화기 버전에 맞춰 커스터마이징 된 홈페이지가 생긴다.
놀라운 Ajax 작동을 보이는 것이 Google 만은 아니다. Meebo는 단순하지만 우아한 인터페이스를 가진 채팅 애플리케이션의 좋은 예이다. Kiko는 캘린더 편집에 DHTML을, 새로운 약속, 연락처, 관련 정보들로 서버를 업데이트할 때는 Ajax를 사용하는 캘린더 애플리케이션이다.
![]() |
![]()
|
이 글에서 설명한 모든 사이트들에서 배울 점은 아주 많다. 특히, 훌륭한 기술 트릭을 배울 수 있다. 이 모든 사이트들이 공유하는 한 가지 공통적인 엘리먼트는 HTML과 JavaScript 코드의 결합에서 나오는 힘에 대한 깊은 신뢰이다. JavaScript 코드는 최근 프로그래밍 세계에서 나쁜 평판을 받았다. 필자가 들었던 대부분의 결점들은 JavaScript 언어 자체 보다는 Document Object Model (DOM)과의 브라우저 호환성과 더욱 관련이 있기 때문에 그러한 평판은 부당하다. 확실한 점은, 여러분이 매력적인 Web 2.0 애플리케이션을 만들고 싶다면 JavaScript 코드를 사용해야 한다는 것이다.
![]() |
초반에 언급했듯이, 기술만이 문제가 아니다. 매력적인 사용자 경험을 이룩하는 것에 관한 것이기도 하다. 필자가 이 글에서 설명하기 위해 선택했던 모든 사이트들은 이 분야에 새로운 지평을 연 것들이다. 일부는 단순한 폼에 복잡성을 숨기기도 했고(Google Maps), 어떤 것들은 Ajax를 통해 인터페이스를 향상시켰다.
Web 2.0 애플리케이션들 역시 커뮤니티가 있다. Google Maps에서는 사용자들이 자신들의 애플리케이션에 사용할 기술을 혼합할 수 있다. Campfire 같은 사이트들은 집중된 사용자 경험을 향상시킨다.
확실히, 여러분은 많은 것을 배울 수 있다. 하지만 감사하게도, JavaScript와 DHTML 애플리케이션을 쉽게 구현할 수 있기 때문에 Web 2.0 애플리케이션 구현이 더욱 즐거워 질 것이다.
[출처] Ajax와 XML: 최고의 Ajax 배우기 (한글)|작성자 마검린
'Web > ajax' 카테고리의 다른 글
Ajax와 XML: 다섯 개의 추천할 만한 Ajax 위젯 (한글) (0) | 2009.01.12 |
---|---|
ASP.NET AJAX를 지원하지 않는 웹호스팅에 AJAX 사용하기 닷넷 (0) | 2009.01.12 |
php java ajax 웹프로그래밍 기술서 출처 (0) | 2009.01.12 |
[IBM 디벨로퍼웍스] Ajax로 SOAP 웹 서비스 호출하기, Part 1: 웹 서비스 클라이언트 구현하기 (한글) [출처] [IBM 디벨로퍼웍스] Ajax로 SOAP 웹 서비스 호출하기, Part 1: 웹 서비스 클라이언트 구현하기 (한글) (0) | 2009.01.12 |
![]() |
|
'Web > ajax' 카테고리의 다른 글
Ajax와 XML: 다섯 개의 추천할 만한 Ajax 위젯 (한글) (0) | 2009.01.12 |
---|---|
ASP.NET AJAX를 지원하지 않는 웹호스팅에 AJAX 사용하기 닷넷 (0) | 2009.01.12 |
Ajax와 XML: 최고의 Ajax 배우기 (한글) (0) | 2009.01.12 |
[IBM 디벨로퍼웍스] Ajax로 SOAP 웹 서비스 호출하기, Part 1: 웹 서비스 클라이언트 구현하기 (한글) [출처] [IBM 디벨로퍼웍스] Ajax로 SOAP 웹 서비스 호출하기, Part 1: 웹 서비스 클라이언트 구현하기 (한글) (0) | 2009.01.12 |
[IBM 디벨로퍼웍스] Ajax로 SOAP 웹 서비스 호출하기, Part 1: 웹 서비스 클라이언트 구현하기 (한글) [출처] [IBM 디벨로퍼웍스] Ajax로 SOAP 웹 서비스 호출하기, Part 1: 웹 서비스 클라이언트 구현하기 (한글)
| Web/ajax 2009. 1. 12. 02:02난이도 : 중급
James Snell, Software Engineer, IBM
2007 년 8 월 14 일
Asynchronous JavaScript and XML (Ajax) 디자인 패턴을 사용하여 웹 브라우저 기반 SOAP 웹 서비스 클라이언트 구현하기.
Asynchronous JavaScript and XML (Ajax) 디자인 패턴에 기반하여 크로스 플랫폼, JavaScript 기반 SOAP 웹 서비스 클라이언트를 구현하는 방법을 다룬 시리즈의 첫 번째 기술자료입니다.
GMail, Google Maps, Flickr, Odeo.com 같은 유명한 웹 애플리케이션 서비스에서 사용된다는 이유로 유명해진 Ajax는 웹 개발자에게 비동기식 XML 메시징을 사용함으로써 그들의 웹 애플리케이션의 가치와 기능을 늘릴 수 있는 방식을 제공하고 있다. 이 글에서 소개하는 Web Services JavaScript Library는 SOAP 기반 웹 서비스를 호출하는데 지원을 추가함으로써 Ajax 패턴에 힘을 실어주는 기본 메커니즘을 확장한 것이다.
웹 브라우저 내에서 SOAP 웹 서비스를 호출하는 것은 복잡한 일이 될 수 있다. 대부분의 웹 브라우저가 각각 XML의 생성과 프로세싱을 약간 다른 방식으로 처리할 경우 특히 그렇다. 모든 브라우저들이 일관성 있게 구현하는 표준 API나 XML 프로세싱 기능들은 매우 적다.
브라우저 구현에서 일치하는 메커니즘 중 하나가 XMLHttpRequest API인데, 이것은 Ajax 디자인 패턴의 심장이다. Philip McCarthy가 developerWorks에 기고한 최신 글에서도, XMLHttpRequest는 비동기식 HTTP 요청들을 수행하는데 사용할 수 있는 JavaScript 객체이다. 이 글에서는 XMLHttpRequest 객체가 Ajax 디자인(참고자료)을 실행하는 방법을 이해하는데 도움이 되는 시퀀스 다이어그램(그림 1) 도 소개한다.
그림 1. Philip McCarthy의 Ajax Roundtrip 시퀀스 다이어그램

이 다이어그램에서, XMLHttpRequest 객체가 어떻게 작동하는지 정확히 볼 수 있다. 웹 브라우저 내에서 실행되는 일부 JavaScript 조각들은 XMLHttpRequest 인스턴스와 비동기식 호출로서 작동하는 함수를 만들어 낸다. 스크립트는 XMLHttpRequest 객체를 사용하여 서버에 대해 HTTP 연산을 수행한다. 응답을 받으면, 콜백 함수가 호출된다. 콜백 함수 내에서, 리턴된 데이터가 처리될 수 있다. 데이터가 XML이라면, XMLHttpRequest 객체는 브라우저의 XML 프로세싱 방식을 사용하여 그 데이터를 자동으로 파싱한다.
안타깝게도, XMLHttpRequest 객체는 Ajax 방식이 실행되는데 어려움을 겪는 곳에서 XML을 자동으로 파싱한다. 예를 들어, 필자가 요청하는 데이터가 다른 많은 XML Namespaces에서 온 엘리먼트를 포함하고 있는 SOAP Envelope이고, 필자는 yetAnotherElement
에서 attr
애트리뷰트의 값을 얻어야 하는 경우를 생각해 보자. (Listing 1.)
Listing 1. 다중 네임스페이스를 가진 SOAP Envelope
<s:Envelope xmlns:s="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <s:Header/> <s:Body> <m:someElement xmlns:m="http://example"> <n:someOtherElement xmlns:n="http://example" xmlns:m="urn:example"> <m:yetAnotherElement n:attr="abc" xmlns:n="urn:foo"/> </n:someOtherElement> </m:someElement> </s:Body></s:Envelope> |
Mozilla와 Firefox 브라우저에서, attr
애트리뷰트의 값을 추출하는 것은 간단하다. (Listing 2)
Listing 2. Mozilla와 Firefox에서 attr 애트리뷰트를 가져오는 메소드는 Internet Explorer에서는 작동하지 않는다.
var m = el.getElementsByTagNameNS( 'urn:example', 'yetAnotherElement')[0]. getAttributeNS( 'urn:foo', 'attr');alert(m); // displays 'abc' |
![]() |
|
안타깝게도, 이 코드는 Internet Explorer Version 6에서는 작동하지 않는다. 이 브라우저는 getElementsByTagNameNS 함수를 구현하지 않고, 사실 다소 도움이 안되는 방식인 XML 네임스페이스 접두사가 엘리먼트와 애트리뷰트 이름의 일부인 것처럼 취급하는 방식을 취하기 때문이다.
Internet Explorer의 XML 네임스페이스 지원 부족으로 SOAP 같이 네임스페이스 중심의 XML 포맷을 브라우저와 독립된 방식으로 처리하기가 더욱 어렵다. 결과에서 애트리뷰트의 값을 얻는 것 같은 간단한 일을 수행하기 위해서, 여러분은 기대한 작동이 여러 브라우저에서도 일관되도록 특별한 케이스 코드를 작성해야 한다. 다행히도, 이러한 특수 케이스 코드는 캡슐화 및 재사용 될 수 있다.
웹 브라우저 내에서 웹 서비스를 호출하고 SOAP 메시지들을 신뢰성 있게 처리하려면, 보안 문제를 이해해야 한다. ("보안" 참조) 또한, 기반 브라우저 XML 구현들의 불일치를 제거할 수 있는 JavaScript 스크립트 라이브러리를 작성하고(그림 2), 웹 서비스 데이터와 직접 작동할 수 있어야 한다.
그림 2. Web Services JavaScript Library를 사용하여 웹 브라우저 내에서 JavaScript로부터 웹 서비스 호출하기

그림 2의 Web Services JavaScript Library (ws.js)는 JavaScript 객체들과 유틸리티 함수들의 컬렉션으로서, SOAP 1.1 기반 웹 서비스를 지원한다. ws.js는 다음 객체들을 정의한다.
- WS.Call: XMLHttpRequest를 래핑하는 웹 서비스 클라이언트
- WS.QName: XML 수식명 구현
- WS.Binder: 커스텀 XML 직렬화/비직렬화 베이스
- WS.Handler: 요청/응답 핸들러 베이스
- SOAP.Element: XML DOM을 래핑하는 기본 SOAP 엘리먼트
- SOAP.Envelope: SOAP.Element를 확장하는 SOAP Envelope 객체
- SOAP.Header: SOAP.Element를 확장하는 SOAP 헤더 객체
- SOAP.Body: SOAP.Element를 확장하는 SOAP 바디 객체
- XML: XML을 핸들링 하는 크로스 플랫폼 유틸리티 메소드
ws.js의 핵심에는 웹 서비스를 호출하는 메소드를 제공하는 WS.Call 객체가 있다. WS.Call은 기본적으로 XMLHttpRequest 객체와의 인터랙션과 SOAP 응답 프로세싱을 담당하고 있다.
WS.Call 객체는 다음과 같이 세 개의 메소드를 노출한다.
- add_handler. Request/Response 핸들러를 프로세싱 체인에 추가한다. Handler 객체들은 웹 서비스 호출 전후에 호출되어 확장성 있는 사전 사후 호출 프로세싱을 발생시킨다.
- invoke. 지정된 SOAP.Envelope 객체를 웹 서비스로 보내고 응답을 받으면 콜백을 호출한다. 리터럴 XML 인코딩을 사용하는 문서 스타일의 웹 서비스를 호출할 때 이 메소드를 사용한다.
- invoke_rpc. RPC-Style 요청을 캡슐화 하여 SOAP.Envelope을 만들고 이것을 웹 서비스로 보내면서, 응답을 받을 때 콜백을 호출한다.
WS.Call 객체는 일반적으로 XMLHttpRequest 객체의 맨 위에 있는 씬(thin) 래퍼일 뿐이지만, 여러분의 삶을 편하게 해주는 많은 액션을 수행한다. 이 액션에는 SOAP 1.1 스팩에서 필요로 하는 SOAPAction HTTP 헤더를 설정하는 것이 포함된다.
![]() |
![]()
|
Web services JavaScript Library에서 제공된 API는 다소 단순하다.
SOAP.* 객체들 (SOAP.Element
, SOAP.Envelope
, SOAP.Header
, SOAP.Body
)은 SOAP Envelopes를 구현하고 읽는 방식을 제공하여(Listing 3), XML 문서 객체 모델을 실행하는 상세를 없앤다.
Listing 3. SOAP Envelope 구현하기
var envelope = new SOAP.Envelope();var body = envelope.create_body();var el = body.create_child(new WS.QName('method','urn:foo'));el.create_child(new WS.QName('param','urn:foo')).set_value('bar'); |
Listing 4는 Listing 3의 코드에서 만들어진 SOAP Envelope이다.
Listing 4. SOAP Envelope 구현하기
<Envelope xmlns="http://schemas.xmlsoap.org"> <Body> <method xmlns="urn:foo"> <param>bar</param> </method> </Body></Envelope> |
여러분이 만들고 있는 SOAP Envelope가 RPC-Style 요청을 대표하는 것이라면, SOAP.Body 엘리먼트는 set_rpc
메소드(Listing 5)를 제공한다. 이것은 연산 이름, 인풋 매개변수의 어레이, SOAP 인코딩 스타일 URI에 주어진 요청의 전체 바디를 구현한다.
Listing 5. RPC-Request Envelope 구현하기
var envelope = new SOAP.Envelope();var body = envelope.create_body();body.set_rpc( new WS.QName('param','urn:foo'), new Array( {name:'param',value:'bar'} ), SOAP.NOENCODING); |
각각의 매개변수는 다음과 같은 프로퍼티를 가진 JavaScript 객체 구조로서 전달된다.
- name. 매개변수의 이름을 지정하는 스트링 또는 WS.QName 객체. 필수.
- value. 매개변수의 값. 값이 단순한 데이터 유형(스트링 또는 정수)이 아니라면, WS.Binder가 지정된다. 이것은 해당 XML 구조로 값을 직렬화 할 수 있다.필수.
- xsitype: 매개변수의 XML Schema Instance Type을 구분하는 WS.QName (예를 들어,
xsi:type="int"
라면,xsitype:new WS.QName('int','http://www.w3.org/2000/10/XMLSchema')
이다.) 선택. - encodingstyle.: 이 매개변수에 의해 사용되는 SOAP Encoding Style을 구분하는 URI. 선택.
- binder: 매개변수를 XML로 직렬화 할 수 있는 WS.Binder 구현. 선택
예를 들어, "abc"라는 이름을 가진 매개변수를 XML Namespace "urn:foo", "int"의 xsi:type, "3" 으로 지정하려면, 다음 코드를 사용한다: new Array({name:new WS.QName('abc','urn:foo'), value:3, xsitype:new WS.QName('int','http://www.w3.org/2000/10/XMLSchema')})
.
서비스 요청을 위해 SOAP.Envelope을 구현하면, 그 SOAP.Envelope을 WS.Call 객체 invoke
메소드로 보내서 Envelope 내부에 인코딩 된 메소드를 호출한다: (new WS.Call(service_uri)).invoke(envelope, callback)
SOAP.Envelope을 직접 구현하는 것에 대한 대안으로서, WS.QName, 매개변수 어레이, 인코딩 스타일을 WS.Call 객체의 invoke_rpc
메소드로 전달할 수 있다. (Listing 6)
Listing 6. WS.Call 객체를 사용하여 웹 서비스 호출하기
var call = new WS.Call(serviceURI); var nsuri = 'urn:foo';var qn_op = new WS.QName('method',nsuri);var qn_op_resp = new WS.QName('methodResponse',nsuri); call.invoke_rpc( qn_op, new Array( {name:'param',value:'bar'} ),SOAP.NOENCODING, function(call,envelope) { // envelope is the response SOAP.Envelope // the XML Text of the response is in arguments[2] } ); |
invoke
메소드 또는 invoke_rpc
메소드를 호출할 때, WS.Call 객체는 기반 XMLHttpRequest 객체를 만들고, SOAP Envelope를 포함하고 있는 XML 엘리먼트로 전달하고, 응답을 받아 파싱하며, 콜백 함수를 호출한다.
SOAP 메시지의 사전 및 사후 처리를 확장하기 위해, WS.Call 객체는 WS.Handler 객체의 컬렉션을 등록할 수 있다. (Listing 7) 이들은 호출 사이클 동안 모든 요청, 응답, 에러 시 호출된다. 새로운 핸들러가 WS.Handler JavaScript 객체를 확장함으로써 구현될 수 있다.
Listing 7. 요청/응답 핸들러 생성 및 등록하기
var MyHandler = Class.create();MyHandler.prototype = (new WS.Handler()).extend({ on_request : function(envelope) { // pre-request processing }, on_response : function(call,envelope) { // post-response, pre-callback processing }, on_error : function(call,envelope) { }});var call = new WS.Call(...);call.add_handler(new MyHandler()); |
핸들러들은 전달되는 SOAP Envelope에서 정보를 삽입 또는 추출하는 태스크에 가장 유용하다. 예를 들어, 적절한 Web Services Addressing 엘리먼트를 SOAP Envelope 헤더로 자동 삽입하는 것을 생각해 볼 수 있다. (Listing 8)
Listing 8. WS-Addressing Action 헤더를 요청에 추가하는 샘플 핸들러
var WSAddressingHandler = Class.create();WSAddressingHandler.prototype = (new WS.Handler()).extend({ on_request : function(call,envelope) { envelope.create_header().create_child( new WS.QName('Action','http://ws-addressing','wsa') ).set_value('http://www.example.com'); }}); |
WS.Binder 객체(Listing 9)는 SOAP.Element 객체의 커스텀 직렬화/비직렬화를 수행한다. WS.Binder 구현은 다음과 같은 두 개의 메소드를 제공해야 한다.
- to_soap_element. JavaScript 객체를 SOAP.Element로 직렬화 한다. 전달되는 첫 번째 매개변수는 직렬화 되는 값이다. 두 번째 매개변수 값은 SOAP.Element로 직렬화 되어야 한다. 이 메소드는 어떤 값도 리턴하지 않는다.
- to_value_object. SOAP.Element를 JavaScript 객체로 비직렬화 한다. 메소드는 비직렬화 된 값 객체를 리턴해야 한다.
Listing 9. WS.Binding 구현 샘플
var MyBinding = Class.create();MyBinding.prototype = (new WS.Binding()).extend({ to_soap_element : function(value,element) { ... }, to_value_object : function(element) { ... }}); |
![]() |
![]()
|
Web Services JavaScript Library의 기본 기능을 설명하는 샘플 객체를 설명했다. 이 데모에서 사용되는 웹 서비스(Listing 10)은 WebSphere Application Server에서 구현되고 간단한 Hello World 함수를 제공한다.
Listing 10. 간단한 자바 기반 Hello World 웹 서비스
package example;public class HelloWorld { public String sayHello(String name) { return "Hello " + name; }} |
서비스를 WebSphere Application Server로 구현 및 전개한 후에, 서비스의 WSDL 디스크립션(Listing 11)은 Hello World 서비스를 호출하기 위해 전달해야 하는 SOAP 메시지를 정의한다.
Listing 11. HelloWorld.wsdl의 코드
<wsdl:portType name="HelloWorld"> <wsdl:operation name="sayHello"> <wsdl:input message="impl:sayHelloRequest" name="sayHelloRequest"/> <wsdl:output message="impl:sayHelloResponse" name="sayHelloResponse"/> </wsdl:operation></wsdl:portType> |
Web Services JavaScript Library를 사용하여, Hello World 서비스를 호출하는 메소드를 구현할 수 있다. (Listing 12)
Listing 12. WS.Call을 사용하여 Hello World 서비스 호출하기
<html><head>...<script type="text/javascript" src="scripts/prototype.js"></script><script type="text/javascript" src="scripts/ws.js"></script><script type="text/javascript">function sayHello(name, container) { var call = new WS.Call('/AjaxWS/services/HelloWorld'); var nsuri = 'http://example'; var qn_op = new WS.QName('sayHello',nsuri); var qn_op_resp = new WS.QName('sayHelloResponse',nsuri); call.invoke_rpc( qn_op, new Array( {name:'name',value:name} ),null, function(call,envelope) { var ret = envelope.get_body().get_all_children()[0]. get_all_children()[0].get_value(); container.innerHTML = ret; $('soap').innerHTML = arguments[2].escapeHTML(); } );}</script></head>... |
웹 애플리케이션 어디에서나 sayHello
함수를 호출함으로써 Hello World 서비스를 호출할 수 있다. (Listing 13)
Listing 13. sayHello 함수 호출하기
<body><input name="name" id="name" /><input value="Invoke the Web Service" type="button" onclick="sayHello($('name').value,$('result'))" /><div id="container">Result:<div id="result"></div><div id="soap"></div></div></body> |
성공적인 호출은 Figure 3과 같은 결과를 만들어 낸다. 이 예제를 Mozilla, Firefox, Internet Explorer에서 실행하면 모두 같은 결과가 나온다.
그림 3. Firefox에서의 Hello World 예제

![]() |
![]()
|
Web Services JavaScript Library는 기본 SOAP 웹 서비스를 웹 애플리케이션에 통합하는데 사용될 수 있다. 다음 글에서는 라이브러리를 사용하여 WS-Resource Framework 스팩군에 기반한 고급 웹 서비스를 호출하는 방법과 웹 서비스 기능이 웹 애플리케이션으로 확장 및 통합되는 방법을 연구할 것이다.
![]() |
![]()
|
설명 | 이름 | 크기 | 다운로드 방식 |
---|---|---|---|
프로젝트 샘플 | ws-wsajaxcode.zip | 19 KB | HTTP |
![]() | ||||
![]() |
다운로드 방식에 대한 정보 | ![]() |
교육
- Ajax로 SOAP 웹 서비스 호출하기 -- 이 시리즈의 모든 Part 보기(영문).
- 동적 자바 애플리케이션 구현 (한글) -- Philip McCarthy의 자바 개발자를 위한 Ajax 소개 (한국 developerWorks, 2005년 9월).
- JavaScript 프레임웍
- XMLHttpRequest API
- Document Object Model을 활용하여 고급 웹 애플리케이션 만들기 -- Microsoft Internet Explorer 6.0을 사용한 XML 문서 객체 모델 (developerWorks, 2004년 2월).
- 모질라 웹사이트
제품 및 기술 얻기
- WebSphere Application Server: developerWorks에서 무료 시험판 다운로드.
토론
- developerWorks 블로그: developerWorks 커뮤니티 참여하기.
![]() | ||
|
![]() |
James Snell은 IBM의 WebAhead 개발 랩의 연구원이고, 여기에서 IBM 내부에서 사용할 소프트웨어 기술과 표준에 대한 프로토타입 개발을 수행하고 있다. 그의 관심 분야는 Atom, AJAX, REST, Open Source, 퍼스널 퍼블리싱 시스템, semantic web, situational application 등 광범위한 신 기술까지 포괄하고 있다. Apache Abdera의 활동적인 커미터이며, 최근에는 Atom Syndication Format과 Atom Publishing Protocol 표준의 구현 작업을 하고 있다. http://www.ibm.com/developerworks/blogs/dw_blog.jspa?blog=351. |
원문 출처 : http://www.ibm.com/developerworks/kr/library/ws-wsajax/
'Web > ajax' 카테고리의 다른 글
Ajax와 XML: 다섯 개의 추천할 만한 Ajax 위젯 (한글) (0) | 2009.01.12 |
---|---|
ASP.NET AJAX를 지원하지 않는 웹호스팅에 AJAX 사용하기 닷넷 (0) | 2009.01.12 |
Ajax와 XML: 최고의 Ajax 배우기 (한글) (0) | 2009.01.12 |
php java ajax 웹프로그래밍 기술서 출처 (0) | 2009.01.12 |