'Ajax'에 해당되는 글 5건
2006/10/17 09:26
[WEB]
AJAX. 대부분 아시다시피 Asynchronous Javascript And XML의 약어입니다.
비동기의 자바스크립트와 XML이죠.
근데 AJAX로 작업을 해보신 분이라면 아시겠지만 어떤 기능을 AJAX로 구현하게되면 그 기능만을 위한 별도의 XML 페이지를 작업 해야된다는 것을 잘 아실겁니다.
하지만 이렇게 별도의 XML페이지를 제작하게 된다면 당연히 제작/유지/보수에 2배에 가까운 노력이 들게 됩니다.
물론 웹 접근성을 고려해서(이 경우에는 보통 javascript가 disable된 상황) 일반 HTML페이지도 제작한다는 전제하이기는 합니다.
(사실 아쉽지만 대부분의 AJAX로 제작된 사이트들이 이 것을 무시하고 있습니다. 뭐 이런 문제가 있다는 것조차 모르시는 분들이 더 많다는게 문제이기는 합니다만..)
위에서도 말했듯이 2배에 가까운 노력이 드는데도 불구하고(?) 사실 그런 환경으로 웹서핑을 하는 경우가 거의 없기 때문에 얻을 수 있는 효과는 미미합니다. 그렇기 때문에 무시되는 경우가 많죠.
하지만 XML대신 XHTML을 사용한다면 이야기는 조금 달라집니다.
역시나 아시겠지만 XHTML은 XML parser에 의해 parsing이 됩니다.
따라서 애초에 처리되는 페이지를 XHTML로 가능한한 semantic하게 제작을 해두면 큰 노력없이도 AJAX와 웹접근성이라는 두마리 토끼를 다 잡을 수 있습니다.
위의 예제를 실제 작업할 내용으로 변경해보겠습니다.
예제 페이지는 http://rsef.net/Work/xhtml.php(소스는 http://rsef.net/Work/xhtml.phps)입니다.
그 아래 no-cache설정은 실제 작업을 할때는 특별히 고려할 필요는 없겠지만(IE의 경우 xhtml.php와 request.php를 no-cache설정 없이 한개의 window로 볼 경우 문제가 되지만 실제 사용시 그런 경우는 없겠죠.) 이 경우는 예제이다보니 넣겠습니다.
그리고 제가 사용하고 있는 서버는 php의 short_open_tag 설정이 on으로 되어있기 때문에 XML선언부를 echo '<?xml version="1.0" encoding="UTF-8"?>';로 썼습니다.
그럼 이 페이지를 javascript로 요청하는 페이지를 만들어 보겠습니다.
예제 페이지는 http://rsef.net/Work/request.php(소스는 http://rsef.net/Work/request.phps)입니다.
request() 함수도 많이 보신 형태입니다.
다만 REQ.setRequestHeader에서 Content-Type을 text/xml로 지정하는 부분이라던가,
성공했을때 false, 실패했을때 true를 return해주는 정도가 흔히 보는 형태와 다를겁니다.
일단 Content-Type을 text/xml로 지정해주면 위의 xhtml.php 설명에서 생략한 $_SERVER['CONTENT_TYPE']에 text/xml이라는 값이 할당되게되며 따라서 xhtml.php의 Content-Type이 text/xml로 되게 됩니다.(일반적인 browser로 접속을 하게되면 값이 없으므로 skip됩니다.)
이렇게 text/xml로 되야 xml parser가 parsing을 할 수 있으니 반드시 필요한 작업이 되겠습니다.
그리고 성공했을때 false, 실패했을때 true를 return해주는 이유는 onclick event에서 실패했을 경우에 xhtml.php로 페이지 이동을 시킴으로써 원래 anchor(a) element의 동작을 보증해주기 위해서입니다.(장담은 못하겠지만;; 이 경우 검색엔진도 실제 contents인 xhtml.php의 접근이 가능할 것입니다.)
위의 예제를 보시면 아시겠지만 크게 신경쓸 것 없이도 상당한 웹 접근성을 확보하는 일이 가능합니다.
물론 실제 작업 중, 특히 동적인(server side) 페이지같은 경우에는 이런저런 문제(대부분은
validate를 통과하지 못하는 문제)가 생길 수도 있습니다.
하지만 XHTML만 validate를 보장해준다면 얻을 수 있는 많은 이점이 있기 때문에 결코 손해보는 일은 아닐 것입니다. :)
ps. 위의 예제는 서버 설정에 따라 약간 수정을 해주어야 할 수도 있습니다.
비동기의 자바스크립트와 XML이죠.
근데 AJAX로 작업을 해보신 분이라면 아시겠지만 어떤 기능을 AJAX로 구현하게되면 그 기능만을 위한 별도의 XML 페이지를 작업 해야된다는 것을 잘 아실겁니다.
하지만 이렇게 별도의 XML페이지를 제작하게 된다면 당연히 제작/유지/보수에 2배에 가까운 노력이 들게 됩니다.
물론 웹 접근성을 고려해서(이 경우에는 보통 javascript가 disable된 상황) 일반 HTML페이지도 제작한다는 전제하이기는 합니다.
(사실 아쉽지만 대부분의 AJAX로 제작된 사이트들이 이 것을 무시하고 있습니다. 뭐 이런 문제가 있다는 것조차 모르시는 분들이 더 많다는게 문제이기는 합니다만..)
위에서도 말했듯이 2배에 가까운 노력이 드는데도 불구하고(?) 사실 그런 환경으로 웹서핑을 하는 경우가 거의 없기 때문에 얻을 수 있는 효과는 미미합니다. 그렇기 때문에 무시되는 경우가 많죠.
하지만 XML대신 XHTML을 사용한다면 이야기는 조금 달라집니다.
역시나 아시겠지만 XHTML은 XML parser에 의해 parsing이 됩니다.
따라서 애초에 처리되는 페이지를 XHTML로 가능한한 semantic하게 제작을 해두면 큰 노력없이도 AJAX와 웹접근성이라는 두마리 토끼를 다 잡을 수 있습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Virtual Library</title>
</head>
<body>
<p>Moved to <a href="http://example.org/">example.org</a>.</p>
</body>
</html>
위의 예제는 W3C의 XHTML1.0 문서에 있는 내용입니다.<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Virtual Library</title>
</head>
<body>
<p>Moved to <a href="http://example.org/">example.org</a>.</p>
</body>
</html>
위의 예제를 실제 작업할 내용으로 변경해보겠습니다.
예제 페이지는 http://rsef.net/Work/xhtml.php(소스는 http://rsef.net/Work/xhtml.phps)입니다.
<?php
if($_SERVER['CONTENT_TYPE']) header('Content-Type: '.$_SERVER['CONTENT_TYPE']);
header("Cache-Control: no-cache, must-revalidate");
echo '<?xml version="1.0" encoding="UTF-8"?>';
?>
... 하략(노란색박스의 내용과 동일)
맨 위에 header의 Content-Type이 있을 경우 그 Content-Type으로 선언한 것이 보일겁니다. 이 것은 아래의 request.php에서 설명하도록 하고 넘어갑니다.if($_SERVER['CONTENT_TYPE']) header('Content-Type: '.$_SERVER['CONTENT_TYPE']);
header("Cache-Control: no-cache, must-revalidate");
echo '<?xml version="1.0" encoding="UTF-8"?>';
?>
... 하략(노란색박스의 내용과 동일)
그 아래 no-cache설정은 실제 작업을 할때는 특별히 고려할 필요는 없겠지만(IE의 경우 xhtml.php와 request.php를 no-cache설정 없이 한개의 window로 볼 경우 문제가 되지만 실제 사용시 그런 경우는 없겠죠.) 이 경우는 예제이다보니 넣겠습니다.
그리고 제가 사용하고 있는 서버는 php의 short_open_tag 설정이 on으로 되어있기 때문에 XML선언부를 echo '<?xml version="1.0" encoding="UTF-8"?>';로 썼습니다.
그럼 이 페이지를 javascript로 요청하는 페이지를 만들어 보겠습니다.
예제 페이지는 http://rsef.net/Work/request.php(소스는 http://rsef.net/Work/request.phps)입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Virtual Library Request</title>
<script type="text/javascript">
//<![CDATA[
function newXMLHttpRequest() {
... 중략 ...
}
function request(href) {
try {
var REQ = newXMLHttpRequest();
REQ.onreadystatechange = function() {
if(REQ.readyState == 4) {
if(REQ.status == 200) {
var body = REQ.responseXML.getElementsByTagName("p")[0];
alert(body.firstChild.nodeValue);
}
}
};
REQ.open("GET", href, true);
REQ.setRequestHeader("Content-Type", "text/xml");
REQ.send(null);
return false;
} catch(e) {
return true;
}
}
//]]>
</script>
</head>
<body>
<a href="./xhtml.php" onclick="return request(this.href);">Click!</a>
</body>
</html>
newXMLHttpRequest() 함수야 많이 보셨을테니 생략하고..<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Virtual Library Request</title>
<script type="text/javascript">
//<![CDATA[
function newXMLHttpRequest() {
... 중략 ...
}
function request(href) {
try {
var REQ = newXMLHttpRequest();
REQ.onreadystatechange = function() {
if(REQ.readyState == 4) {
if(REQ.status == 200) {
var body = REQ.responseXML.getElementsByTagName("p")[0];
alert(body.firstChild.nodeValue);
}
}
};
REQ.open("GET", href, true);
REQ.setRequestHeader("Content-Type", "text/xml");
REQ.send(null);
return false;
} catch(e) {
return true;
}
}
//]]>
</script>
</head>
<body>
<a href="./xhtml.php" onclick="return request(this.href);">Click!</a>
</body>
</html>
request() 함수도 많이 보신 형태입니다.
다만 REQ.setRequestHeader에서 Content-Type을 text/xml로 지정하는 부분이라던가,
성공했을때 false, 실패했을때 true를 return해주는 정도가 흔히 보는 형태와 다를겁니다.
일단 Content-Type을 text/xml로 지정해주면 위의 xhtml.php 설명에서 생략한 $_SERVER['CONTENT_TYPE']에 text/xml이라는 값이 할당되게되며 따라서 xhtml.php의 Content-Type이 text/xml로 되게 됩니다.(일반적인 browser로 접속을 하게되면 값이 없으므로 skip됩니다.)
이렇게 text/xml로 되야 xml parser가 parsing을 할 수 있으니 반드시 필요한 작업이 되겠습니다.
그리고 성공했을때 false, 실패했을때 true를 return해주는 이유는 onclick event에서 실패했을 경우에 xhtml.php로 페이지 이동을 시킴으로써 원래 anchor(a) element의 동작을 보증해주기 위해서입니다.(장담은 못하겠지만;; 이 경우 검색엔진도 실제 contents인 xhtml.php의 접근이 가능할 것입니다.)
위의 예제를 보시면 아시겠지만 크게 신경쓸 것 없이도 상당한 웹 접근성을 확보하는 일이 가능합니다.
물론 실제 작업 중, 특히 동적인(server side) 페이지같은 경우에는 이런저런 문제(대부분은
validate를 통과하지 못하는 문제)가 생길 수도 있습니다.
하지만 XHTML만 validate를 보장해준다면 얻을 수 있는 많은 이점이 있기 때문에 결코 손해보는 일은 아닐 것입니다. :)
ps. 위의 예제는 서버 설정에 따라 약간 수정을 해주어야 할 수도 있습니다.
Trackback Address :: http://blog.rsef.net/trackback/38
2006/06/10 15:36
[WEB/태터툴즈]
2006 피파 독일월드컵 조별리그 순위를 보여주는 플러그인입니다.
물론 조별리그가 끝나는 6월 24일 이후에는 별다른 의미가 없는 플러그인이 되겠습니다.(...)
작동방식은 페이지 로딩이 완전히 끝난 후(onload이벤트 발생) Ajax를 이용하여 파싱을 하게됩니다.(파싱 중에는 로딩 이미지를 보여줄까 했으나 귀찮아서 안했습니다.)
사용방법은 스킨의 원하는 곳에 [##_WC2006_##] 를 삽입하면 됩니다.
테이블의 테두리 색은 index.php 파일의 $borderColor를 수정하시면 됩니다.
IE 6.0, FF 1.5 에서 정상 동작하는 것을 확인했습니다.
ps. 데이터는 구글에서 훔쳐가져왔습니다.
WC2006.zipTrackback Address :: http://blog.rsef.net/trackback/35
2006/04/15 17:36
[WEB/태터툴즈]
태터툴즈의 검색창에 태그를 자동완성시켜주는 플러그인입니다.
자동완성이 되는 단어는 자신의 블로그에 있는 태그만 됩니다.
블로그에 태그가 많으신 분들에게 유용할거라고 생각합니다. :)
1.1 버전에서는 기존의 1.0.x 버전과는 달리 자동완성된 태그를 마우스로 클릭하거나 키보드의 위, 아래 키(또는 마우스로 직접 선택)로 선택을 하고 엔터를 입력한 경우 "/tag/"에서 검색을 합니다.
자동완성된 태그를 선택하지않고 직접 입력을 한 경우에는 원래의 방식인 "/search/"에서 검색을 합니다.
(단, 검색이나 search 등의 버튼이 있는 스킨의 경우에는 버튼을 눌렀을 경우 "/search/"에서 검색합니다.)
그리고 검색창이 포커스를 잃었을 경우 레이어를 자동으로 숨겨줍니다.
(포커스를 얻으면 다시 보여줍니다.)
사용방법은 스킨의 검색창 뒤 아무곳에나 [##_TagAutoComplete_##] 를 삽입하면 됩니다.
기본 값으로 작성한 글 중 공개, 비공개, 보호 등 모든 태그(태터툴즈에서 기본적으로 보여주는 태그목록)의 이름순으로 최대 5개만 가져옵니다.
공개된 글의 태그만 가져오거나 개수를 변경하려면 각각 TagAutoComplete.php 파일의 $visibility 와 $limit 를 수정하시면 됩니다.
레이어 내의 글자색, 글자의 크기, 배경의 투명도, 배경색, 마우스 오버시 색 등은 index.php 파일을 보시면 수정하기 편하게(?;) 해놨습니다.
자동완성 레이어가 뜨는 위치 등은 자동으로 찾게되어있으니 수정하실 필요가 없습니다.
(혹시라도 정상적으로 위치를 찾지 못한다거나 기타 버그가 있다면 제 블로그에 글 남겨주세요.)
IE 6.0, FF 1.5 에서 정상 동작하는 것을 확인했습니다.
1.1.1
- 다중사용자의 경우 경로를 제대로 인식하지 못하는 문제 해결
Trackback Address :: http://blog.rsef.net/trackback/10
|
기존의 1.1버전을 태터툴즈 1.1에 맞게 수정하였습니다. 태터툴즈의 검색창에 태그를 자동완성시켜주는 플러그인입니다. 자동완성이 되는 단어는 자신의 블로그에 있는 태그만 됩니다.자동완성된 태그를 마우스로 클릭하거나 키보드의 위, 아래 키(또는 마우스로 직접 선택)로 선택을 하고 엔터를 입력한 경우 "/tag/"에서 검색을 합니다. 자동완성된 태그를 선택하지않고 직접 입력을 한 경우에는 "/search/"에서 검색을 합니다. (단, 검색이나 searc.. |
2006/04/09 11:18
[WEB/태터툴즈]
자동완성이 되는 단어는 자신의 블로그에 있는 태그만 됩니다.
블로그에 태그가 많으신 분들에게 유용할거라고 생각합니다. :)
사용방법은 스킨의 검색창 뒤 아무곳에나 [##_TagAutoComplete_##] 를 삽입하면 됩니다.
기본 값으로 작성한 글 중 공개, 비공개, 보호 등 모든 태그(태터툴즈에서 기본적으로 보여주는 태그목록)의 이름순으로 최대 5개만 가져옵니다.
공개된 글의 태그만 가져오거나 개수를 변경하려면 각각 TagAutoComplete.php 파일의 $visibility 와 $limit 를 수정하시면 됩니다.
레이어 내의 글자색, 글자의 크기, 배경의 투명도, 배경색, 마우스 오버시 색 등은 index.php 파일을 보시면 수정하기 편하게(?;) 해놨습니다.
자동완성 레이어가 뜨는 위치 등은 자동으로 찾게되어있으니 수정하실 필요가 없습니다.
(혹시라도 정상적으로 위치를 찾지 못한다거나 기타 버그가 있다면 제 블로그에 글 남겨주세요.)
IE 6.0, FF 1.5 에서 정상 동작하는 것을 확인했습니다.
최신버전은 http: //rsef.net/tt/entry/Plugin-Ajax-Tag-Auto-Complete-v11에서 확인해주세요.
1.0.1
- 마우스 클릭시 이동 경로 설정 오류 수정
- IE의 경우 offset* 이 style의 border-width 속성 크기를 읽지 않아 생기는 위치 문제 해결
1.0.2
- 검색된 내용이 없는 경우(레이어가 없을 때) 화살표 위, 아래를 눌렀을 때 생기던 오류 수정
Trackback Address :: http://blog.rsef.net/trackback/6
2006/04/07 03:06
[WEB/태터툴즈]
0.1 버전에서와는 달리 이번 1.0 버전에서는 DB에 저장되어있는 내용을 읽어오는 것이 아니라 실시간으로 직접 RSS 파일을 읽어옵니다.
(단, "RSSNews" 카테고리 내에 있는 RSS 목록을 읽어오기 때문에 DB에는 접속을 합니다.)
목록의 오른쪽 위의
(최초 DB에서 목록을 받아올 때만 랜덤으로 가져오고 그 이후에는 순서대로 보여집니다.)
파싱하는 시간이 오래 걸릴 경우를 대비해서 파싱 중에는
(오래걸릴 경우 스킵을 위해 클릭 시의 이벤트에는 차이가 없습니다.)
사용방법은 스킨의 원하는 곳에 [##_RSSNews_##] 를 삽입하면 됩니다.
기본 값으로 리더에서 "RSSNews"라는 카테고리에 속한 RSS 피드 목록들을 전부 가지고 와서 그 중 한 개의 내용 중 최근 "5개"만 가져옵니다.
(처음에는 RSSNews 라는 카테고리가 없으니 만드셔야 됩니다.)
카테고리의 이름이나 보여줄 개수는 index.php 파일에 각각 $title, $limit 를 수정하시면 됩니다.
참고로
(물론 특별한 경우가 아니면 따로 수정하실 필요는 없습니다.)
버튼에 배경색이 하얀색이어서 하얀색이 아닌 스킨을 사용하시는 분한테는 좀 안 어울릴 수도 있겠네요.
혹시 이미지를 변경하시면 다른 분들도 쓸 수 있도록 트랙백이라도 달아주세요. :)
RSS 피드 모음(http://www.codeordie.org/wiki/?LinkPage/RssFeed)
IE 6.0, FF 1.5 에서 정상 동작하는 것을 확인했습니다.
1.0.1
제목이나 내용에 태그가 있을 경우 문제가 되던 것을 수정
Trackback Address :: http://blog.rsef.net/trackback/4
|
Tracked from ∞━─ⓗⓞⓨⓐ™─━∞ | 2006/05/17 00:10 | DEL
사람말은 끝까지 들어봐야 한다. 마찬가지로 글도 끝까지 읽어봐야 한다. 웹을 사용하면서 안 좋아진 버릇 중에 하나가 글을 훓어버린다는 것이다. 이 버릇 때문에 RSS News 설치 할 때 약간 고생했다. 먼저 플러그인을 다운 받아 압축을 풀고 폴더에 넣었다. 환경설정에서 플러그인 활성화를 시켰는데 나오질 않는 것이다. Peris님 블로그 가서 글을 보니 를 스킨의 원하는 곳에 넣으라고 한다. 그래서 넣어봤다. 안 나온다.+__+ 그짓말 하나 싶었다.. |
|
Tracked from ∞━─ⓗⓞⓨⓐ™─━∞ | 2006/05/17 12:00 | DEL
가끔 기사 제목이 길어지는 경우가 생기더군.. 네이버 검색을 통해 php에서 글 줄이는 함수를 찾아냈다.크크크~~ 다른 소스 가져다가 쓰기는 정말 잘해+_+ RSSNews.php에 아래 소스를 추가 하고.. function cutstring_main($strings,$lenstr,$strexpr=")" { $str02="strlen($strings);" for($k="0;" $k<$lenstr-1; $k++) { if(ord(substr($strin.. |
|
Tracked from www.WeirdTopics.com - Weird | Funny | Hilarious | 2006/05/25 10:02 | DEL
이런 좋은 플러그인을 사용하면서 주는것 없이 받는 입장인 제가 해줄수 있는것이라곤 포스트를 통한 감사의 마음과 홍보를 해주는 것 밖에 없네요. 이것에 충실하면서 관련 링크를 남깁니다. Peris님이 만든 [Plugin] [Ajax] RSS News v1.0 보러 가기. * 한가지 아쉬운(?)점은 피드버튼을 한번 눌러줘야 뜬다는것이네요.^^. 참고적으로 저는 이 플러그인을 공지사항 밑에 설치해놨습니다. 현재는 제가 틈틈히 보고 싶어서 zdnet.com.. |
|
Tracked from [采日] LifeLOG | 2006/07/03 12:21 | DEL
태터 업그레이드 0.951 -> 1.0.6를 하고, 은빛기타님의 [TT1.0]기본 + mp3플레이어를 좀 수정해서 스킨을 입혔으니, 이제 사용할 만한 플러그인을 설치한다. BlogZin.Net에 사용된 플러그인은 아래와 같습니다. RSSNews는 Ajax로 제작된 RSS Reader인데, 태터의 RSS Reader의 RSSNews 카테고리에 수집된 글의 목록을 태터 메뉴에 표시해 주는 역할을 한다.Tattertools on Wikipedia는 포스트.. |
|
이 버전은 태터툴즈 1.1의 사이드바용입니다.태터툴즈 관리자 모드에 있는 리더에 RSS feed를 설정해 놓은 것을 관리자 모드가 아니라 메인화면에서 누구나 볼 수 있게 만든 것입니다.이번 1.1버전에서는 여러가지의 카테고리를 보여줄 수 있도록 변경하였습니다. 또한, 스킨-사이드바 메뉴를 통하여 기본적인 설정을 할 수 있도록 제작하였습니다. 목록의 오른쪽 위의 버튼을 클릭하면 설정한 카테고리 내에 있는 RSS feed 목록들 중의 하나를 Ajax로.. |
