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":"누구신지"

        }

    ]

}

<%

' --------------------------------------

%>


출처 : 태오닷넷 전강욱님