28과 29페이지의 내용에 의위 그림을 참고하시기 바랍니다.
추가된 pdf파일은 현재 번역중인것입니다.


21----------------------------------------------------------------------------

Ajax 의 사용되어지는 형태

1. 데이타의 확인을 위한 실시간적인 서버측의 입력폼
-유저의 아이디 또는 시리얼 번호, 우편번호
-클라이언트에서의 유저의 대응과 서버에서 보안적인형태같은 이유의 양쪽의 확인로직의 필요성을 제거할수 있다.

2. 자동완성
이메일 주소, 이름, 또는 도시의 이름등이 유저의 입력에 따라 자동적으로 완성된다.

3. 뛰어난 상세 작업
유저의 선택을 기준으로, 좀 더 정밀정보를 실행하거나 표현할수 있다.

********************************************

Ajax를 사용하는 상호작용은 아래의 내용과 같다.

서버의 실시간적인 확실한 입력 폼데이타 : 폼데이타들은 유저의 아이디나, 시리얼 번호, 우편번호나 또는 특별한 쿠폰의 번호같은 서버의 정보를 AJax를 통하여 확인 요구하는것이 가능하다.
현재, 일반적으로 프로그램들은 서버와 클라이언트 둘다 확인 로직을 가져야 한다.
전자의 유저의 응답의 목적인경우 그리고 문자의 보안성때문에 그리고 다른이유로
확인같은것은 마지막으로 사용해야 한다.
이제 다른두곳에서의 확인로직을 프로그램에서 유지하는 문제가 있다면..
이제부터 AJAX를 사용하는것으로 그 필요성이 사라질것이다. 다른두곳에서의 확인 로직이 말이다.

자동완성 : 폼 데이타의 특정부분은 예를들자면 이메일 주소, 이름, 또는 도시의 이름들은 사용자의 입력으로 자동적으로 완성되어질것이다.

뛰어난 상세 작업 : 유저가 무엇을 선택하는것을 기준으로 좀 더 상세한 정보를 찾거나 또는 표현할수 있을것이다. 예를 들자면 만약 유저의 선택이 온라인 쇼핑 페이지에서의 생산자의 정밀한 정보를 찾는것을 하거나 또는 나타낼것이다. 페이지를 다시금 표현하지 않고서 말이다.



22----------------------------------------------------------------------
AJAX의 사용 형태

1. 진보적인 GUI 장치나 컨트롤의 형태
-컨트롤은 예컨데 Tree controls, Menus, 그리고 Progress bars 페이지를 다시금 표현하는것을 요하지 않는것들

2. Refreshing data
Html 페이지의 서버로부터의 처리되어지는 집계데이타 예를 들어서 스코어, 주식, 날씨, 또는 응용프로그램들의 특정 데이타

3. 서버쪽의 정보로 가장할수 있다.
HTML 페이지의 백그라운드를 통한 서버의 집계정보의 가상 공지

*********************************************

이것은 더 많은 형태의 AJAX  의 예제들이다.

- 진보적인 유저 인터페이스 컨트롤 : 콘트롤은 예를 들어서 트리, 메뉴 그리고 프로그래스바등을 페이지의 재생(refesh)없이 보여줄수 있다.

- 페이지내에서 데이타의 재생(refesh) : HTML 페이지의 서버내의 집계되는 데이타들은 예를 들자면 스코어, 주식, 인용구, 날씨  또는  특정한 프로그램 데이타 같은것들

서버쪽의 공지 : 사용자가 보여지는 페이지는 refesh없이 나타낼수 있거나 또는 클라이언트의 페이지 주소를 redirect형태로 다른페이지를 연결할수 있으므로 가상적인 형태의 서버의 정보를  HTML페이지에 나타내어줄수 있다.
(역자주:심히 의심스러운.. 번역이다. 개인적 느낌으로는 사용자가 보여지는 페이지의 내용이 꼭 그 사이트의 서버가 아닌 정보를 보여줄수도 있다는 의미로 해석해야될듯 싶다.)


23-------------------------------------------------------------------------
Ajax : demo
Ajax sample apps
that come with
Netbeans IDE

****************************************8
자.. 이제 Ajax의 샘플 프로그램을 실행해보겠다. NetBeans IDE를 이용해서


24--------------------------------------------------------------------------

Demo Scenario 데모 시나리오

1. 샘플 Ajax 프로그램을 NetBeans IDE에서 실행하자.
- 자동 완성
- Data 확인
- Progress bar

2. 스스로 이 데모를 해볼수 있다.
- 이것들(프로그램)은 NetBeans안에서 제작되어지도록 지원한다.


************************************************

NetBeans은 서버의 Ajax샘플 프로그램과 함께 제공제어진다.
이제 "자동완성 Auto completion", "data validation" and "progress bar"의 샘플 프로그램을 실행해보도록 하자.

25------------------------------------------------------------------------


4. Ajax:
왜 Ajax를 이며 무엇을 인가?

****************************************

이제까지, 우리는 기존의 프로그램 그리고 우리는 Ajax어떻게 작동할수 있다는 주제를 가지고 이야기 해왔다.

이제 Ajax가 무엇이고 좀 더 세부적인(작동기능적인) 관점을 가져보자
원문---> Now let's talk about what AJAX is from a bit more “under the hood” standpoint.


26------------------------------------------------------------------------

왜 Ajax인가.

1.즉각적이며 자연적인 유저와의 상호작용
-클릭을 요구하지 않으며
-마우스의 동작만으로 충분한 이벤트를 발생시킬수 있다.

2. "클릭, 기다림, 그리고 재생(다시 화면이 나옴)" 형태의 사용자와의 상호작용형태를  "부분적 화면 갱신"으로 바뀐다
-단지 사용자의 개체는 새로운 정보가 갱신된다(빠른 반응적으로)
-사용자의 보여지는 부분이외의 곳은 방해없이 그대로 남아있게된다.
(조작하고 있는 상황이 그대로 유지된다.)

3. 데이타 처리방식(페이지 처리방식의 반대적이다.)
- UI의(유저인터페이스) 클라이언트에서 처리적이다. 서버에서 데이타를 제공하는것으로

당신이 보았듯이, Ajax 형태의 웹 프로그램은 좀 더 자연스럽고 즉각적인 상호작용을 따른다. 예를 들자면 기존적인 형태의 웹 프로그램과는 닮지 않았다. 일단은 링크나 버튼을 클릭하여 이벤트를 발생할 필요가 없다. 마우스의 움직임 또는 글자를 입력함으로 충분한 이벤트를 발생시킬수 있다.

Ajax형태의 프로그램은, 스크린의 일부분만 갱신하므로 클릭후 기다리고 다시 전체의 화면이 나타나는것을 대체할수 있는 모델이다. 부분적인 화면 갱신의 의미는 단지 개체가 새로운 정보를 가진것을 갱신한다 페이지의 나머지부분은 여전히 남아 동일하게 남아있으면 그로인하여 현재의 상황이 계속 유지된다.

Ajax의 다른양상은 Ajax는 클라이언트와 서버간 페이지 처리방식보다 좋은 데이타 처리방식의 상호작용이 가능하다. 다른말로 클라이언트네에서의 유저인터페이스로 서버에서 제공받는 데이타를 처리할수 있다. 이런 일반적은 결과는 아주 좋은 성능이며, bandwidth를 줄이며, 서버를 불러오는작업을 줄일것이다 그리고 사용자에게 좀 더 좋은 환경을 제공한다.


27------------------------------------------------
왜 Ajax인가
1.  "동기적 요청/응답 모델" 의 대체 비동기적 통신
- 유저는 계속적으로 프로그램을 사용할수 있다. 클라이언트의 프로그램에서 서버에게 백그라운드로 정보를 요청하는 동안 말이다.
- 데이타의 처리와 표현하는것을 분리한다.

***************************************************8

이 이름은 이미한다. Ajax 는 브라우저와 서버간의 비동기적 통신을 하도록한다. 이것의 의미는 유저의 환경이 유저는 계속 기능을 사용하며 그 내부적으로는 브라우저는 http의 요청과 응답의 상호작용을 실행한다.
백그라운드내의 비동기적. 다른말로 데이타 처리하는것의 처리는 Ajax모델의 상호작용 내부에서의 정보를 표현하는것으로 부터 독립적이이다.


28----------------------------------------------------------------------

--(역자주 : 상단 제일위에 있는 그림을 참고 하시길 바랍니다. 28페이지)

이그림을 아마도 한번쯤 보았을것이라 생각합니다. 이 그림은 그림의 반쪽윗부분은 고전적인형태의 웹 프로그램이고 하단부분은 Ajax형태의 웹 프로그램입니다.

윗쪽을 보시죠. 이것은 유저와의 상호작용이 예전 웹 어플리케이션에서 어떻게 이루어지는지 보여줍니다. 이것은 유저가 응답이 오기까지의 기다리거나 멈추어진상태가 되어야 합니다. 이것의 의미는 데이타의 처리가 유저의 작동의 의해 관섭받기때문입니다.

하단의 그림은 보여주고 있습니다. AJAX의 경우, 이 경우의 모델은 유저는 여저히 조작을 하고 있는상태에서 백그라운드로 데이타의 처리가  이루어집니다.


29------------------------------------------------------------------------

--(역자주 : 상단의 그림을 참고)

어떻게 AJAX 형태의 어플리케이션은 비동기적으로 서버와 통신을 할까요?

이 슬라이드(그림)는 또한 예전의 경우와(왼쪽) ajax의 경우를 보여주고 있습니다.
HTTP request/response 의 상호작용이 직접적으로 브라우저와 backend web application 간에 발생됩니다.

오른쪽을 보시면 Ajax형태의 프로그램입니다. 회색톤의 브라우저 영역에 Ajax엔이 있습니다.
이것이 자바스크립트 개체로서 XMLHttpRequest를 호출합니다. 이것은 Http request/reponse 상호작용을 비동적 방식으로 처리합니다.

30------------------------------------------------------------------

Ajax

Technologies used in Ajax

자.. 이제 Ajax를 기반하고 있는 기술에 대해서 알아보자


-------------------------------------------------------------------

다음글에서 계속 ////////////////

역자주 : *** 오류에 대해서 **
본문의 application 은 거진 프로그램으로 적어두었다.
즉 program이나 application의 구분의 거진 두지 않았고 실제적으로 application의 단어를
많이 사용한듯 싶다.
둘다 프로그램으로 적어둔것은.. 문맥상 이게 편해서 이다.

experience  는 경험이나 체험이 되겠지만.. 분명 문맥상 명사로 사용된 이것이 좀 난감한게 아닌가 한다

일종의 user experience의 경우라면.. "유저의 체험" 정도로 번역이 되는것이 완만한듯 하고
경우에 따라서는 "유저의 환경"에 같이.. 대략적 문맥으로 맞추어 적은것도 있음을 시인하다.

당연히 experience와 "환경" 이란 단어와는 절대적으로 무관하다... 그러니 번역하는넘이 부족하다는것이다.

backend 의 경우는 일반적으로 background 형태로 많이 사용되는 의미로 인식이 되어서
예를 들어서 멀티테스킹에서 후면부쪽으로 프로그램을 실행하는것을 의미한다고 생각된다.

backend 는 "후미" 라는 의미가 있지만.. 대략 백그라운드적인 형태로 적었거나.. 그냥 대충 적었음을
알려둔다.


그외 여타 많은 것들을 대충 적었음을.. 미리 공지한다. 그리고 앞으로도 그럴지도 ^^;;<div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:49:28 Prototype에서 이동 됨]</div>