참 느리게 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>
게시글 목록
| 번호 | 제목 |
|---|---|
| 28772 |
HTML
오늘 날짜와 요일 넣기
1
|
| 10555 | |
| 10554 |
JavaScript
홈에 머문시간을 제목표시줄과 상태바에 실시간으로 알려줍니다
|
| 10553 | |
| 28770 |
HTML
창의 사이즈 변경 금지 시키기
1
|
| 28769 |
HTML
손님의 방문 횟수를 알려 줍니다
|
| 10552 | |
| 10551 | |
| 28768 |
HTML
자바스크립트 버튼에 링크 걸기
|
| 10550 | |
| 10549 |
JavaScript
들어올때나 나갈때나 인사는 착실히 해야죠..ㅋㅋㅋㅋ
|
| 10548 | |
| 10547 | |
| 28767 |
HTML
이름을 물어보고 인사하는 스크립트
|
| 10546 | |
| 10545 |
JavaScript
창을 열면 인사하는 간단한 스크립트
|
| 10544 | |
| 28766 | |
| 10541 | |
| 10540 | |
| 10538 | |
| 10537 |
기타
순발력테스트
|
| 10535 |
Flash
Ajax강의
1
|
| 10534 |
JavaScript
named -- dns서버
|
| 10533 |
JavaScript
문서내 이미지갯수 출력
|
| 10532 | |
| 28760 | |
| 10531 | |
| 10530 |
JavaScript
리눅스 부팅후 자동 실행
|
| 28759 |
HTML
버튼에 스타일주기(익스)
|
| 10527 | |
| 10525 | |
| 10523 | |
| 10520 |
Flash
swish 서브메뉴 제작방법
2
|
| 28758 |
HTML
오른쪽마우스클릭시메뉴(익스전용)
|
| 28757 |
HTML
오른쪽마우스클릭시메뉴(익스전용)
|
| 10519 | |
| 10518 |
MySQL
mysql 자동 최적화 / 복구 스크립트
|
| 10517 |
JavaScript
내용 복사해서 붙어넣기 하면 출처까지가 따라서 나옴 (출처:네이버 소스)
|
| 10515 |
JavaScript
ncftp사용법
1
|
| 28756 |
HTML
영카트에서 카테고리 검색하기
|
| 10514 | |
| 10512 | |
| 10511 |
JavaScript
영어철저가 의심스러울때
|
| 10510 |
JavaScript
로그인할때 나오는 메시지 바꾸기
|
| 10509 | |
| 10508 | |
| 10507 | |
| 28755 |
HTML
자바스크립트로 url 획득
|
| 28751 | |
| 10506 |
JavaScript
파일을 엑셀 혹은 워드로 다운 받기
|
| 10505 | |
| 10504 |
JavaScript
테이블속성연습
|
| 10503 | |
| 10499 | |
| 10487 | |
| 28748 |
HTML
투명도조절
2
|
| 10486 | |
| 28747 | |
| 10484 |
JavaScript
날짜 계산하기
1
|
| 10483 |
기타
폼필드로 바탕색상조정
|
| 10482 | |
| 28746 |
HTML
버튼 하나로 링크두개를 열어보자
|
| 10480 |
JavaScript
접속시도를 여러번 하는 IP 자동 블락하기
1
|
| 10476 | |
| 10473 |
JavaScript
팝업창.. 지정한 시간대에 열기
2
|
| 10472 |
기타
한글 영문으로 변환
|
| 28745 |
HTML
[펌]다중 업로드
|
| 10460 | |
| 10456 | |
| 28739 | |
| 10455 | |
| 28738 | |
| 10451 | |
| 10448 | |
| 10446 |
JavaScript
font-weight 숫자로도 가능
1
|
| 10445 |
JavaScript
에디터 수정해서 쓰세요!
|
| 10444 |
기타
리사이즈 팝업
|
| 10442 | |
| 10439 |
JavaScript
배경음악 또는 배경이미지 등 브라우저를 열고 처음 접속시 한번만 실행
2
|
| 10408 |
Flash
무료 플래시 209개
30
|
| 10403 | |
| 10400 |
JavaScript
문서내에 글씨 찾기
2
|
| 10398 | |
| 10397 | |
| 10396 |
JavaScript
ssh dictionary attack 막기
|
| 10391 | |
| 10390 | |
| 28733 |
HTML
밑의 갤러리 압축 화일
4
|
| 10389 |
JavaScript
까만도둑님께서 플래쉬 갤러리가 필요하시다고 해서...
|
| 10383 | |
| 10378 |
Flash
플래시에서 tabIndex 적용하기
4
|
| 28732 | |
| 10342 |
Flash
간단하지만 유용한 배너관리 시스템
35
|
| 28731 | |
| 10335 |
Flash
플래시 자동 슬라이더
6
|
| 28730 |
HTML
cart클래스2
|
| 28729 |
HTML
cart클래스1
|
| 28727 |
HTML
비교 복사
1
|
| 10332 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기