31-40까지..........
참고로 Ajax는 Asynchronous Javascript And Xml 의 약자이다.

비동기적 자바스크립트와 xml 이란 이야기다.
즉 이기술은 새로운게 아니라 기존의 것들의 잘 어우러짐을 이야기 하는게 아닌가 한다.

31----------------------------------------------------------------

Ajax에 사용된 기술을 보자

1. 자바 스크립트
-느슨한 타입의 스크립트 랭귀지
-자바스크립트 함수 호출은 페이지내에서 이벤트가 발생될때 이다.
-Ajax 처리 전반에 걸쳐 내포되어 있다.(떨어질려고 해도 떨어질수 없는 관계다.)

2. Dom
-문서의 구조를 다루거나, 접근에 대한 API
-XML과 HTML문서의 구조를 대표하는것

3. CSS
-내용과 자바스크립트로 변경을 가능하게하는것으로 분리적인 표현을 허가한다.

4.XMLhttpRequest
- 서버와의 비동기적 상호작용이 가능한 자바스크립트 개체

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

이 슬라이드는 Ajax에 사용된 기술을 보여주고 있다.

*자바스크립트 - 자바스크립트는 느슨한 타입의 개체를 기본적으로 하는 스크립팅 랭귀지이다. 거진 대부분의 브라우저에서 지원을 하며 그리고 Ajax기술의 기본적인 원천이다.
자바스크립트의 기능은 페이지
페이지내에서 자바스크립트는 이벤트 발생을 제어하는것이다. 예를 들어  페이지를 불러올때, 폼개체내의 마우스를 누를때 또는 키보드를 눌를때

*Dom - 이것은 문서의 접근과 처리를 위한 API 이다.
대부분의 경우 Dom은  XML 이나 Html의 문서의 구조를 대표한다.
(역자주: dom의 약자는 document object model 문서의 개체모델을 의미한다, 여기서
"일반적으로 Dom은  XML 이나 Html의 문서의 구조를 묘사한다" 같은 해석도 가능하지 않나싶다.
사실상 이글을 옮기는 이는 dom이 뭔지도 모른다.)

*CSS - 페이지내에서의 문서에 정의를 허락하는것으로 예를 들어 폰트, 칼라, 사이즈, 그리고 "위치" , CSS는 명확한 내용과, 자바를 통해서 변경하는것에 대한 명확한 방법의 분리를 허락한다.

*Http - 기본적 요청/응답의 상호작용을 이해하는 Http모델이 Ajax를 사용하여 개발하는 중요한것이다. 당신은 GET 그리고 PUT 방식을 XMLhttprequest와 http의 응답 코드가 callback처리될때 노출하게 될것이다.


32----------------------------------------------
XMLhttprequest

1. 자바스크립의 개체
2. 최신브라우저에 채택되어 있다.
-모질라, 파이어폭스, safari, and opera
3. 서버와의 통신은 Http get/post를 거쳐서 된다
4. xmlhttprequest 개체는 비동기적통신을 백그라운드 서버와 실행하는 동작을 한다.
- 유저의 조작에 무관하도록


*****************************************88

자 이제 XMLhttprequest에 대해서 약간 언급해 보도록 하자, 이것은 자바스크립트의 개체이다. 이것의 의미는 자바스크립트 코드 내의 생성을 가진다.

Xmlhttprequest 자바스크립트 개체는 최근의 브라우저에서 지원된다.

Ajax엔진은 http의 요청/응답의 상호작용이 백그라운드로 처리되는 방식이다.


33---------------------------------------

서버쪽의 Ajax 응답 처리
1. 서버 프로그램은 동일하다.
- 이것은 기본적인 http get/post 형태로 받는다.
- servlet, jsp, jsf 등을 사용할수 있다.

2. 조금 덜한 제한
- 좀 더 자주 그리고 클라이언트로부터의 좀 더 세분화된 요청
- 응답내용의 가능
--- text/xml
--- text/plain
--- text/json
--- text/javascript


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

자 이제 서버쪽의 프로그램에서 Ajax와 브라우저간의 상호작용은 어떻게될까?
서버쪽 코드가 연결된동안 이것은 단지 다른 http 요청이 들어오는것이다.
서버쪽은 브라우저에서 보내는 비동기적인 http 요청 방법을 모른다. 그리고 알수없다.

이것의 의미는 서버쪽 프로그램은 어떤서버의 기술을 선택해서 사용할수 있다는 것이다. 예를 들어서 servlet, jsp, jsf, struts 또는 무엇이든지 말이다.

서버쪽 프로그램은 어떻게 하든지 조금 덜한 제한을 가진다. 첫번째로 이것은 클라이트가 좀더 자주 보낼것이며 그리고 좀 더 세밀한 요청일것이다.
응답의 경우는 text/xml이거나 text/plain/ text/json 또는 text/javascript등이 될것이다.



34-----------------------------------------------
6. Ajax : Ajax의 상호작용의 내부구조
"data validation"을 통한 샘플 프로그램

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

이 파트내에서는 Ajax 의 내부구조를 "데이타 확인" 샘플 프로그램을 통해서 이해하도록 해보자.


35--------------------------------------------------

이제 우리가 이야기 해야할것은 ajax와 그리고 ajax로 만든 기술이다, 이모든것들의 조각을 함께 그리고 어떻게 내부적으로 처리가 되는지 보자

예제의 코드는 우리가 사용하게 될 "데이타 확인"의 예제이다.

여기에 입력데이타폼은 글자를 입력하도록, 이것은 슬라이드에 "1"번을 의미한다.
이것은 "onkeyup" 이벤트를 발생시키고 이 "onkeyup"이벤트는 Xmlhttprequest 개체를 생성하며 초기화 한다. 2번을 보아라.

XmlHttprequest 개체는 http 요청 따라 유저가 서버에 입력한것이 된다. 3번을 보아라

서버의 처리는 데이타의 확인과 그리고 결과를 돌려준다.
이것들은 4번과 5번이 표현하고 있다. 클라이언트의 콜백 함수는 그때 호출된다.
그 콜백함수는 다음으로 html 의 페이지내의 개체로 변하고 서버의 데이타를 받은것을 반영하게 된다.


36-----------------------------------------------

Ajax 처리 순서
1.A client event occurs
2.An XMLHttpRequest object is created
3.The XMLHttpRequest object is configured
4.The XMLHttpRequest object makes an async. request
5.The ValidateServlet returns an XML document containing the result
6.The XMLHttpRequest object calls the callback() function and processes the result
7.The HTML DOM is updated

1. 클라이언트 이벤트 발생
2. xmlhttprequest 개체가 생성된다.
3. xmlhttprequest 개체가 초기화된다.
4. xmlhttprequest 개체를 비동기.요청 으로 만듬
5. Validateservlet는 결과를 내포한 Xml 문서를 돌려준다.
6. xmlhttprequest 개체는 콜백함수와 실행결과를 부른다.
7. html dom이 업데이된다.

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

자 이 슬라이드는 Ajax처리 순서를 보여준다. 여기 나는 이것을 7단계로 표현해 두었다.
이것은 특정순서가 발생되는것이다. 자 이제 이 순서들의 파란색들은 클라이언트에서 발생되고 하나의 블랙칼라인 넘버 5번은 서버에서 발생된다.

(역자주: 색상을 표현하지 않았지만.. 5번만 블랙이고 나버지는 파란색으로 적혀있다.)

자 이제 각각의 스텝들을 좀 더 상세하게 이해해보기로 하자.



37--------------------------------------------------------
1. 자바 스크립트 함수들은 이벤트의 결과들로 인하여 호출된다.
2. Example: validateUserId() JavaScript function is mapped as a event handler to a onkeyup event on input form field whose id is set to “userid”

<input type="text"
size="20"
id="userid"
name="id"
onkeyup="validateUserId();">

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

사용자의 글자입력이 text폼 'userid" 필드에 입력될때 Ajax 처리 순서에 따른 이벤트가 발생된다. 이것은 유저의 이벤트 발생이 자바스크립트 "onkeyup"에 의하여 잡혀진다.
자바 스크립트 이벤트 처리는 validateuserid() 호출된 다음 결과가 불러진다.



38----------------------------------------------------------
2. An XMLHttpRequest object is created

var req;
function initRequest() {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function validateUserId() {
initRequest();
req.onreadystatechange = processRequest;
if (!target) target = document.getElementById("userid");
var url = "validate?id=" + escape(target.value);
req.open("GET", url, true);
req.send(null);
}


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

이 예제는 validateUserId() 이벤트 핸들러는 initrequest() 함수를 통해서 Xmlhttprequest 자바스크립트 개체를 생성한다.

주의해서 이방법을 보길 바란다 이것은 마이크로소프트 익스플로워에 생성하는것과 모질라타입의 브라우저에서 생성하는것과는 다르다.
모질라방식의 브라우저의 경우 "new Xmlhttprequest()"를 사용한다. 마이크로소프트의 익스플러워의 경우는 ActiveX 개체를 생성해야 한다. 이것은 브라우저중 하나가 이 기술을 호환하지 않기때문이다.

(역자주 : 실제적으로 xmlhttprequest기술적인것은 ms에서 먼저 만들어 activeX타입으로 만들어 사용했다고 알려져 있다 그뒤에 썬시스템과 여러다른곳들이 실제적인 형태의 규격을 마련했다고 한다. 그래서 MS익스는 ativeX타입으로 가능한것이고 MS익스의 7버전부터는 호환이 된다고 한다. 즉.. ACtiveX타입이 아니라 그냥 개체생성이 가능할것이다.
하지만.. 이글은 약간의 비꼬음 같이 왜 아직도 익스는 이 기술이 안되냐 너때문에 이렇게 두줄로 체크옵션을 적어야 한다는 분위기를 풍긴다.)


39------------------------------------------------------

3. An XMLHttpRequest object is configured with a callback function

var req;
function initRequest() {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function validateUserId() {
initRequest();
req.onreadystatechange = processRequest; // callback function
if (!target) target = document.getElementById("userid");
var url = "validate?id=" + escape(target.value);
req.open("GET", url, true);
req.send(null);
}

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

Xmlhttprequest 개체는 한번 생성된다. 다음으로 할것은 Xmlhttpreqeust 개체에서 콜백함수로 보내는 것의 onreadystatechange속성을 설정하는것이다.
--> req.onreadystatechange = processRequest; // callback function
이 콜백함수는 xmlhttpreqeust 일어나는 언제든지 비동적으로 호출된다. 이 예제에서는 콜백함수의 이름은 "processRequest", 이것은 우리가 이 소스를 보면 알수 있을것이다. 우리는 나중에 이 상태들이 어떻게 바꾸어지는것에 대해 이야기 할것이다.


40-----------------------------------------------------------
4. XMLHttpRequest object makes an async. request

function initRequest() {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function validateUserId() {
initRequest();
req.onreadystatechange = processRequest;
if (!target) target = document.getElementById("userid");
var url = "validate?id=" + escape(target.value);
req.open("GET", url, true);
req.send(null);
}
• URL is set to validate?id=greg

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


Xmlhttprequest 의 "open"의 방법으로 불러진다. "open" 방법이 요구하는것은 3가지의 속성이다. : 
Http방법 이것은 GET 또는 POST;
서버의 URL component는 개체와 함께 상호작용을 한다;
그리고 boolean은 불러지는것이 비동기적으로 만들어지는것인지 아닌것인지를 알려준다.
이 예제에서는 그리고 대부분의 경우에 이것은 "true"를 가지고 이것의 의미는 Http 요청/응답의 상호작용이 비동적 방법으로 발생한다는 것이다.

req.open("GET", url, true);  <-----------------------






*** 오류에 대해서
is created 같은 수동태의 경우를
"생성된다"고 적어야 되지만.
때로는 만들어진다. // 생성한다.
같은 대략의 의미로 적은부분이 있다.

문맥상은 크게 문제가 없지 않나 싶긴하지만.. 생성되는것과 / 생성하는것은
명확하게는 다를수 있다는것에 의의는 없다 하지만 다 글 적는 이의 게으름과 무식으로 인하여 수동태를 정확하게 적지 않았음을 시인한다.

예를 들어서
A JavaScript function is called as the result of an event
"이벤트의 결과들로 자바스크립트 함수가 호출된다."를
"이벤트의 결과들은 자바스크립트 함수를 호출한다."같으 경우로 적었을때가 있은듯 싶다.

여하튼 감안해서 글을 보기 바란다. 대충 대충 적은글임을 여지없이 강조하며
원문을 보길 권한다.<div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]</div>