Ajax in Rails

Program/Ruby
posted by 써니루루 2007. 7. 11. 10:57
http://www.onlamp.com/pub/a/onlamp/2005/06/09/rails_ajax.html

자주보는 Ajax 관련된 사설입니다.

Ajax on Rails 시간날 때 한번 해석해 보시길..

MOSS + AJAX + A tinkle of Imagination = Endless Web 2.0 Possibilities

Program/C#
posted by 써니루루 2007. 7. 9. 11:44
http://www.softwaremaker.net/blog/MOSSAJAXATinkleOfImaginationEndlessWeb20Possibilities.aspx

MOSS(Microsoft Office SharePoint Server (MOSS))를 이용한 .NET 개발이 활발하다.

이에 관련된 문서가 거의 없지만 MSDN을 보기 이전에 위 링크의 문서를 한번 확인해보도록 하자.

Ajax 기본을 이용한 동적 페이지 로딩 홈페이지

2007. 7. 9. 03:49

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

DOM 제어하기

Program/XML
posted by 써니루루 2007. 7. 8. 23:10
http://www.ibm.com/developerworks/kr/library/wa-ajaxintro5/

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

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

Ajax 예제

2007. 7. 8. 20:29

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

Professional Ajax

2007. 7. 8. 12:49

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

고전적인 Ajax 방식을 통해 페이지 메뉴와 페이지로드의 구상

Program/JavaScript
posted by 써니루루 2007. 7. 5. 13:29
어떻게 보면 메뉴링크와 통짜로 만들어진 페이지의 구조와 비슷하달까?

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

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

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 호출은 웹서버상에 올라가 있어야 사용할 수 있다는 단점아닌 단점이 있겠다.

동기 JavaScript 원격지 호출

Program/JavaScript
posted by 써니루루 2007. 3. 30. 02:20

// getFile 함수
// 파일을 읽어 파일 내용을 '문자열(string)'로 반환한다.
// @param url string - 파일의 경로
// @return string '파일 내용' / bool false
function getFile(url)
{
  // 인터넷 익스플로어러가 아닌 경우 XMLHttpRequest COM 객체를 호출
  if (window.XMLHttpRequest) {             
    AJAX=new XMLHttpRequest();             
  } else {
  // 인터넷 익스플로어러인 경우 Microsoft.XMLHTTP 객체를 ActiveX로 호출
    AJAX=new ActiveXObject("Microsoft.XMLHTTP");
  }
  // XMLHttpRequest 객체를 생성 했으면
  if (AJAX) {
     // GET 방식으로 입력받은 'url'으로 stream을 연다.
     AJAX.open("GET", url, false);                           
     // 스트림에 값을 전송한다.
     AJAX.send(null);
     // 스트림에서 내용을 받아와서 결과 값으로 반환해준다.
     return AJAX.responseText;                                        
  } else {
     // XMLHttpRequest에 실패했다.
     return false;
  }                                            
}

// 위에서 작성된 함수를 가지고 'http:// ... .. ' 위치에서 파일의 내용을 읽어와 변수에 할당
var fileFromServer = getFile('http://somedomain.com/somefile.txt');

// fileFromServer 변수 안에는 txt파일의 내용이 들어있다.

UI를 위한 Javascript 확장

Program/JavaScript
posted by 써니루루 2007. 3. 20. 00:37
기존에 많이 나와있던 UI들중 http://dojotoolkit.org/ 에서 제공되던 UI에 감탄할 수 밖에 없었다..

YUI(Yahoo의 라이브러리, http://developer.yahoo.com/yui/)의 라이브러리들도 있었지만 아직은 제대로된 예제를 써보기가 많이 어려웠는데, YUI를 확장한 YUI-EXT 라는 사이트에서 멋진 UI를 보여줘서 눈을 땔 수가 없었다.

http://www.yui-ext.com/deploy/ext-1.0-alpha3/docs/

페이지를 참조해보면 정말 감탄이 나올만한 UI 인터페이스를 제공한다.

물론 나와있는 많은 JavaScript 라이브러리들이 각자의 역할에 맞는 충실한 라이브러리들이 많지만. Document의 UI측면에서는 눈에 딱 삘이 꽂히는 UI를 선보인게 아닌가? 하고 조심스럽게; 생각해본다.

아직은 v1.0-a3 단계이지만 더 지켜볼만한 가치가 있지 않나 생각한다. ^ ^


참조 :
http://grails.codehaus.org/Korean+Tag+Library+Reference
http://blog.naver.com/nsjung74?Redirect=Log&logNo=110014401861
http://ajax.asp.net/docs/overview/AsynchronousLayerOverview.aspx
http://blog.naver.com/nsjung74/110014923804
http://blog.naver.com/nsjung74/110014922975
http://blog.naver.com/iamteri/150015239824
http://cafe.naver.com/ajaxa.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=2
http://cafe.naver.com/ajaxdev.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=146
http://ajaxian.com/archives/yahoo-pipes-support-in-dojo
http://ajaxpatterns.org/Ajax_Frameworks

티스토리툴바