참 느리게 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>
게시글 목록
| 번호 | 제목 |
|---|---|
| 11470 |
PHP
64비트용 php5.1
|
| 11469 | |
| 11468 | |
| 11457 | |
| 29100 | |
| 11448 | |
| 11444 |
Flash
화이어폭스에서 플래시투명하게..
3
|
| 24851 | |
| 29091 |
HTML
포토샵팁 73가지
8
|
| 11440 | |
| 11434 |
JavaScript
[팁]웹상이나 포토샵에서 이미지 작업시 필요한 색상이 따로 있는걸 아세요?
5
|
| 11431 | |
| 11420 |
기타
아쿠아틱볼만들기~
10
|
| 11415 | |
| 11412 | |
| 29087 | |
| 11408 | |
| 11402 | |
| 11397 |
JavaScript
PHP에서 성능 개선을 위한 유용한 팁
4
|
| 11389 |
MySQL
PHP 초보적인 질문인데 너무 궁금해서요
7
|
| 11387 | |
| 11383 |
Flash
포토샵에 쓰이는 파일 정보
3
|
| 11375 | |
| 11370 | |
| 11362 |
기타
디카사진 보정효과
7
|
| 11354 |
JavaScript
강렬한 Sketch(스케치) 효과
7
|
| 11349 |
JavaScript
포토샵 단축키 모음
4
|
| 11348 |
JavaScript
셀렉트 박스 이뿌게 꾸미기
|
| 11347 |
JavaScript
데몬 Daemon 설명
|
| 11342 | |
| 11338 |
JavaScript
서버호스팅 트래픽 계산방법
3
|
| 29084 |
HTML
뒷배경을 채우기
2
|
| 11335 |
JavaScript
APM 설치전 필수 라이브러리 다운로드 및 설치
2
|
| 11327 | |
| 11325 |
JavaScript
Alpha 채널을 이용하여 Halftone Dot Image 만들기
1
|
| 11318 | |
| 11312 | |
| 11308 |
기타
사진에 글시 쓰기
3
|
| 11303 | |
| 11300 |
기타
이미지 합성하기
2
|
| 29077 |
HTML
부분 흑백 만들기
6
|
| 24849 | |
| 29075 |
HTML
스크롤바 색상 변경해주는 소스
1
|
| 29070 | |
| 11291 |
JavaScript
재미 있는 네비입니다.
8
|
| 11290 |
JavaScript
mod_rewrite 를 적용하기 위한 http.conf 설정
|
| 11288 | |
| 11285 |
JavaScript
잘 되던 포토샵이 갑자기 실행이 안될때
2
|
| 29068 |
HTML
단축기와 용어/팁
1
|
| 11282 | |
| 11279 | |
| 11271 |
Flash
flash source 입니다 (네비)
7
|
| 11267 |
Flash
드디어 cs3 이 출시 했다고 합니다.
3
|
| 11264 | |
| 11263 |
JavaScript
[스크립트] 이미지 없는 둥글게 테두리 DIV
|
| 29064 |
HTML
한글패치의 삭제 방법
3
|
| 11256 | |
| 11250 | |
| 11244 |
JavaScript
왜곡과 수평 바로잡기 (동영상)
5
|
| 11238 | |
| 11237 | |
| 11234 | |
| 29061 | |
| 11231 | |
| 11228 | |
| 11226 | |
| 29056 |
HTML
플래쉬 인트로자동으로 로딩되게
4
|
| 11223 | |
| 11216 |
MySQL
익스플로러7 팝업창의 주소창 없애기
6
|
| 11214 | |
| 24846 | |
| 11210 |
JavaScript
포토샵8.0cs 분할영역 도구로 일부 영역만 저장은 불가능 한가요?
3
|
| 11206 |
JavaScript
유용한 포샵단축키
3
|
| 11199 | |
| 11194 |
JavaScript
유용한 포토샵 강좌 사이트
4
|
| 11190 |
JavaScript
Jpeg등으로 압축하지 않고 Photoshop파일 사이즈 줄이기
3
|
| 29052 |
HTML
특정레이어만 선택해서 보기
3
|
| 11188 | |
| 11182 | |
| 11178 |
JavaScript
포토삽을 초기화 하고 싶을때
3
|
| 29048 | |
| 11171 |
Flash
플래쉬 네비게이션 질문입니다...
6
|
| 11163 | |
| 11159 |
기타
심볼마크와 로고
3
|
| 11154 | |
| 29047 |
HTML
파일에 이미지를 포함시키는 방법
|
| 29037 |
HTML
포토샵을 빨리 뜨게 하려면...
9
|
| 11149 |
JavaScript
포토샵에서 작업하다 글자 사이즈가 갑자기 커지거나 작아질 때.....
4
|
| 29036 |
HTML
PDF 세션에 대한 원리 및 보안
|
| 11135 |
JavaScript
고급스런 색상 만들기 혹은 선택하기...
13
|
| 29032 | |
| 11134 |
JavaScript
롤오버 자바스크립트입니다.
|
| 11129 |
JavaScript
포토샵 한영키 안먹을때..(다른 프로그램도 마찬가지..영구적용)
4
|
| 29031 | |
| 11127 | |
| 29026 |
HTML
이미지 저작권 관련 설명 7탄
4
|
| 11119 | |
| 11115 | |
| 29020 |
HTML
이미지 저작권 관련 설명 6탄
5
|
| 11113 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기