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>