Ajax강의- 첫번째 강의의 pdf중 발표문건 41-50
참 느리게 40페이지까지 온듯 싶다.
다음주나.. 시간이 더 허락하는 시간대에는.. 20페이지 단위라도
번역의 페이지를 늘려보도록 하겠다.. 물론 좀 더 대충의 번역이 될지는 모르겠지만
41------------------------------------
5. The ValidateServlet returns an XML document containing the results (Server)
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
String targetId = request.getParameter("id");
if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
response.setContentType("text/xml ");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<valid>true</valid>");
} else {
response.setContentType("text/xml ");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<valid>false</valid>");
}
}
*********************************************
자 http응답이 만들어 졌다. 첫번째로 내용의 형식을 text/xml로 정하고
두번째로 캐쉬-콘트롤을 no-cache로 하자
캐쉬 콘트롤을 : no-cache로 하는것은 지역캐쉬에서 응답이 브라우저에 사용되는것을 방지한다. 마지막으로 이것은 "ture" 또는 "false" 의 xml 조각을 돌려준다.
42-----------------------------------------
6. XMLHttpRequest object calls callback() function and processes the result
• The XMLHttpRequest object was configured to call the processRequest() function when there is a state change to the readyState of the XMLHttpRequest object
function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
var message = ...;
***********************************************
저 콘트롤은 클라이언트에게 돌아간다. 우리는 3번째 단계를 보았다. 저 processRequest 함수는 콜백함수로 정의되었다. 언제든지 저것은 Xmlhttprequest개체의 readystate 필드의 상태를 바꾼다.
두가지의 합성은 - Xmlhttprequest의 readystate는 4이고 status는 200이다. 클라이언트로인하여 성공적인 서버의 데이타를 가르킨다.
43-----------------------------------------------
7. 업데이트된 HTML의 문서구조(The HTML DOM is updated)
--자바스크립트 기술은 페이지내의 어떤 DOM API를 사용하여도 참조를 가질수 있다.
--개체구조를 가지는 방법으로 추천되는 것은
document.getElementById("userIdMessage"),
"userIdMessage"가 개체의 html문서의 id속성이 나타남
-- 자바 스크립트 기술은 개체의 속성을 변경하는것에 사용되어져왔다. ; 개체의 스타일의 속성을 변경; 또는 더하거나, 또는 제거, 또는 하위 구조를 변경
**************************************************88
데이타는 성공적으로 받아졌을때. 그 브라우저는 적절한 메세지를 표시하도록 준비한다.
당신이 메세지를 표기하기 위하여 원하는 그 위치는 페이지내의 <div>개체로 묘사된다
당신의 자바스크립트 코드는 페이지내의 DOM API를 사용하여 참조를 가진다.
추천적인 방법으로 getElementByld 사용하거나 그리고 네가 id의 변수를 넘기는것이다.
이 예제의 내용으로는 <div> id 개체를 "userIdMessage" 로 정한다.
당신이 개체의 참조를 가질때, 당신이 원하는것을 할수있을것이다.
예를 들자면 개체의 값을 바꾼다거나, 개체의 스타일 또는 더하거나/제거/하부요소의 수정
이 예제는 하부의 text node추가하
이 예제는 텍스트 노드를 "userIdmessage" 개체의 하부개체로 추가한다.
(역자주: 여기서 element를 그냥 개체라고 적었다. 요소라고 적기에도 그렇고
개체라고 적기에도 object와 혼돈스럽긴하다.. 참고로 원문을 첨부한다.)
Now the location where you want to display a message is
represented by <div> element in the page. In your Javascript
code, you get a reference to any element in a page using
DOM API. And the recommended method to use is
getElementById and you pass the id as a parameter. In this
example, the id of the <div> element is set as
“userIdMessage”. Once you have a reference to an element,
you can do pretty much anything you want to do, for example,
changing the values of element attributes, element style or
add/remove/modify the child elements.
In this example, you are going to add text node as a child
element to the “userIdMessage” element.
44----------------------------------------------------------------------
1. <script type="text/javascript">
2. function setMessageUsingDOM(message) {
3. var userMessageElement = document.getElementById("userIdMessage");
4. var messageText;
5. if (message == "false") {
6. userMessageElement.style.color = "red";
7. messageText = "Invalid User Id";
8. } else {
9. userMessageElement.style.color = "green";
10. messageText = "Valid User Id";
11. }
12. var messageBody = document.createTextNode(messageText);
13. // if the messageBody element has been created simple replace it otherwise
14. // append the new element
15. if (userMessageElement.childNodes[0]) {
16. userMessageElement.replaceChild(messageBody,
17. userMessageElement.childNodes[0]);
18. } else {
19. userMessageElement.appendChild(messageBody);
20. }
21.}
22.</script>
23.<body>
24. <div id="userIdMessage"></div>
25.</body>
*****************************************************************
(역자주: object가 들어가 있는 문장이라서 element를 요소라든지.. 다른형태의 단어로
처리하겠다.)
문서 개체의 방법으로 getElementbyId의 요소를 사용하여 <div> 개체의 참조를 가진다.
그리고 서버의 "false" or "ture" 데이타에 의존하여 돌려준다. , "messageText"
변수는 설정을 다른것도 "invalid user id" 또는 "valid user id" 문제로 지정한다.
새로운 text node는 즉시 만들어지며 "messageText" 변수로 사용되어진다. 그러면 이것은 "useridmessage" 요소의 하부로 더해진다. 브라우저는 즉시 페이지에 글자를 표시한다.
그래서 이페이지에 단지 useridmessage 요소만으로 부분적인 업데이트가 발생된다.
45 --------------------------------------------------------
7. AJAX:
XMLHttpRequest XMLHttpRequest
Methods & Properties
*****************88
자 이제 Xmlhttprequest 방법과 속성에 대해서 빠르게 이해해 보자.
46----------------------------------------------------
XMLHttpRequest Methods
• open(“HTTP method”, “URL”, syn/asyn)
> Assigns HTTP method, destination URL, mode
• send(content)
> Sends request including string or DOM object data
• abort()
> Terminates current request
• getAllResponseHeaders()
> Returns headers (labels + values) as a string
• getResponseHeader(“header”)
> Returns value of a given header
• setRequestHeader(“label”,”value”)
> Sets Request Headers before sending
**********************************************
이것은 xmlhttprequest 개체의 방법의 목록이다.
가장중요한 방법은 open() and send() methode이다.
open method 설정은 xmlhttprequest 개체와 http method, 목적 usr, 그리고 호출 방법
send method 서버로 요청을 보낸다. 중지하는것 현재의 요청을 끝낸다. 나머지 방법은 요청 또는 응답 메세지의 해더 정보를 가지는것이다.
47--------------------------------------------------------
XMLHttpRequest Properties
• onreadystatechange
> Set with an JavaScript event handler that fires at each state
change
• readyState – current status of request
> 0 = uninitialized
> 1 = loading
> 2 = loaded
> 3 = interactive (some data has been returned)
> 4 = complete
• status
> HTTP Status returned from server: 200 = OK
*******************************************************
이것은 Xmlhttprequest 개체의 속성들이다. 당신은 이미 "onreqdystatechange" 속성을 보았을것이다. 이것은 콜백 이벤트핸들러로 설정되어 있다.
실제적인 상태는 readystate 속성으로 알게된다. 콜백이벤트 핸들러는 "onreadystatechange" 속성이 매번"readystate" 값을 바꾸는것을 셋팅한다.
가장중요한 값인 4는 이것이 가르키는것은 서버의 상호작용의 처리가 되었음을 이야기한다.
이 상태속성은 http의 상태를 반영하고 그리고 200의 의미는 성공적인 응답이다.
48---------------------------------------------------
XMLHttpRequest Properties
• responseText
> String version of data returned from the server
• responseXML
> XML document of data returned from the server
• statusText
> Status text returned from server
**********************************************
이것은 Xmlhttprequest개체 속성의 계속적인 것이다. 서버로 받은 데이타를 반영하는 속성이다. responseText 속성은 responseXML 속성이 xml의 데티아틀 묘사하도록 되어있으면 서버로부터 문자형태의 데이타를 돌려받는다.
49-----------------------------------------
8. AJAX: DOM API & 8. AJAX: DOM API &
InnerHTML
****************************************
이제 Dom Api에 대해서 조금 더 이해해보도록 하자
50---------------------------------------------
브라우저와 DOM
1. 브라우저들은 문서가 나타나진 형태의 개체들을 유지한다.
-- Dom(문서 개체모델)의 폼
-- 이것은 즉시 자바스크립트의 개체로 사용할수 있다.
2. api들은 자바스크립트 코드로 DOM을 프로그램적으로 수정이 가능하다
********************
브라우저들은 html문서가 표현되어진 개체를 유지한다. 그리고 이 개체들은 Dom 개체 폼의 안에 있다.
말했듯이, 자바스크립트 코드 안쪽에 프로그램적으로 Dom 개체어 접근할수 있다.dom api들을 사용하여 예를 들어서 access, modify 또는 delete등을 dom api를 통해서 할수 있다.<div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:55:28 jQuery에서 이동 됨]</div>
다음주나.. 시간이 더 허락하는 시간대에는.. 20페이지 단위라도
번역의 페이지를 늘려보도록 하겠다.. 물론 좀 더 대충의 번역이 될지는 모르겠지만
41------------------------------------
5. The ValidateServlet returns an XML document containing the results (Server)
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
String targetId = request.getParameter("id");
if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
response.setContentType("text/xml ");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<valid>true</valid>");
} else {
response.setContentType("text/xml ");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<valid>false</valid>");
}
}
*********************************************
자 http응답이 만들어 졌다. 첫번째로 내용의 형식을 text/xml로 정하고
두번째로 캐쉬-콘트롤을 no-cache로 하자
캐쉬 콘트롤을 : no-cache로 하는것은 지역캐쉬에서 응답이 브라우저에 사용되는것을 방지한다. 마지막으로 이것은 "ture" 또는 "false" 의 xml 조각을 돌려준다.
42-----------------------------------------
6. XMLHttpRequest object calls callback() function and processes the result
• The XMLHttpRequest object was configured to call the processRequest() function when there is a state change to the readyState of the XMLHttpRequest object
function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
var message = ...;
***********************************************
저 콘트롤은 클라이언트에게 돌아간다. 우리는 3번째 단계를 보았다. 저 processRequest 함수는 콜백함수로 정의되었다. 언제든지 저것은 Xmlhttprequest개체의 readystate 필드의 상태를 바꾼다.
두가지의 합성은 - Xmlhttprequest의 readystate는 4이고 status는 200이다. 클라이언트로인하여 성공적인 서버의 데이타를 가르킨다.
43-----------------------------------------------
7. 업데이트된 HTML의 문서구조(The HTML DOM is updated)
--자바스크립트 기술은 페이지내의 어떤 DOM API를 사용하여도 참조를 가질수 있다.
--개체구조를 가지는 방법으로 추천되는 것은
document.getElementById("userIdMessage"),
"userIdMessage"가 개체의 html문서의 id속성이 나타남
-- 자바 스크립트 기술은 개체의 속성을 변경하는것에 사용되어져왔다. ; 개체의 스타일의 속성을 변경; 또는 더하거나, 또는 제거, 또는 하위 구조를 변경
**************************************************88
데이타는 성공적으로 받아졌을때. 그 브라우저는 적절한 메세지를 표시하도록 준비한다.
당신이 메세지를 표기하기 위하여 원하는 그 위치는 페이지내의 <div>개체로 묘사된다
당신의 자바스크립트 코드는 페이지내의 DOM API를 사용하여 참조를 가진다.
추천적인 방법으로 getElementByld 사용하거나 그리고 네가 id의 변수를 넘기는것이다.
이 예제의 내용으로는 <div> id 개체를 "userIdMessage" 로 정한다.
당신이 개체의 참조를 가질때, 당신이 원하는것을 할수있을것이다.
예를 들자면 개체의 값을 바꾼다거나, 개체의 스타일 또는 더하거나/제거/하부요소의 수정
이 예제는 하부의 text node추가하
이 예제는 텍스트 노드를 "userIdmessage" 개체의 하부개체로 추가한다.
(역자주: 여기서 element를 그냥 개체라고 적었다. 요소라고 적기에도 그렇고
개체라고 적기에도 object와 혼돈스럽긴하다.. 참고로 원문을 첨부한다.)
Now the location where you want to display a message is
represented by <div> element in the page. In your Javascript
code, you get a reference to any element in a page using
DOM API. And the recommended method to use is
getElementById and you pass the id as a parameter. In this
example, the id of the <div> element is set as
“userIdMessage”. Once you have a reference to an element,
you can do pretty much anything you want to do, for example,
changing the values of element attributes, element style or
add/remove/modify the child elements.
In this example, you are going to add text node as a child
element to the “userIdMessage” element.
44----------------------------------------------------------------------
1. <script type="text/javascript">
2. function setMessageUsingDOM(message) {
3. var userMessageElement = document.getElementById("userIdMessage");
4. var messageText;
5. if (message == "false") {
6. userMessageElement.style.color = "red";
7. messageText = "Invalid User Id";
8. } else {
9. userMessageElement.style.color = "green";
10. messageText = "Valid User Id";
11. }
12. var messageBody = document.createTextNode(messageText);
13. // if the messageBody element has been created simple replace it otherwise
14. // append the new element
15. if (userMessageElement.childNodes[0]) {
16. userMessageElement.replaceChild(messageBody,
17. userMessageElement.childNodes[0]);
18. } else {
19. userMessageElement.appendChild(messageBody);
20. }
21.}
22.</script>
23.<body>
24. <div id="userIdMessage"></div>
25.</body>
*****************************************************************
(역자주: object가 들어가 있는 문장이라서 element를 요소라든지.. 다른형태의 단어로
처리하겠다.)
문서 개체의 방법으로 getElementbyId의 요소를 사용하여 <div> 개체의 참조를 가진다.
그리고 서버의 "false" or "ture" 데이타에 의존하여 돌려준다. , "messageText"
변수는 설정을 다른것도 "invalid user id" 또는 "valid user id" 문제로 지정한다.
새로운 text node는 즉시 만들어지며 "messageText" 변수로 사용되어진다. 그러면 이것은 "useridmessage" 요소의 하부로 더해진다. 브라우저는 즉시 페이지에 글자를 표시한다.
그래서 이페이지에 단지 useridmessage 요소만으로 부분적인 업데이트가 발생된다.
45 --------------------------------------------------------
7. AJAX:
XMLHttpRequest XMLHttpRequest
Methods & Properties
*****************88
자 이제 Xmlhttprequest 방법과 속성에 대해서 빠르게 이해해 보자.
46----------------------------------------------------
XMLHttpRequest Methods
• open(“HTTP method”, “URL”, syn/asyn)
> Assigns HTTP method, destination URL, mode
• send(content)
> Sends request including string or DOM object data
• abort()
> Terminates current request
• getAllResponseHeaders()
> Returns headers (labels + values) as a string
• getResponseHeader(“header”)
> Returns value of a given header
• setRequestHeader(“label”,”value”)
> Sets Request Headers before sending
**********************************************
이것은 xmlhttprequest 개체의 방법의 목록이다.
가장중요한 방법은 open() and send() methode이다.
open method 설정은 xmlhttprequest 개체와 http method, 목적 usr, 그리고 호출 방법
send method 서버로 요청을 보낸다. 중지하는것 현재의 요청을 끝낸다. 나머지 방법은 요청 또는 응답 메세지의 해더 정보를 가지는것이다.
47--------------------------------------------------------
XMLHttpRequest Properties
• onreadystatechange
> Set with an JavaScript event handler that fires at each state
change
• readyState – current status of request
> 0 = uninitialized
> 1 = loading
> 2 = loaded
> 3 = interactive (some data has been returned)
> 4 = complete
• status
> HTTP Status returned from server: 200 = OK
*******************************************************
이것은 Xmlhttprequest 개체의 속성들이다. 당신은 이미 "onreqdystatechange" 속성을 보았을것이다. 이것은 콜백 이벤트핸들러로 설정되어 있다.
실제적인 상태는 readystate 속성으로 알게된다. 콜백이벤트 핸들러는 "onreadystatechange" 속성이 매번"readystate" 값을 바꾸는것을 셋팅한다.
가장중요한 값인 4는 이것이 가르키는것은 서버의 상호작용의 처리가 되었음을 이야기한다.
이 상태속성은 http의 상태를 반영하고 그리고 200의 의미는 성공적인 응답이다.
48---------------------------------------------------
XMLHttpRequest Properties
• responseText
> String version of data returned from the server
• responseXML
> XML document of data returned from the server
• statusText
> Status text returned from server
**********************************************
이것은 Xmlhttprequest개체 속성의 계속적인 것이다. 서버로 받은 데이타를 반영하는 속성이다. responseText 속성은 responseXML 속성이 xml의 데티아틀 묘사하도록 되어있으면 서버로부터 문자형태의 데이타를 돌려받는다.
49-----------------------------------------
8. AJAX: DOM API & 8. AJAX: DOM API &
InnerHTML
****************************************
이제 Dom Api에 대해서 조금 더 이해해보도록 하자
50---------------------------------------------
브라우저와 DOM
1. 브라우저들은 문서가 나타나진 형태의 개체들을 유지한다.
-- Dom(문서 개체모델)의 폼
-- 이것은 즉시 자바스크립트의 개체로 사용할수 있다.
2. api들은 자바스크립트 코드로 DOM을 프로그램적으로 수정이 가능하다
********************
브라우저들은 html문서가 표현되어진 개체를 유지한다. 그리고 이 개체들은 Dom 개체 폼의 안에 있다.
말했듯이, 자바스크립트 코드 안쪽에 프로그램적으로 Dom 개체어 접근할수 있다.dom api들을 사용하여 예를 들어서 access, modify 또는 delete등을 dom api를 통해서 할수 있다.<div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:55:28 jQuery에서 이동 됨]</div>
|
댓글을 작성하시려면 로그인이 필요합니다.