dW에서 3주동안 시리즈로 올라오는 글 중 웹개발에 도움되는 글이 있군요.

Ajax와 자바 개발을 간단하게, Part 1
JSP 태그 파일로 자바스크립트 코드 동적으로 생성하기 내용인데
HTML과 URL 인코딩 함수 - 유틸리티 함수가 유용하군요~

Ajax와 자바 개발을 간단하게, Part 2
JSTL과 JSP 태그 파일을 사용하여 커스터마이징이 가능한 웹 컴포넌트를 만들기

Ajax와 자바 개발을 간단하게, Part 3
자바스크립트와 JSP 태그 파일을 사용하여 사용자 친화적이고 웹 폼에 안전한 검증 기능을 구현하기

사용자가 웹 브라우저에 입력한 값을 자바스크립트로 검사하는 valid 같은 특정 기능에 얽매이지 않고 더 일반적인  함수를 만들 수 있는 코드가 있군요.
저같이 수련이 많이 필요한 사람에겐~  배울게 많군요...

Ajax 성능 도구

Ajax 성능에 향상을 주는 여러가지 도구와 부가 기능이 많이 있는데 저는 그 중 쓰는게 RAMBack과 YSlow밖에 없군요...

하나씩 써봐야 겠군요... 이렇게 정리해 주니 좋은 것 같습니다. ㅎㅎ

참고로 Load Time Analyzer이 firefox 3 버젼을 아직 지원안하는군요

오픈 소스 도구

• Apache Bench: 서버 부하를 흉내 낸다.
• Tsung: 다중 프로토콜 부하를 시험한다.
• Bonnie++: 디스크 I/O 문제 추적
• Wireshark: 네트워크 트래픽 분석
• Comet 서버 응용 프로그램 도구: 더 긴(long-lived) 연결, 더 높은 병행성, 더 낮은 지연, 더 낮은 서버 부하를 위해 사용된다.

파이어폭스 부가 기능

LiveHTTPHeaders(일 반적인 HTTP 트래픽을 확인)와 파이어버그(자원의 적재 시간을 측정)는 유용한 파이어폭스 부가 기능들이다. RAMBack(내부 캐시 지우기), Load Time Analyzer(적재 시간 분석기: 웹 페이지의 적재 시간을 측정), YSlow(웹 페이지 분석), iMacros for Firefox(웹 응용 프로그램 테스트), ColorBlind Ext(색맹 보조) 등 확장도 관심을 가질 만하다.

Ajax에서 XML처리하는 일이 많은데 저는 DOM트리를 탐색해서 필요한 정보를 추출하여
HTML로 변환을 하여 DIV 태그에 넣는 방법을 주로 사용하는데
이렇게 하다보면 필요한 정보의 태그를 찾아가는 과정이 복잡합니다.

Element안에 Element안에 Element가 있을경우..그외에 더 복잡한 경우도 많겠지요.

XSLT를 사용해 XML을 HTML로 변환하는 방법(서버쪽에서 XML을 HTML로 변환할지, 클라이언트쪽에서 변환할지..)

그리고 JSON과 동적 스크립트 태그를 이용해 XML처리하는 방법이 있군요.


XML processing in Ajax, Part 1: Four approaches
XML processing in Ajax, Part 2: Two Ajax and XSLT approaches
XML processing in Ajax, Part 3: JSON and avoiding proxies

Ajax overhaul, Part 1: Retrofit existing sites with Ajax and jQuery

- Ajax 오버홀(overhaul), Part 1: Ajax와 jQuery로 기존 사이트 개선하기 (한글)
모달 대화상자를 통해 사용자 경험을 향상시키고 네비게이션을 단순화하기
http://www.ibm.com/developerworks/kr/library/wa-aj-overhaul1/index.html?ca=drs-kr


몇일전 dW에 올라온 Ajax와 jQuery를 이용해서 웹 1.0의 사이트를 웹 2.0의 사이트로 변신(!)하는 번역글이 떴습니다. javascript library로 dojo밖에 해보지 않아(그것도 아주 얕게..) jQuery는 잘 모르지만, GreyBox, ThickBox, JTip, jQuery forms등을 이용한 예제를 볼 수 있군요~

문서의 예제에서는 기존의 웹1.0의 사이트와  ajax를 적용한 웹 2.0의 사이트가 있는데 예제 링크가 걸려있어서 확인이 가능해서 더 편한것 같습니다.

근데 "오버홀"이 뭘~까? 란 의문이 드는 시점이 왔습니다.
사전을 찾아보니 overhaul은 "정밀 검사", "분해 검사" 머 이런 뜻이군요
유추해보면 머 Ajax 한번 정밀검사해보자?ㅋㅋ Ajax를 파헤쳐보자! 머 이런것 같은데, 원문 제목이 Ajax overhaul 이렇게 되어 있어서 번역하신 분도 상당한(!) 고민이 많으셨을듯!

web 2.0에 늘 노출되어(?) 관련된 일을 하는데, 늘 부족한 내공에 책을 뒤적이고 있습니다.

DOM 스크립트책과, 자바스크립트, Ajax in Action책을 가끔 뒤적거리는데,

또 참고할 서적인 "Ajax in practice" 번역 책이 나왔습니다.

원서의 목차를 보니, server-side javascript, JSON, XML, XSLT

dojo toolkit, prototype, jquery, dwr, mashup등등 최신기술은 다 모아놓은 듯 합니다.

한번 꼭 보고싶은 책이 된것 같습니다.

위키북스에서 트랙백 이벤트를 하고 있습니다. 한번 관심있는 분들은
책 살펴보셔서, web 2.0에 대한 넓은~ 지식을 쌓으시길 바래요~

AJAX는 'Asynchronous JavaScript and XML'의 머리글자를 딴 것으로,
웹 애플리케이션이 웹 페이지에 대한 사용자 인터랙션을 효율적으로 처리할 수 있도록 하는 수단을 제공한다
(사용자 인터랙션이 이루어질 때마다 페이지를 리프레시(새로 고침)하거나 전체 페이지를 리로드하는 번거로움을 덜어줌).

XMLHttpRequest객체의 Internet Explorer 및 기타 브라우저 다루기


참고 : Ajax 소개 및 XMLHttpRequest 객체 사용하기

XMLHttpRequest 메소드

void open(string method, string url, boolean asynch, string username, string password) : 요청을 초기화한다. 파라미터중에서 method, url 두개만 필수항목이고 나머지는 선택항목이다. method 는 POST, GET, PUT 3가지중 하나를 사용하면 되며, url 은 요청하고자 하는 서버의 url 이다. asynch 는 요청이 비동기인지 여부를 판단하는 항목이다. 입력하지 않으면 디폴트로 true 가 설정되어 요청은 비동기로 처리된다. false 로 설정하면 요청은 동기로 처리되기 때문에 서버에서 응답을 받을때까지 프로세스는 기다리게 된다. 사실 XHR 을 사용하는 가장 큰 이점중의 하나인 비동기 처리를 위해서는 asynch 항목을 true 로 설정해서 사용해야 한다. false 를 설정한다면 XHR 을 사용하는 이점이 그만큼 줄어든다.

void send(content) : 실질적으로 요청을 서버로 보낸다. 요청이 비동기이면 이 메소드는 바로 리턴되지만 요청이 동기이면 서버에서 응답을 받을때까지 계속 대기한다. content 는 선택사항이며, DOM 객체(XML 객체)이거나 input stream, string 값으로 설정할 수 있으며 HttpRequest body 의 한 부분으로 서버로 전달된다. content 에 값을 넘기려면 open() 메소드는 반드시 POST 로 설정해야 하며, GET 방식으로 요청하려면 null 을 설정하면 된다.

void setRequestHeader(string header, string value) : header 에 해당하는 value 값으로 HttpRequest  헤더에 값을 설정하는 메소드로써, 반드시 open() 메소드 다음에 위치해야 한다.

void abort() : 요청을 중지한다.

string getAllResponseHeaders() : 요청에 대응되는 응답의 헤더정보를 리턴한다. 즉, Content-Length, Date, URI 등을 포함하는 헤더정보를 string 형식으로 반환한다.

string getResponseHeader(string header) : 응답의 헤더정보중에서 header 에 대응되는 값을 string 형식으로 반환한다.

이번에는 XHR 의 속성중에서 중요한 몇가지를 알아본다.

onreadystatechange : 자바스크립트 콜백함수(funtion pointer)를 저장한다. 콜백함수는 readyState 값이 변할때 마다 호출된다. 요청이 서버로 보내지면 readyState 는 5가지 숫자값으로 계속 변화가 일어나게 된다.

readyState : 요청의 상태를 의미한다.(0 = uninitialized, 1 = loading, 2 = loaded, 3 = interactive, 4 = complete)

responseText : 서버의 응답을 string 형식으로 나타낸다. 단순 text를 innerHTML 속성으로 표현하기에는 알맞지만 논리적으로 파싱하거나 동적으로 페이지 컨텐츠를 생성하기는 힘들다.

responseXML : 서버의 응답을 XML 로 나타낸다. 이 속성은 DOM 객체로 파싱할 수 있다.

status : 서버로부터의 HTTP 상태코드이다.(예 200(OK), 404(NOT Found), 202(결과 값이 없을 때)등등)

statusText : HTTP 상태코드에 대한 텍스트 값이다.(예 OK, NOT Found 등등)

참고 : jinoxst님의 AJAX 강의 2장 - XMLHttpRequest 오브젝트 사용하기

Ajax를 이용한 예)
검색창의 자동검색