상세 컨텐츠

본문 제목

JQuery 를이용한 AJax시작하기

프로그래밍/스크립트

by 라제폰 2009. 5. 26. 21:52

본문


2. JQuery 를이용한 AJax시작하기

이번에는 1. JQuery 시작하기에서 만들어본 내용에서 데이타를 TEXTAREA에 넣어보도록 했던 부분을 JQuery의 AJax기능을 이용하여 외부파일 data.txt를 열어서 TABLE을 만들도록 수정해 보겠다. 이 데이터를 php,jsp,asp등을 이용해 동적으로 만들어주면 간단하게 MVC모델을 적용하여 프로그래램을 작성할 수 있을것이다.

_1 lecture2 폴더를 만든다
_2 폴더안에 다운받은 JQuery파일을 넣는다. (jquery-1.1.2.pack.js)
       * 다음부터 여기까지 과정은 생략하도록 하겠다
_3 lecture2.html과 data.txt를 만들고  각각 다음 내용을 복사해 넣는다.

1)  lecture2.html

<html>
<head>
<script src='./jquery-1.1.2.pack.js'></script>
<script>

$(document).ready(function(){

    $("#data").load("data.txt",function(data){

        var rows=data.split("\n");
        var str="";
        str+="<table border=1>";
        for(var i=0;i<rows.length;i++)
        {
            var cel;
            cel=rows[i].split("|");
            str+="<tr><td>"+cel[0]+"</td><td>"+cel[1]+"</td><td>"+cel[2]+"</td></tr>";
        }
        str+="</table>";

        $("#output").html(str);
    });
});

</script>

</head>
<body>
<textarea id='data' style='display:none'></textarea>
<div id='output'></div>
</body>
</html>

2) data.txt

aaa1|bbb1|ccc1
aaa2|bbb2|ccc2
aaa3|bbb3|ccc3

4. lecture2.html을 브라우저에서 열어본다.


5. 설명

위 코드가 실행되는 과정을 전체적으로 살펴보면.

1. 브라우저에서 lecture2.html의 로딩이 끝나면

2. $(document).ready()의 인수로 정의된 함수 function(){...}가 실행되면서

3. $("#data").load("data.txt",function(data){.....}); id가 data인 TEXTAREA에 데이터를 data.txt파일을 불러온다.

4. data.txt파일의 로딩이 끝나면, 마찬가지로 load()함수의 인수로 정의된 function(data){...}함수가 실행된다..

5. 이때 인수 data 는 data.txt의 문자열이다.

6. 나머지는 일반 자바스크립트 프로그램과 같으며. data.txt의 내용을 테블로 만들어서 str변수에 넣고.

7. 이것을 id가 output 인 DIV에 넣는다.


6. 아래 주석을 달아 두었다.

<html>
<head>
<script src='./jquery-1.1.2.pack.js'></script>
<script>

//1. 브라우저에서 lecture.html의 로딩이 끝나면 function(){...가실행
$(document).ready(function(){

   //id가 data인 TEXTAREA에 data.txt로딩.
   //로딩이 끝나면 function(data){.....}실행, 이때 data는 문자열로 data.txt의 내용
    $("#data").load("data.txt",function(data){

        //문자열을 처리하여 테이블을 만들어서 str변수에 넣는다.
        var rows=data.split("\n");
        var str="";
        str+="<table border=1>";
        for(var i=0;i<rows.length;i++)
        {
            var cel;
            cel=rows[i].split("|");
            str+="<tr><td>"+cel[0]+"</td><td>"+cel[1]+"</td><td>"+cel[2]+"</td></tr>";
        }
        str+="</table>";

       //str의 내용을 id가 output인 DIV에 넣는다.
        $("#output").html(str);
    });
});

</script>

</head>
<body>
<textarea id='data' style='display:none'></textarea>
<div id='output'></div>
</body>
</html>

관련글 더보기