소개

현대적인 웹 애플리케이션은 전부 다양한 Ajax 관련 개념을 바탕으로 한다. Ajax 기술의 사용은 웹 페이지에서 대화식 또는 동적 인터페이스의 증가로 이어졌다. Ajax 혁명은 웹 애플리케이션이 백그라운드에서 비동기 방식으로 서버에서 데이터를 검색할 수 있고, 웹 페이지와 서버 간의 상호 작용이 페이지가 페치되는 순간으로 제한되지 않는다는 개념에서 비롯되었다. 웹 페이지 개념은 애플리케이션의 백엔드와 지속적으로 통신함으로써 사용자와 상호 작용하는 수명이 긴 웹 애플리케이션으로 확장되었다. 이런 지속적인 통신에서 고려하는 사항을 몇 가지 예로 들면 다음과 같다.

My developerWorks의 Web development 그룹에 참여하기

My developerWorks Web development 그룹에서 다른 개발자와 함께 웹 개발에 대해 논의하고 리소스를 공유하자.

  • 정보 송수신
  • 임시 입력 유효성 검증(예: 비밀번호 보안 수준)
  • 서버에서 수행되는 분석과 규칙을 바탕으로 한 사용자 입력 자동 완성

클라이언트와 서버 간의 상호 작용과 관련된 작업을 수행하려면 애플리케이션에 각각의 통신 작업에 알맞은 통신 메커니즘을 제공하는 최적의 통신 계층이 필요하다.

이 기사에서는 통신 계층을 생성할 때 고려할 문제에 대해 살펴보고 이 계층에 빌드해야 하는 다양한 메커니즘에 대해 학습한다.


옛 방식대로 작업

과거에는 웹 페이지와 서버 간의 통신이 해킹으로 간주되었다. 서로 다른 HTML 요소를 사용할 의도가 없는 방식으로 이들을 사용해야만 이런 통신이 가능했다. 이런 요소들의 사용(또는 남용)을 고려한 이들 요소의 주요 특징은 서버에서 파일을 페치하는 것을 목적으로 한다는 점이다. 그래서 브라우저는 요소의 유형을 바탕으로 파일을 해석하는 역할을 한다. 이들 요소는 다음과 같다.

img
이미지 파일 페치
script
JavaScript™ 파일 페치
iframe
HTML 파일을 표시하며 페치도 가능

이들 요소의 목적은 웹 사이트의 마크업을 구성하는 것이다. 또한, JavaScript를 사용하여 DOM을 조작함으로써 동적인 방식으로 요소를 주입하고 페이지 라이프사이클의 일부로서 서버와 상호 작용할 수 있다. 다음 세 섹션에서 이들 요소의 사용 방법을 설명한다.


실행 후 망각: <img> 요소의 남용

img 요소의 주 용도는 서버에서 이미지를 페치하여 표시하는 것이다. 이미지를 페치하기 위해, 브라우저에서는 이 요소의 src 속성 값인 URL을 이용해 GET 요청을 만든다. 이 값은 브라우저의 "동일 출처 정책(same origin policy)"에 따른 제한을 받지 않으므로, 이미지의 URL은 그 이미지를 표시하는 페이지의 도메인으로 제한되지 않는다.

할 수 있는 일과 할 수 없는 일

img 요소를 사용하여 어떤 URL에서든 GET 호출을 수행하는 것은 가능하다. 그런 다음, 논리적으로는 다른 서버 상의 서비스를 호출할 수 있다.

캐싱에 주의

브라우저나 임의의 네트워크 노드에서 도중에 GET 호출을 캐시할 수 있다는 점을 기억하자. <img> 요소를 사용하여 호출하는 경우 (예를 들어, 임의의 URL 매개변수를 추가하여) 캐시할 수 없는 URL을 작성해야 할 수도 있다.

하지만, 브라우저에서는 그 GET 호출에 대한 응답이 이미지 파일이며 (화면에 해당 이미지 파일을 표시함으로써) 이 응답에서 그렇게 처리하는 것으로 가정한다. 응답이 사실은 이미지 파일이 아닌 경우에는, (img 요소가 페이지에 추가되었는지 여부와는 상관없이) src 속성이 설정될 때 GET 요청이 만들어지기 때문에 단순히 img 요소를 DOM 트리에 추가하지 않으면 된다.

서버에서 리턴하는 응답이 클라이언트에게는 관심의 대상이 아닌 "실행 후 망각(fire-and-forget)"하는 서비스 유형에 주로 이 img 요소를 사용할 수 있다. 이 요소는 "서버에서 일어나는 일은 서버 내에서만 머문다"는 규칙을 따르는 서비스에 적합하다.

Listing 1은 실행 후 망각하는 호출을 수행하는 방법을 나타낸 것이다.


Listing 1. 실행 후 망각하는 방식으로 서비스 호출
                
<script type=”text/javascript”>
function fireAndForgetService(targetUrl){
  // first we create an img object
  var imgNode = document.createElement(“img”);
  // then we set its src attribute to the url of the service we’d like to invoke
  // when the next code line is executed the browser creates a GET request
  // and sends it to targetURL
  imgNode.src = targetUrl;
  
}
// calling the function with any url – cross site scripting is possible here
  fireAndForgetService(“http://www.theTargetUrl.com/doSomething?param1Name:param1Value”);
</script>
            


페치 및 실행: <script> 요소 사용

script 요소를 대신 사용하는 경우 img 요소에 대해 앞서 언급한 거의 모든 것이 동일하게 작동한다. 이 통신 메커니즘 역시 브라우저의 "동일 출처 정책(same origin policy)"에 따른 제한을 받지 않는다.

그러나 <img> 및 <script> 요소의 한 가지 다른 점은 script 요소를 사용할 때 브라우저에서 실행 가능한 JavaScript 코드를 받을 것으로 예상한다는 점이다. 이것은 가볍게 사용해서는 안 되는 매우 강력한 메커니즘이다. 페치된 스크립트가 호출되면 쿠키, DOM, 히스토리 등을 포함하여 페이지에서 액세스할 수 있는 모든 것에 호출된 스크립트가 액세스할 수 있다.

할 수 있는 일과 할 수 없는 일

브라우저에서 실행되는 코드와 페치된 스크립트 사이에서 프로토콜을 정의해야 한다. 자신의 도메인에서 스크립트를 페치하는 경우에는 이 코드가 다양한 함수, 유틸리티 및 애플리케이션 코드의 제한조건에 익숙할 것이다. 이 프로토콜은 기본적으로 동일한 애플리케이션의 두 컴포넌트 간에 이루어지는 상호 작용일 수 있다. 서버는 브라우저에서 실행해야 하고 국제화 제한 사항이나 다른 사용자별 적응을 처리하는 것과 같이 브라우저에서 다양한 조작을 할 수도 있는 코드의 일부를 요청의 일부로서 수신할 수 있다.

JSON

JSON(JavaScript Object Notation)은 JavaScript 오브젝트를 설명하기 위한 한 가지 방법이다. 이것은 매우 강력한 데이터 형식으로서, 브라우저에서 JavaScript 오브젝트로 신속히 변환할 수 있다. 참고자료를 통해 JSON에 대한 자세한 내용을 확인할 수 있다.

다른 서버에서 코드를 페치해야 할 때 더욱 흥미로워진다. 이 경우와 해당 도메인을 신뢰할 만한 경우, 페치된 스크립트는 애플리케이션 생성에 어울리지 않으므로 정적 데이터만 페치할 수 있다. 애플리케이션에서 이 데이터를 처리하려면 어떻게 해서든지 페치된 내용을 애플리케이션의 코드와 통합해야 한다. 페치된 코드가 JSON 오브젝트를 허용하는 함수 호출로 랩핑되거나 채워진 JSON 오브젝트임을 기본적으로 제시하는 JSONP 개념을 사용할 수 있다. (이런 호출을 콜백이라고 한다.) 그 함수의 이름은 페치된 스크립트의 URL 중 일부인 URL 매개변수로 전송되고, 이는 그 함수의 이름으로 랩핑된 JSON 오브젝트를 제공하는 것은 받는 사람의 도메인에 달렸다.

Listing 2는 JSONP를 바탕으로 클라이언트와 서버 간의 통신을 수행하는 방법을 나타낸 것이다.


Listing 2. JSONP 접근 방식
<script type=”text/javascript”>
// the next function receives the following arguments:
// targetUrl – the url from which data is fetched and handled later as 
//             jsonp
// jsonpName – the name of the url parameter that the target url accepts and
//             knows to read from the callback name 
// callbackName – the name of the function that will handle the returned
//             json object
function invokeJSONP(targetUrl, jsonpName ,callbackName){
  // first we create a script object
  var scriptNode = document.createElement(“script”);
  // set its type so upon return it would be executed
  scriptNode.type = “text/javascript”;
  // set its src attribute to the url of the fetched script
  // and add to the url the callback name 
  scriptNode.src = targetUrl+”?”+ targetDomainJsonpName+”=”+callbackName;
  // adding the script to the page to get it up and running
  document.getElementsByTagName(“head”)[0].appendChild(scriptNode);
  
}
// calling the function with any url – cross site scripting is possible here

function handleJsonp(infoObject){
  validateInfoObject(infoObject);
  handleInfoObject(infoObject);
}

  invokeJSONP (“http://targetUrl.com/provideJsonpData”,“jsonpCallback”, “handleJsonp”);
</script>  

한 가지 작은 차이점을 언급할 필요가 있겠다. <img> 요소를 사용할 때는 DOM 트리에 이 요소를 추가할 필요가 없다. 이와는 반대로, 스크립트 페치를 실행할 때는 <script> 요소를 DOM 트리에 추가하지 않으면 GET 요청이 생성되지 않는다.

JSONP 호출을 위한 API, 특히 콜백 이름을 제공해야 하는 애플리케이션에 있는 매개변수 이름을 게시하는 것은 대상 도메인에 달렸다. API의 다른 부분에는 응답 본문으로 전송되는 JSON 오브젝트의 구조가 포함되어야 한다.

Listing 2에서 대상 도메인은 jsonpCallback(다른 도메인에서는 이름이 바뀔 수 있음)이라는 URL 매개변수를 받아들이는데, 이때 도메인에서 handleJsonp에 대한 호출인 스크립트를 리턴할 것으로 예상한다. 이 스크립트는 Listing 3과 같은 내용일 것이다.


Listing 3. JSONP가 대상 도메인에서 리턴될 때의 내용
handleJsonp( {
  ‘height’:185,
  ‘units’:’cm’,
  ‘age’: 30,
  ‘favoriteFruit’:’apple’,
  ‘likesDogs’: true
  }
  );


미들맨에게 도움 요청: <iframe> 요소 사용

iframe은 페이지 내에 페이지를 임베드할 수 있게 해주는 요소이다. 두 개의 페이지가 같은 도메인에 있었던 경우 이 두 페이지는 서로 통신하며 정보를 전송할 수 있다.

Ajax 애플리케이션에서는 이런 패러다임을 바탕으로 기본 페이지에 있는 iframe 요소를 사용하여 사용자 상호 작용과 클라이언트 및 서버 간 통신의 역할을 분리하는 것이 일반적이다. 이 요소는 사용자가 볼 수 없게 숨겨지므로, 애플리케이션의 사용자 상호 작용 활동을 전혀 방해하지 않는다.

이런 공동 작업을 통해 서버에서 어떤 종류의 내용이라도 가져올 수 있고 페이지를 새로 고치지 않고 양식을 제출할 수 있으며—모든 것은 사용자가 알지 못하게 자동으로 이루어진다.

할 수 있는 일과 할 수 없는 일

모든 요소가 페이지를 구성하는 이전의 메커니즘과는 달리, iframe 요소는 그 자체로 하나의 페이지이다. 이 요소는 특정한 종류의 내용(예: 이미지)이나 프로세스(수신한 내용의 실행)에 제한되지 않는다. 따라서 어떤 서버에서 어떤 종류의 데이터라도 검색하거나 서버로 데이터를 전송할 수 있다. 그리고 어떤 내용이라도 수신 가능하기 때문에 가능한 모든 형식을 가진 데이터를 바탕으로 상호 작용을 수행할 수 있어, 서버 측에서의 유연성이 향상된다. 양식 제출을 바탕으로 서버로 데이터를 보낼 수 있다. 또한, GET 외에도 POST 요청을 사용할 수 있다. 여러 파트로 구성된 요청이 가능하므로, 클라이언트 시스템의 파일을 서버로 업로드할 수 있다. (페이지를 새로 고치면 항상 사용자와의 나머지 상호 작용이 중단된다는 점에 주의한다.)

iframe을 사용하는 것이 완전 무결한 방법은 아니다. 사이트 상호 간의 호출이 유효하기 때문에, 애플리케이션의 보안이 취약해질 수 있다. 그 밖에도, 이 메커니즘을 바탕으로 한 모든 상호 작용이 페이지의 히스토리 오브젝트로 푸시되므로, 뒤로/앞으로 동작으로 탐색하는 사용자에게 혼란을 줄 수 있다.

iframe 사용

iframe 숨기기

iframe을 숨길 수 있는 여러 가지 방법이 있는데, 이 요소를 화면 바깥에 배치하는 방법부터 크기를 0으로 줄이는 방법까지 거의 모든 방법을 쓸 수 있다. 표시 스타일을 숨기기로 설정할 수도 있다.

하지만, 표시 스타일을 없음으로 설정할 수는 없다. 만약 이렇게 설정하면 GET 요청을 만들 수 없고 서버에서 필요한 내용을 페치할 수 없다.

iframe 요소를 사용하여 프로그램을 통한 방법으로 서버에서 내용을 페치하는 것은 script 요소를 사용하는 것과 비슷하지만,—한 가지 중요한 차이점이 있다. script 요소를 만들어 페이지에 연결한 후, 사용자가 화면에 이 요소가 표시됨으로써 혼동하지 않도록 이 요소를 숨겨야 한다는 점이다.

iframe 요소를 양식 제출의 대상으로 사용할 수 있으므로, 양식 제출로 인한 페이지 새로 고침을 예방할 수 있다.

Listing 4는 프로그램 방식으로 클라이언트와 서버 간 통신을 수행하는 대신 iframe 요소를 애플리케이션 마크업의 일부로 사용하여 파일을 업로드하는 방법을 나타낸 것이다.


Listing 4. <iframe>을 이용한 파일 업로드
<!—a hidden iframe that is the target of the form that would be used to upload a file -->
	 
<iframe id="IFrame" name="IFrame"
	  style="width:0px; height:0px; border:0px"
	  src="blank.html">
</iframe>

<!—the form is connected to the previous iframe by the target attribute, thus basically 
reloading that hidden frame upon form submission -->

<form name="UploadFile"  target="IFrame" method="POST"
    action="http://myServer/fileUploadServiceURL"
    enctype="multipart/form-data">
<input type="file" name="uploadFileNameId"/>
<input type="submit" value="Upload" name="submit"/>
</form>


Ajax 방식으로 작업하는 방법

Ajax 기반 웹 애플리케이션은 보통 서버에서 작동하는 애플리케이션에 대한 클라이언트 역할을 하므로, 그 서버로 데이터를 앞뒤로 보내며 통신 기능을 집중적으로 사용하는 애플리케이션이 되는 결과를 낳는다. 데이터 전송 기능을 제공할 메커니즘이 필요하다. 애플리케이션의 주요 컴포넌트로서, 이런 메커니즘은 최대한 가볍고 안전해야 한다. 다행히도, 모든 현대적 브라우저에는 정확히 이런 목적으로 사용할 수 있는 오브젝트, 즉 XHR(XMLHttpRequest)이 갖춰져 있다. 실제로 가벼운 XHR은 페이지를 검색한 서버로 한정되는 요청을 생성한다. XHR은 사이트 간 스크립팅 문제를 제거하며, 텍스트만 전달할 수 있다.

할 수 있는 일과 할 수 없는 일

애플리케이션은 XHR 오브젝트를 사용하여 서버로 정보를 보내고 서버에서 데이터를 페치할 수 있다. 이 메커니즘은 앞서 설명한 메커니즘에 비해 여러 가지 장점이 있다.

어떤 유형의 HTTP 메소드라도 사용 가능
현재 도입된 대부분의 일반적인 서버 아키텍처는 REST 원리를 기반으로 하기 때문에, GET, PUT, POST 및 DELETE 요청을 사용해야 한다. 클라이언트와 서버 간 통신의 핵심이라 할 수 있는 XHR 오브젝트의 사용으로 RESTful 서버 아키텍처를 사용할 수 있다.
완료 시 알림
XHR 오브젝트는 생성에서부터 응답이 완전히 로드되기까지 여러 가지 상태에서 존재할 수 있다. 각각의 상태 변화 시, 이벤트가 실행되고 앞으로의 상태 변화 시 호출할 콜백을 정의할 수 있다.

이 이벤트 핸들러를 통해 서버에서 페치된 데이터에 의존하는 코드가 해당 데이터를 사용할 수 있을 때 실행되도록 할 수 있다.

페이지 히스토리에 개입 없음
XHR 호출은 페이지의 히스토리 오브젝트에 반영되지 않으므로, 브라우저의 뒤로 및 앞으로 동작의 일반적인 용도에서 벗어나지 않는다.

Cross-Origin Resource Sharing

CORS(Cross-Origin Resource Sharing) 메커니즘을 사용하면 Cross-site Ajax 호출이 가능하다. 하지만, CORS가 아직은 등장한 지 얼마 되지 않아 일부 브라우저에서만 지원되며, 서버 측에서 추가로 코딩 작업을 해야 한다.

크로스 사이트 스크립팅(XSS)이 허용되지 않음
이 애플리케이션은 XSS를 수행할 능력이 결여되어 있기 때문에 더 안전하다.
블로킹하거나 못하거나
요청-응답 주기가 다음 중 어떤 것이 될지 정의할 수 있다.
  • 동기(브라우저가 응답을 기다리는 동안 아무런 코드도 실행되지 않음)
  • 비동기(응답이 도착했을 때 콜백을 실행할 수 있음)
XML 또는 다른 모든 형식
응답이 XML 형식으로 되어 있는 경우, 그 응답 데이터에 대해 완전한 DOM 트리가 만들어진다. 응답의 원시 텍스트 내용도 사용 가능하고, 응답이 JSON과 같은 다른 형식으로 도착할 때 이를 처리할 수 있다.

그래도 XHR 오브젝트와 관련된 모든 것이 좋은 면만 있는 것은 아니다. 텍스트만 보낼 수 있기 때문에, 여전히 iframe을 사용하여 파일을 서버에 업로드해야 한다. 그 밖에도, 다른 브라우저에서는 이 오브젝트의 작성이 다른 방법으로 이루어진다.


요약

클라이언트와 서버의 상호 작용은 모든 현대적 웹 애플리케이션의 중추이다. 이 기사에서는 애플리케이션 상호 작용을 위해 사용할 수 있는 공통의 메커니즘에 대해 학습했다. 이 기사에서 설명한 모든 메커니즘이 모든 애플리케이션에서 필요한 것은 아니다. 어떤 메커니즘이 필요하고 어떻게 사용할지 결정하는 것은 개발자의 몫이다.

수많은 JavaScript 프레임워크에 Ajax 통신 메커니즘 세트가 부분적이거나 완전하게 구현되어 있다. 어떤 프레임워크를 사용하고 어떤 메커니즘을 구현할지 결정할 때 이 점을 고려한다.




2011/09/14 01:59 2011/09/14 01:59
// 서버측

[0] = "테스트1";
[1] = "테스트2";
[2] = "테스트3";

// 배열 받기

var bo_category = new Array(); // 전역변수를 배열로 선언

var result = request.responseText.split("\n"); // 엔터 구분자를 잘라서 배열로 만듬

for (var i=0; i<result.length; i++) {
    eval("bo_category"+result[i]); // bo_category 전역변수 배열에 배열 추가
};

// 결과

bo_category[0] = "테스트1";
bo_category[1] = "테스트2";
bo_category[2] = "테스트3";

3 개의 배열 생성



2010/06/07 14:14 2010/06/07 14:14

First include this library at the top of your code (you can find the library in the source code section of this page). Do it in <head> tag. After loading the library you can write your code. You can find demo page here: demo page

Source code for index.html

<!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-US" lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Iframe Ajax</title>
    <script type="text/javascript" src="webtoolkit.aim.js"></script>
    <script type="text/javascript">
        function startCallback() {
            // make something useful before submit (onStart)
            return true;
        }

        function completeCallback(response) {
            // make something useful after (onComplete)
            document.getElementById('nr').innerHTML = parseInt(document.getElementById('nr').innerHTML) + 1;
            document.getElementById('r').innerHTML = response;
        }
    </script>
</head>

<body>

    <form action="index.php" method="post" onsubmit="return AIM.submit(this, {'onStart' : startCallback, 'onComplete' : completeCallback})">
        <div><label>Name:</label> <input type="text" name="form[name]" /></div>
        <div><label>File:</label> <input type="file" name="form[file]" /></div>
        <div><input type="submit" value="SUBMIT" /></div>
    </form>

    <hr/>

    <div># of submited forms: <span id="nr">0</span></div>
    <div>last submit response (generated by form action - index.php file): <pre id="r"></pre></div>

</body>
</html>

Source code for webtoolkit.aim.js

/**
*
*  AJAX IFRAME METHOD (AIM)
*  http://www.webtoolkit.info/
*
**/


AIM = {

    frame : function(c) {

        var n = 'f' + Math.floor(Math.random() * 99999);
        var d = document.createElement('DIV');
        d.innerHTML = '<iframe style="display:none" src="about:blank" id="'+n+'" name="'+n+'" onload="AIM.loaded(\''+n+'\')"></iframe>';
        document.body.appendChild(d);

        var i = document.getElementById(n);
        if (c && typeof(c.onComplete) == 'function') {
            i.onComplete = c.onComplete;
        }

        return n;
    },

    form : function(f, name) {
        f.setAttribute('target', name);
    },

    submit : function(f, c) {
        AIM.form(f, AIM.frame(c));
        if (c && typeof(c.onStart) == 'function') {
            return c.onStart();
        } else {
            return true;
        }
    },

    loaded : function(id) {
        var i = document.getElementById(id);
        if (i.contentDocument) {
            var d = i.contentDocument;
        } else if (i.contentWindow) {
            var d = i.contentWindow.document;
        } else {
            var d = window.frames[id].document;
        }
        if (d.location.href == "about:blank") {
            return;
        }

        if (typeof(i.onComplete) == 'function') {
            i.onComplete(d.body.innerHTML);
        }
    }

}



출처 : http://www.webtoolkit.info/ajax-file-upload.html

 




2009/08/07 21:35 2009/08/07 21:35
1. jqac
 - jQuery를 활용한 Auto-complete/suggest javascript 라이브러리
 - 다운로드 : http://code.google.com/p/jqac/downloads/list
 - 데모 : http://www.cs.bgu.ac.il/~ygleyzer/files/utils/jqac/jqac_example.html

2. AutoComplete 1.2
 - prototype과 scriptaculous를 활용한 Auto-complete javascript 라이브러리
 - 다운로드 : http://www.beauscott.com/examples/autocomplete/autocomplete.zip
 - 데모 : http://www.beauscott.com/examples/autocomplete/doc/examples.html
 
3. AutoCompleter(mootools)
 - MooTools를 활용한 Auto-complete javascript 라이브러리
 - 다운로드 : http://digitarald.de/project/autocompleter/#download
 - 데모 : http://digitarald.de/project/autocompleter/1-1/showcase/delicious-tags/, http://digitarald.de/project/autocompleter/1-1/showcase/local/

4. AJAX AutoComplete
 - Jim Roos가 자체로 만든 Ajax framework
 - 다운로드 : http://jimroos.com/AutoComplete.zip
 - 데모 : http://www.jimroos.com/2007/05/ajax-autocomplete.html

5. YUI Autocomplete
 - Yahoo! UI Library로 만든 Auto-complete
 - 다운로드 : http://brandspankingnew.net/download.php?file=autosuggest_v2.zip
 - 데모 : http://developer.yahoo.com/yui/examples/autocomplete/index.html

6. AutoSuggest
 - 심플한 Javascript를 활용한 Auto-complete
 - 다운로드 : http://www.brandspankingnew.net/specials/ajax_autosuggest/ajax_autosuggest_autocomplete.html
 - 데모 : http://www.brandspankingnew.net/specials/ajax_autosuggest/ajax_autosuggest_autocomplete.html

7. dhtmlxCombo
 - 콤보형 Auto-complete
 - 다운로드 : http://www.dhtmlx.com/docs/download/dhtmlxCombo.zip
 - 데모 : http://dhtmlx.com/docs/products/dhtmlxCombo/index.shtml

8. AutoComplete (mootools)
 - scriptaculous를 활용한 Auto-complete
 - 다운로드 : http://script.aculo.us/
 - 데모 : http://demo.script.aculo.us/ajax/autocompleter


2009/07/16 18:07 2009/07/16 18:07
팁이라기보단 참고정도로 봐주세요...^^;
prototypejs 를 이용하구요...일반적으로 사용하지 않는 분들도 테스트 해볼 수 있는 페이지를 따로 올려볼께욤 조만간에;;;
iframe resize 에 대해 질문도 많이 올라오고 해서 테스트 해보시라고 올립니다.

참고는 여기서...
http://ajaxstudy.net/demo/view.php?&uid=17&page=1

Event.observe(window,'load',function() {

    Event.observe('aa','load',function() {

        new ASiframeresize($('aa'));

    });

    new ASiframeresize($('aa'));

});

function ASiframeresize(el) {

    this.El = el;
    this.oldLocation = null;
    this.setCount = 0;
    this.maxCount = 10;
    this.setDelay = 200;
    this.setTimer = null;
    this.setup();


}

ASiframeresize.prototype = {

    setup : function() {

        var oThis = this;
        Event.observe(this.El.contentWindow.document,'mousedown', function(event) {

            if(Event.element(event).tagName.toLowerCase() != 'body') {

                if(oThis.setTimer) {
                    oThis.setCount = 0;
                    window.clearTimeout(oThis.setTimer);
                    oThis.setTimer = null;
                }
                oThis.resize();

            }

        });

        this.resize();

    },

    resize : function() {

        this.setCount++;

        if(this.El.contentWindow.document.body) {

            this.El.setStyle({
                
                height : this.El.contentWindow.document.body.offsetHeight + 'px'

            });

        } else {

            this.El.setStyle({
                
                height : this.El.contentWindow.document.documentElement.offsetHeight + 'px'

            });


        }
        this.move();

    },

    move : function() {

        if(this.setCount > this.maxCount) {

            this.setCount = 0;
            if(this.setTimer) {
                window.clearTimeout(this.setTimer);
                this.setTimer = null;
            }

        } else {

            var oThis = this;
            var fn = function(){ oThis.resize();}
            this.setTimer = window.setTimeout(fn,oThis.setDelay);

        }

    }

    

}

허접하지만 혹시라도 그럼^^;

출처: http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=ajax&wr_id=893&page=1



2009/04/27 19:07 2009/04/27 19:07

웹 2.0 스타일의 로딩 애니메이션 gif (또는 다른 타입의 이미지)를 구할 수 있는 사이트들과 자바스크립트 프레임워크를 사용하여 Loading  패널을 구현할 수 있게 하는 정보들을 모은 사이트들입니다.

사용자 삽입 이미지

http://www.ajaxload.info/

JQuery 를 사용하여 Loading 패널을 띄우기

http://docs.jquery.com/Ajax/load

YAHOO YUI 를 사용하여 Loading Panel 만들기
http://developer.yahoo.com/yui/examples/container/panel-loading.html

GIF loading images
http://www.webscriptlab.com/

Load Info GIF Generator
http://www.loadinfo.net/




2009/04/15 23:55 2009/04/15 23:55
<html>
<head>
    <title>http://www.blueb.co.kr</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script>
var please_wait = null;

function open_url(url, target) {
    if ( ! document.getElementById) {
          return false;
    }

    if (please_wait != null) {
          document.getElementById(target).innerHTML = please_wait;
    }

    if (window.ActiveXObject) {
          link = new ActiveXObject("Microsoft.XMLHTTP");
    } else if (window.XMLHttpRequest) {
          link = new XMLHttpRequest();
    }

    if (link == undefined) {
          return false;
    }
    link.onreadystatechange = function() { response(url, target); }
    link.open("GET", url, true);
    link.send(null);
}

function response(url, target) {
    if (link.readyState == 4) {
         document.getElementById(target).innerHTML = (link.status == 200) ? link.responseText : "링크가 정확하지 않습니다. 에러코드: " + link.status;
    }
}

function set_loading_message(msg) {
    please_wait = msg;
}

</script>
</head>
<body>

<table>
<tr>
<td valign=top width=150>
<H5>외부문서 불러오기</H5>
<a href="javascript:void(0)" onclick="open_url('http://www.blueb.co.kr/rss_xml.php?table=community_QNA','my_site_content');">Go to page 1</a><br>
<a href="javascript:void(0)" onclick="open_url('http://www.blueb.co.kr/rss_xml.php?table=community_tipntech','my_site_content');">Go to page 2</a><br>
<a href="javascript:void(0)" onclick="open_url('http://www.blueb.co.kr/rss_xml.php?table=JS_50','my_site_content');">Go to page 3</a><br>
<a href="javascript:void(0)" onclick="open_url('http://www.blueb.co.kr/rss_xml.php?table=JS_02','my_site_content');">Go to page 4</a><br>
<a href="javascript:void(0)" onclick="open_url('링크없다.html','my_site_content');">Broken Link</a><br>
</td>
<td valign=top>
<div id="my_site_content">
</div>
</td>
</tr>
</table>


2008/06/04 15:43 2008/06/04 15:43

요즘 ajax를 좀끄적이다 보니 괜찮은 자료가 있어서 올려놓는다..

좋은 자료인거같다.. 샘플구하기가 쉽지많은 않다..



//XMLHttpRequest 객체생성
var oXmlHTTP = getXmlHttp();

if (window.XMLHttpRequest)
{
 oXmlHttp = new XMLHttpRequest();
}else{
 oXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}

oXmlHTTP.open("POST", "AJAX.asp", false); // 동기방식으로 연결


//리퀘스트 내용을 XML문자열로 만든다. ASP는 기본적으로 EUC-KR로 처리하기 때문에 따로 정의할필요는 없습니다.
//한글을 전송할때는 태그내용을 <![CDATA[ ]]>로 선언해야 합니다.
var strXML = "";
strXML = strXML + "<gwinaemi>";
strXML = strXML + "<strList><![CDATA[내용]]></strList>";
strXML = strXML + "</gwinaemi>";

//리퀘스트 전송
oXmlHTTP.send(strXML);

//받아온 XML문자열에서 에서 strList태그의 내용을 추출 viewText객체의 innerHTML 로 넣는다.
eId("viewText").innerHTML = oResXML.getElementsByTagName("strList").item(0).firstChild.nodeValue;


--------------------------------------------------------------------------------------------------------------
'''''AJAX.asp파일쪽의 처리


'''''받아온 XML문자열을 Request.BinaryRead로 읽어서
'''''microsoft.xmldom 파서로 읽어 Scripting.Dictionary객체로 반환
'''''필요한 리퀘스트 내용은 딕셔너리에서 호출한다.

Dim vntPostedData, lngCount
lngCount = Request.TotalBytes
vntPostedData = Request.BinaryRead(lngCount)

Dim oXMLDom                       
Set oXMLDom = Server.CreateObject("microsoft.xmldom")

oXMLDom.load(vntPostedData)

Dim oDicXMLRequest
set oDicXMLRequest = Server.CreateObject("Scripting.Dictionary")

If oXMLDom.parseError = 0 Then

        Dim objNode
        Set objNode = oXMLDom.documentElement
        set oXMLDom = nothing

        Dim i
        For i = 0 To objNode.childNodes.length - 1
                oDicXMLRequest.Add objNode.childNodes.Item(i).nodeName, objNode.childNodes.Item(i).Text
        Next

        set objNode = nothing
else
        set oXMLDom = nothing       
End if


Response.ContentType = "text/xml"
Response.Charset = "ks_c_5601-1987"


''''''''''''''''XML문서의 형태로 돌려보낸다. encoding을 ASP의 기본엔코딩인 ks_c_5601-1987로 지정한다.
Response.write "<?xml version=""1.0"" encoding=""ks_c_5601-1987""?>" & chr(13) & chr(10)


''''''''''''''''oDicXMLRequest에서 strList의 내용을 불러낸다.
Response.write "<gwinaemi><strList><![CDATA[" & oDicXMLRequest("strList") & "]]></strList></gwinaemi>"




2007/11/22 15:06 2007/11/22 15:06

Post 방식으로 전송하는 것을 해보려고 하는데요.

이건 Asp&Ajax 에서 빵쓰님이 한번 쓰셨었던 강좌입니다. ㅋㅋ

완전 똑같죠 !

자. 시작해볼까요. 일단,

사용자 삽입 이미지

이렇게 폼을 만들었고요. 밑에 있는 테이블에는 전송이 완료되면 완료된 것을 다시 가져와서 저런 식으로 해줄 겁니다.



일단 우리가 잘 쓰는 request 만드는 함수를 쓰고요.


var request = null;
function createRequest(){
 try{
  request = new XMLHttpRequest();
 } catch(trymicrosoft){
  try{
   request = new ActiveXObject("Msxml2.XMLHTTP");
  } catch(othermicrosoft){
   try{
    request = new ActiveXObject("Microsoft.XMLHTTP");
   } catch(failed){
    request = null;
   }
  }
 }
 
 if(request == null) location.reload();
}

createRequest();


이 함수에 대한 설명은 지난 강좌들에서 설명했으므로 패스 -.


자자 그러면

요청함수와 받는함수를 만들어볼까요?

요청함수ajaxPostSend()받는함수ajaxPostRequest() 로 할 예정입니다.


폼의 html을 보자면


<form>
 아이디 : <input type="text" name="userId"><br>
 암호 : <input type="password" name="pwd"><br>
 이름 : <input type="text" name="userName"><br>
 <input type="button" value="전송" onclick="ajaxPostSend()">
</form>

<table border="1" width="300" height="200">
 <tr>
  <td id="requestResult"></td>
 </tr>
</table>


button에 요청함수를 걸어서 전송할 수 있게 했고요.

테이블의 td 안에 id를 주어서 안에 돌려받은 것을 넣을 수 있게 해줍니다.


여기까지는 쉽지요?


요청함수입니다.


function ajaxPostSend(){
  var url = "ajax_post.asp";
  var postString = "";
 
  postString   = "userId=" + encodeURIComponent(document.getElementById("userId").value);
  postString += "&pwd=" + encodeURIComponent(document.getElementById("pwd").value);
  postString += "&userName=" + encodeURIComponent(document.getElementById("userName").value);
 
  request.open("POST",url,true);  
  request.onreadystatechange = ajaxPostRequest;
  request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=euc-kr");
  request.send(postString);
 }



젤 중요한건. setRequestHeader 입니다.

get 방식은 요청Body가 비어있는 형식이지만 post 방식은 요청Body에  담아서 보냅니다.

그렇기에 지금 보내려는 정보가 어디 있는지 알려줘야 하는거죠.

setRequestHeader를 쓰지 않는다면 서버는 get 방식으로 데이터를 읽으려할 것입니다.

그렇기에 post 방식이라면 삭제해선 안되는 줄입니다.


postString 이라는 곳에 보낼 변수를 담습니다.

하지만, get과 마찬가지로 인코딩을 바꾸거나 escape 해주어야하죠.

제가 쓴 encodeURIComponent 함수는 utf-8 방식으로 인코딩합니다. 그래서 한글이 깨질 수 도 있는거죠.

한글을 생각하신다면 저 부분은 escape로 고쳐주시면 한글이 깨지지 않아요.

send에 우리가 만든 것을 담아서 보내버립니다.

get 방식이라면 요청본문이 null 이기에 null을 보내고

post라면 postString을 보낼것이기에 넣어주는 것이지요.


open함수의 첫번째는 POST로 알려주고 세번째인자의 동기/비동기 여부는 현재 비동기로 준 상태입니다.

제가 생각하기에는 POST로 보내고 디비에 insert를 시키는 작업이라면 동기로 주는 것도 낳을듯 하네요.

(이렇게 된다면 ajax를 쓰는 것보단 따로 페이지를 넘어갔다 오는 것이 효율적이겠지요)




이제는 받는 함수입니다.


function ajaxPostRequest(){
  if(request.readyState == 4){
   if(request.status == 200){
    var strText = request.responseText;
    document.getElementById("requestResult").innerHTML = strText;
   }
  }
 }


간단하죠?

그냥 text 형식으로 가져와서 지정된 id의 innerHTML을 고치는 형식입니다.



요청처리 asp 페이지도 간단합니다.


<% Session.CodePage = 949 %>
<%
Response.CharSet = "euc-kr"
Response.AddHeader "Pragma","no-cache"
Response.AddHeader "Expires","0"

response.write "사용자아이디 : " & request("userId") &"<br>"
response.write "사용자비번 : " & request("pwd")&"<br>"
response.write "사용자이름 : " & request("userName")
%>


한글이 깨지지 않도록 여러가지를 셋팅한후. 보낼 정보를 그냥 찍어버리는 거죠.



Post로 보내는 전송은 로그인쪽에서 쓰일 듯 하네요.

아니면 다중 select박스를 구현할때?



get과 post 방식 두가지로 ajax전송하는 법. 강좌를 다썼네요.

아마 이다음 강좌는 json으로 이중셀렉트 하기/post방식으로 file 보내기 둘중 하나가 될꺼 같습니다.

post 방식으로 file 보내기는 빵스님이 해주셨으면 하는 바램이 살-짝 있습니다. ㅎㅎ





2007/11/22 14:51 2007/11/22 14:51
출처 http://webarty.com



AJAX에 대해서 인터넷 검색을 하다 여기저기에 있는 것들을 허락없이 재구성했습니다.ㅜㅜ
활용처는 개발자의 상상력과 응용력에 따라 무한히 확장될 수도 있겠네요.
prototype.js를 이용하여 확장한 것이 바로 아래 것들,
http://script.aculo.us/
http://openrico.org/
여기 나온 예제들도 함 봐보세요. 이런 걸 RIA라고들 하네요.
http://wiki.script.aculo.us/scriptaculous/show/Demos
http://openrico.org/rico/demos.page
몇 년전만 해도 정말 이런거 할려면 삽질에 삽질을 거듭해야 했는데...
세상 너무 좋아졌습니다...ㅜㅜ

AJAX는...
- 동일 도메인 내에서만 가능합니다.(웹 C/S라고들 하던데...)
(만약 서버투서버(자바<->ASP)로 데이터 통신을 하고 싶다면 XML-RPC를 이용해 보세요.
순수 ASP로만 짜여진 것도 존재합니다.)
- XMLHTTPRequest를 이용하여 HTTP로 통신합니다.
: XMLHTTPRequest는 utf-8로 처리합니다.
- AJAX를 이용한 MVC 모델2 패턴 개발 방법이 가능합니다.
- 자바스크립트로 서버측 데이터를 핸들링합니다.
- 자바스크립트로 OOP도 하네요...ㅡㅡ;


아래 샘플은 prototype.js 파일이 있어야 실행가능합니다.
www.prototypejs.org에서 prototype.js 파일을 다운로드 받으세요.^^

아래 샘플 이외에 Ajax.PeriodicalUpdater 함수도 함 사용해보세요.
지정한 초마다 응답 페이지에서 서버쪽 데이터를 끌어옵니다.
물론 페이지 리프레쉬없이요.
이외에도 다른 함수를 보면 여러개의 이벤트를 동시에 실행할 수 있습니다.
api 참조하세요.
http://www.prototypejs.org/api

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<script src="lib/prototype/prototype.js" type="text/javascript"></script>
<script language="javascript">
function ajaxRequest(strResponseURL)
{
var httpObj = new Ajax.Request
(
strResponseURL,
{
// 기본값은 비동기식, 동기식으로 작성할려면, api 참조
// method:'post', // post가 기본값이므로 생략 가능
parameters:Form.serialize('frm'),
// form의 요소들을 통째로 응답페이지로 전송
onSuccess:displayJson,
// 성공했을 경우, displayJson 함수 호출
// onSuccess:displayTextHtml // 일반 텍스트나 html 형식을 경우
onFailure:displayError
// 실패했을 경우, displayError 함수 호출
}
);
}


function displayJson(responseHttpObj)
{
var returnData = responseHttpObj.responseText;
// 만약 XML 형태로 데이터를 받아온다면 responseHttpObj.responseXML

returnData = eval("(" + returnData + ")");

switch (returnData.dataType)
{
// 사실 응답 페이지가 utf-8로 저장되었다면 decodeURIComponent를 안써도 상관없지만,
// 그래도 혹시나 하여 사용
case 'one' : $("results").innerHTML = decodeURIComponent(returnData.response);
break;

case 'array' : viewResponse(returnData.response);
break;

default : $("results").innerHTML = decodeURIComponent(returnData);
}
}


function displayTextHtml(responseHttpObj)
{
var returnData = responseHttpObj.responseText;

$("results").innerHTML = decodeURIComponent(returnData);
}


function viewResponse(data)
{
var intLength = data.length;
var strHTML = "";

for(var i=0; i<intLength; i++)
{
strUserID = decodeURIComponent(data[i].userID);
strUserName = decodeURIComponent(data[i].userName);

strHTML += "ID : " + strUserID + '<br>';
strHTML += "이름 : " + strUserName + '<br>';
}

$("results").innerHTML = strHTML;
}


function displayError()
{
$("results").innerHTML = 'AJAX failed';
}

/*
// 2번과 3번은 skip해도 됩니다.

1. AJAX 응답 페이지는 utf-8로 인코딩하여 저장
: 한글 처리를 위해서 반드시 필요
: 여기서는 json.asp, json2.asp, json3.asp을 utf-8 인코딩 형식으로 저장하였음.
2. 응답 페이지에서 단일값을 전송할 경우, displayJson
{
"dataType":"one",
"response":"realsnake"
}
3. 응답 페이지에서 배열로 전송할 경우, displayJson
{
"dataType":"array",
"response":
[
{
"name":"realsnake",
"height":"???"
}
]
}
4. 응답페이지에서 text나 html을 통째로 전송할 경우 : displayTextHtml
*/
</script>
</head>
<body>
<h3>AJAX in prototype.js Example</h3>
<p>
prototype.js를 이용한 AJAX 예제
</p>
<form id="frm">
<!--
<input type="text" id="test" size="10">
form의 요소의 값들을 전송한다면, 받는 페이지에서는 strTest = Request("test")와 같이,
일반적인 get/post 방식으로 받으시면 됩니다.
//-->
<p><input type="button" value=" 확인 " onclick="ajaxRequest('json3.asp');"></p>
</form>
<div id="results">[Results Area]</div>
<!--
위 div 태그 안의 내용은 AJAX로 받아온 데이터로 변경됩니다.
//-->
</body>
</html>



<!-- 이하 파일들은 반드시 utf-8 인코딩 방식으로 저장 //-->

json3.asp
<%
' ---------------------------------
' asp 파일에서 DB 처리를 하고 결과 값을 넘겨도 잘 됩니다.
' 옵션대신 DB 처리결과를 함 넣어보세요.
' 그냥 일반 text만 써도 되고 아래처럼 html 태그를 같이 써도 됩니다.
' 아래 html코드와 텍스트가 그대로 위 div 태그에 페이지 리프레쉬없이 입력됩니다.
%>
<select name id="selectID" style="font-size:12px;">
<option value="1">옵션</option>
</select>
<%
' ---------------------------------
%>


json2.asp
<%
' 아래 예제들은 json(javascript object notation) 형태의 예제입니다.
' -------------------------------------
' 호출하는 페이지의 viewResponse 함수를 볼 것
%>
{
"dataType":"one",
"response":"응답"
}
<%
' -------------------------------------
%>


json.asp
<%
' -------------------------------------
' dataType이니 response니 하는 것들은 나름대로 데이터를 구조화하기 위하여
' 임의적으로 작성하여 사용한 것입니다.
' 호출하는 페이지의 viewResponse 함수를 볼 것
%>
{
"dataType":"array",
"response":
[
{
"userID":"realsnake",
"userName":"누구신지"
}
]
}
<%
' --------------------------------------
%>



2007/11/22 14:48 2007/11/22 14:48
출처 http://webarty.com



Lightbox 는 사진 감상시 놀라운 효과를 나타낼수 있도록 도와주는 자바스크립트 라이브러리 입니다.
외국에서 제작된 것으로 링크1 을 클릭하시면 제작자 홈페이를 방문하실 수 있습니다.
Lightbox 를 프로그램에 적용하는 것은 메뉴얼에 나와있는 것처럼 매우 쉽습니다.
최근에 Lightbox 에 이어 Lightbox2 가 출시되었고 이 문서는 이에 대하여 설명합니다.
(Lightbox2 의 저작권은 Creative Commons Attribution 2.5 License 를 따르고 있다고 제작자 홈페이지에 나와있습니다.)

우선 위에 첨부파일을 다운로드 합니다.
Lightbox2 를 적용할 계정에 업로드하고 적용할 페이지에 스크립트 코드를 삽입합니다.
이때 js/ 디렉토리는 자신의 경우에 맞게 수정하셔야 합니다.

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

이로써 Lightbox2 를 적용할 준비는 완료되었습니다.
Lightbox2 의 효과를 나타낼 이미지를 다음과 같이 링크하기만 하면됩니다.

<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumbnail-1.jpg"></a>
<a href="images/image-2.jpg" rel="lightbox"><img src="images/thumbnail-2.jpg"></a>
<a href="images/image-3.jpg" rel="lightbox"><img src="images/thumbnail-3.jpg"></a>

경로나 파일명은 자신에게 맞게 수정하여야 한다는 것을 잊지마세요.


2007/11/14 17:04 2007/11/14 17:04