Ruru's PlayGround :) ::

2009/09/16 18:04

For Beginner XML DOM & Javascript Guide

2009/09/16 18:04 in Web/AJAX

http://www.beginningjavascript.com/book.php

얼마전에 댓글로 문의하신 분이 있는데..

정말 잘 정리된 내용이 있었군요.

아쉽지만 영문이라 문제지만,

그래도 참 좋은 내용의 사이트인 것은 확실합니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Web > AJAX' 카테고리의 다른 글

For Beginner XML DOM & Javascript Guide (0)	2009/09/16
Ajax 호출의 일반적인 패턴 (0)	2007/08/21
ASP.NET에서 사용할 정말 편한 Ajax Library (2)	2007/08/18
Ajax Pattern (0)	2007/08/08
Ajax DOM 제어 (0)	2007/07/08
Ajax를 통해 특정영역에 페이지 로드 (0)	2007/07/05

Posted by 써니루루

이 포스팅이 도움이 되었다면 구글에서 관련 정보를 찾아 보세요 ^^

ajax, Beginner, dom, javascript, XML

Trackback 0 Comment 0

Trackback : http://i-ruru.com/trackback/499

2007/08/21 13:58

Ajax 호출의 일반적인 패턴

2007/08/21 13:58 in Web/AJAX

서핑 중 기본적인 Ajax 패턴을 상당히 간결하게 짜 놓았길래 담습니다.

XHR을 생성해서 반환하는 구문을 상당히 간결하게 잘 처리했네요 ㅎㅎ

XMLHttpRequest functions
Ref URI : http://www.quirksmode.org/js/xmlhttp.html







function sendRequest(url,callback,postData) {
	var req = createXMLHTTPObject();
	if (!req) return;
	var method = (postData) ? "POST" : "GET";
	req.open(method,url,true);
	req.setRequestHeader('User-Agent','XMLHTTP/1.0');
	if (postData)
		req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
	req.onreadystatechange = function () {
		if (req.readyState != 4) return;
		if (req.status != 200 && req.status != 304) {
//			alert('HTTP error ' + req.status);
			return;
		}
		callback(req);
	}
	if (req.readyState == 4) return;
	req.send(postData);
}

var XMLHttpFactories = [
	function () {return new XMLHttpRequest()},
	function () {return new ActiveXObject("Msxml2.XMLHTTP")},
	function () {return new ActiveXObject("Msxml3.XMLHTTP")},
	function () {return new ActiveXObject("Microsoft.XMLHTTP")}
];

function createXMLHTTPObject() {
	var xmlhttp = false;
	for (var i=0;i<XMLHttpFactories.length;i++) {
		try {
			xmlhttp = XMLHttpFactories[i]();
		}
		catch (e) {
			continue;
		}
		break;
	}
	return xmlhttp;
}

It's used like this:

sendRequest('file.txt',handleRequest);

Now the file file.txt is fetched, and when that's done the function handleRequest() is called. This function receives the XMLHttpRequest object as an argument, which I traditionally call req (though, of course, you can use any variable name you like). Typically, this function reads out the responseXML or responseText and does something with it.

function handleRequest(req) {
	var writeroot = [some element];
	writeroot.innerHTML = req.responseText;
}

One object per request

This function creates a new XMLHttpRequest object for every request you make. In simple cases such as this site, where every page fetches only three to five files, I don't mind creating three to five objects. In more complex sites, however, where any page can make an arbitrary amount of requests, it's probably better to write a function that reuses existing XMLHttpRequest objects.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Web > AJAX' 카테고리의 다른 글

For Beginner XML DOM & Javascript Guide (0)	2009/09/16
Ajax 호출의 일반적인 패턴 (0)	2007/08/21
ASP.NET에서 사용할 정말 편한 Ajax Library (2)	2007/08/18
Ajax Pattern (0)	2007/08/08
Ajax DOM 제어 (0)	2007/07/08
Ajax를 통해 특정영역에 페이지 로드 (0)	2007/07/05

Posted by 써니루루

이 포스팅이 도움이 되었다면 구글에서 관련 정보를 찾아 보세요 ^^

ajax, javascript, xhr

Trackback 0 Comment 0

Trackback : http://i-ruru.com/trackback/137

2007/08/18 20:20

ASP.NET에서 사용할 정말 편한 Ajax Library

2007/08/18 20:20 in Web/AJAX

http://ajax.schwarz-interactive.de/csharpsample/default.aspx

사용법만 조금 연습하면 정말 코드도 짧고 정말 편하게 Ajax 비동기 통신을 이용할 수 있습니다.

정말 특이한 점은 서버메소드형테에 어트리뷰트를 추가하면 자동으로 클라이언트 스크립트에 동일한 형태의 이름으로 호출할 수 있도록 설계되어 있어서

이용하기 쉽도록 되어있다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Web > AJAX' 카테고리의 다른 글

For Beginner XML DOM & Javascript Guide (0)	2009/09/16
Ajax 호출의 일반적인 패턴 (0)	2007/08/21
ASP.NET에서 사용할 정말 편한 Ajax Library (2)	2007/08/18
Ajax Pattern (0)	2007/08/08
Ajax DOM 제어 (0)	2007/07/08
Ajax를 통해 특정영역에 페이지 로드 (0)	2007/07/05

Posted by 써니루루

이 포스팅이 도움이 되었다면 구글에서 관련 정보를 찾아 보세요 ^^

ajax, ASP.NET, library

Trackback 0 Comment 2

Trackback : http://i-ruru.com/trackback/135

홍반장 2009/01/06 14:42
AjaxPro 내가 예전에 보여 줬었자너 ㅋ
- 써니루루 2009/01/06 14:44
  너가 예전에 알켜줬을 때 블로깅 해둔거징
  요즘은 잘 써먹고있당 ㅋㅋ

2007/08/08 10:23

Ajax Pattern

2007/08/08 10:23 in Web/AJAX

http://www.ibm.com/developerworks/kr/library/x-ajaxxml2/

Ajax Xml 처리등의 기본인 Ajax 처리 패턴을 소개합니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Web > AJAX' 카테고리의 다른 글

Ajax 호출의 일반적인 패턴 (0)	2007/08/21
ASP.NET에서 사용할 정말 편한 Ajax Library (2)	2007/08/18
Ajax Pattern (0)	2007/08/08
Ajax DOM 제어 (0)	2007/07/08
Ajax를 통해 특정영역에 페이지 로드 (0)	2007/07/05
Javascript Library in Ajax (0)	2007/04/29

Posted by 써니루루

이 포스팅이 도움이 되었다면 구글에서 관련 정보를 찾아 보세요 ^^

ajax, pattern

Trackback 0 Comment 0

Trackback : http://i-ruru.com/trackback/83

2007/07/08 13:12

Ajax DOM 제어

2007/07/08 13:12 in Web/AJAX

http://www.ibm.com/developerworks/kr/library/wa-ajaxintro5/

Ajax를 이용해 받아온 데이터를 DOM으로 제어하는 경우가 많습니다.

기본적인 사항을 위 페이지에서 보실 수 있습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Web > AJAX' 카테고리의 다른 글

ASP.NET에서 사용할 정말 편한 Ajax Library (2)	2007/08/18
Ajax Pattern (0)	2007/08/08
Ajax DOM 제어 (0)	2007/07/08
Ajax를 통해 특정영역에 페이지 로드 (0)	2007/07/05
Javascript Library in Ajax (0)	2007/04/29
SilverLight & Flex in WEB 2.0 (0)	2007/04/29

Posted by 써니루루

이 포스팅이 도움이 되었다면 구글에서 관련 정보를 찾아 보세요 ^^

ajax, dom, javascript, XML, 자바스크립트

Trackback 0 Comment 0

Trackback : http://i-ruru.com/trackback/98

2007/07/05 23:21

Ajax를 통해 특정영역에 페이지 로드

2007/07/05 23:21 in Web/AJAX

어떻게 보면 메뉴링크와 통짜로 만들어진 페이지의 구조와 비슷하달까?

아마 기존에 통짜로 만드는 페이지에서 부분적인 페이지 영역을 바꾸려면

서버스크립트로 구상했어야 했다.

Ajax로 조금 좋은 방법은 아니지만

고전적인 Ajax 방식으로 페이지의 메뉴와 컨텐츠 영역을 ajax로 꾸민다면 다음과 같은 기본적인 코드로 시작해야 하지 않을까 해서 파일을 만들어 봤다.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XMLHttpRequest</title>
<link rel="stylesheet" href="commcss.css" type="text/css" />
<script language="javascript" type="text/javascript">
// XMLHttpRequest 생성
var ResponseText = "";

function newXMLHttpRequest()
{
var reqHttp;
if (window.ActiveXObject)
{ // IE
   try
{
   reqHttp = new ActiveXObject("Msxml2.XMLHTTP");
   }
catch (e)
{
   try
   {
   reqHttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
   catch (e1)
   {
   reqHttp = null;
   }
   }
}
else if (window.XMLHttpRequest)
{ // IE 이외
   try
{
   reqHttp = new XMLHttpRequest();
   }
catch (e)
{
   reqHttp = null;
   }
}
return reqHttp;
}

// 데이터 송수신
function openSendStatus(url, method)
{
var xmlHttp = newXMLHttpRequest();    //XMLHttpRequest 생성
xmlHttp.open(method, url, true); //전송방법,URL,통신방법
xmlHttp.onreadystatechange = function()
{    //처리상태 변경 발생
if (xmlHttp.readyState == 4)
{    //서버 처리 완료
if (xmlHttp.status == 200)
{    //파일 수신 성공
mainControl(xmlHttp); //메인 처리
}
}
}
xmlHttp.send(""); //서버 처리 데이터
}

//메인 처리
function mainControl(xmlHttp)
{
ResponseText = xmlHttp.responseText; //서버 파일
}

// 사용자 함수
function loadPage(url, targetId)
{
openSendStatus(url,'GET');
document.getElementById(targetId).innerHTML = ResponseText;
}
</script>
</head>

<body>
<h1>XMLHttpRequest</h1>

<div>
<input type="button" id="btnclick" name="btnclick" value="서버 파일 수신"
onclick="loadPage('./AjaxTest1.html','rcvData')" />
</div>
<div id="datashow">
<div id="rcvData"></div>
</div>

</body>
</html>

버튼의 onclick과 같이 a테그나 메뉴의 이미지 테그 같은 부분에 onclick 이벤트 핸들러를 통해 loadPage를 호출하면 원하는 페이지를 우리가 원하는 div id 영역에 출력할 수 있게 된다.

대신 ajax 호출은 웹서버상에 올라가 있어야 사용할 수 있다는 단점아닌 단점이 있겠다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Web > AJAX' 카테고리의 다른 글

ASP.NET에서 사용할 정말 편한 Ajax Library (2)	2007/08/18
Ajax Pattern (0)	2007/08/08
Ajax DOM 제어 (0)	2007/07/08
Ajax를 통해 특정영역에 페이지 로드 (0)	2007/07/05
Javascript Library in Ajax (0)	2007/04/29
SilverLight & Flex in WEB 2.0 (0)	2007/04/29

Posted by 써니루루

이 포스팅이 도움이 되었다면 구글에서 관련 정보를 찾아 보세요 ^^

ajax, javascript, Programming, 메뉴, 자바스크립트, 프로그래밍

Trackback 0 Comment 0

Trackback : http://i-ruru.com/trackback/96

2007/04/29 18:15

Javascript Library in Ajax

2007/04/29 18:15 in Web/AJAX

Web 2.0 리치 클라이언트(Rich Client)가 대세인 요즘 도대체 어떤 라이브러리가 좋을지 참 선택하기 힘든 상황이다.

1. Yahoo UI!
http://developer.yahoo.com/yui/

2. JQuery
http://jquery.com/

3. Prototype.js + scriptaculous
http://www.prototypejs.org/
http://script.aculo.us/
(참고 : http://cafe.naver.com/requirements.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=330
,
4. DoJo
http://dojotoolkit.org/

참고
http://www.mozilla.org/rhino/
http://www.zkoss.org/
http://jruby.codehaus.org/
http://groovy.codehaus.org/
http://www.fckeditor.net/

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Web > AJAX' 카테고리의 다른 글

ASP.NET에서 사용할 정말 편한 Ajax Library (2)	2007/08/18
Ajax Pattern (0)	2007/08/08
Ajax DOM 제어 (0)	2007/07/08
Ajax를 통해 특정영역에 페이지 로드 (0)	2007/07/05
Javascript Library in Ajax (0)	2007/04/29
SilverLight & Flex in WEB 2.0 (0)	2007/04/29

Posted by 써니루루

이 포스팅이 도움이 되었다면 구글에서 관련 정보를 찾아 보세요 ^^

ajax, javascript, Programming, Web2.0, 웹2.0, 프로그래밍

Trackback 0 Comment 0

Trackback : http://i-ruru.com/trackback/5

2007/04/29 05:00

SilverLight & Flex in WEB 2.0

2007/04/29 05:00 in Web/AJAX

얼마전 MS의 SilverLight 도 정식런칭되고

어도비의 플렉스도 오픈소스로 전환이 된다고하니

앞으로 WEB 2.0 기반의 디자인적인 측면의 향상이 심히 기대가 크네요.

지금도 전쟁같은 WEB 2.0의 기술들의 변화가 난무한데

더더욱 큰 변화가 눈앞에 보입니다. ^ ^

한편으로 두렵지만

한편으로는 두근두근 거리고 신나네요.

전 이상하게 배울게 많다는 것을 느낄때 신나고 두근거리네요~

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Web > AJAX' 카테고리의 다른 글

ASP.NET에서 사용할 정말 편한 Ajax Library (2)	2007/08/18
Ajax Pattern (0)	2007/08/08
Ajax DOM 제어 (0)	2007/07/08
Ajax를 통해 특정영역에 페이지 로드 (0)	2007/07/05
Javascript Library in Ajax (0)	2007/04/29
SilverLight & Flex in WEB 2.0 (0)	2007/04/29