Ajax 강좌

자바스크립트/Ajax

Ajax 강좌

꿈꾸는새벽별 2010. 6. 30. 09:21

AJAX는 Asynchronous JavaScript And XML의 약자이다.

Ajax는 2005년 Google에 의해 대중적인 된 프로그래밍이다. Ajax는 새로운 프로그래밍 언어가 아니라 기존에 존재하던 표준을 사용한 새로운 방식으로서, 더 좋게, 더 빠르게, 좀 더 친사용자적인 웹 어플리케이션을 만들 수 있다.

Ajax는 Javascript와 HTTP request에 기반을 두고 있다.

==============================================================================================================

2. AJAX 소개

- Ajax는 Asynchronous JavaScript And XML의 약자이다.

- 배경지식

이 글을 읽기 전에 다음의 것들에 대한 기본적인 이해를 갖추고 있어야 한다.

HTML / XHTML

Javascript

- Ajax = Asynchronous Javascript and XML

Ajax는 새로운 프로그래밍 언어가 아니라, 좀 더 좋게, 좀 더 빠르게, 좀 더 상호작용을 할 수 있는 웹 어플리케이션을 만들기 위한 기술이다.

Ajax로 Javascript의 XMLHttpRequest object를 사용하여 서버와 직접적으로 커뮤니케이션할 수 있다. 이 XMLHttpRequest object는 웹페이지를 새로고침하지 않고 웹서버로 데이터를 넘겨줄 수 있다.

Ajax는 브라우저와 웹서버 사이에서 asynchronous data transfer(HTTP requests)를 사용한다. 다시말해 웹페이지가 웹서버로부터 페이지 전체에 대한 정보가 아니라 페이지의 일부 정보만을 요청할 수 있게 한다.

따라서 Ajax는 인터넷 어플리케이션을 좀 더 작게, 좀 더 빠르게, 또 좀 더 친사용자적으로 만든다.

⊙ Ajax는 웹서버의 소프트웨어에 비의존적인(independent) 브라우징 기술이다.

- Ajax는 웹 표준을 기초로 한다.

Ajax는 다음의 웹 표준에 기초한다.

Javascript

XML

HTML

CSS

Ajax에서 사용되는 웹 표준은 잘 정의되었고(well defined), 대부분의 브라우저에서 지원한다. Ajax 어플리케이션은 브라우저와 플랫폼에 비의존적이다.

- Ajax는 더 좋은 인터넷 어플리케이션에 대한 것이다.

웹 어플리케이션은 데스크탑 어플리케이션에 비해 많은 장점이 있다. 다수가 사용할 수 있고, 설치와 지원이 더욱 용이하며, 개발하기 더 쉽다.

하지만 인터넷 어플리케이션은 전통적인 데스크탑 어플리케이션처럼 항상 더 낫고 더 친사용자적이지는 않다.

Ajax를 통해서 인터넷 어플리케이션이 좀 더 낫고 친사용자적이 될 수 있다.

==============================================================================================================

[Ajax는 HTTP Requests를 사용한다]

기존의 javascript 코딩에서는, 데이터베이스로부터 어떤 정보를 얻기 위해서나 서버에서 파일을 가져오기 위해서 또는 서버로 정보를 보내려고 할 때에, HTML form과 GET/POST 데이터를 만들어 서버로 보내야 한다.

사용자는 정보를 보내고 받기 위해서 “전송”버튼을 클릭하고 서버로부터의 응답을 기다려야 새 페이지가 결과를 뿌려준다.

서버는 사용자가 입력값을 전송할 때에만 새 페이지를 되돌려주기 때문에, 기존의 웹 어플리케이션은 느리고 친사용자적이 아닐 수 있었다.

Ajax에서는 javascript가 Javascript XMLHttpRequest object를 통해서 서버와 직접적으로 커뮤니케이션을 한다.

HTTP request를 이용하여 웹페이지는 페이지를 새로고침하지 않고 웹서버에 어떤 요청을 하거나 웹서버로부터 응답을 얻을 수 있다.

[XMLHttpRequest Object]

웹개발자는 XMLHttpRequest object를 사용함으로써 페이지가 로딩된 후에 서버로부터 얻은 데이터로 페이지를 업데이트 할 수 있다.

Ajax는 2005년 Google에 의해 대중적이 되었다. (Google Suggest 서비스에서 사용)

Google Suggest는 매우 다이나믹한 웹 인터페이스를 만들기 위해 XMLHttpRequest object를 사용하고 있다. Google의 검색창에 입력하려고 하면, Javascript는 서버로 그 문자들을 보내고 서버는 다시 추천단어 리스트를 되돌려 준다.

(역자:최근에는 대다수의 검색사이트에서 사용하고 있는.. 한글자 한글자 입력할 때마다 추천검색어를검색창 바로 하단에 뿌려주는 것과 같은 방식)

XMLHttpRequest object는 IE 5.0+, Safari 1.2, Mozilla 1.0/Firefox, Opera 8+, Netscape 7 에서 지원한다.

==============================================================================================================

[첫번째 Ajax 어플리케이션]

Ajax가 어떻게 작동하는지를 알아보기 위해서, 간단한 ajax 어플리케이션을 만들어보자.

먼저, ‘username’과 ‘time’이라는 두 개의 text 필드가 있는 기본적인 HTML form을 만들 것이다. ‘username’ 필드는 사용자가 입력하는 부분이고, ‘time’ 필드는 Ajax에 의해 채워질 것이다.

HTML 파일명은 “testAjax.htm” 이며, 다음과 같다.

(HTML form에 submit 버튼이 없는 것에 주의!)

<html>

<body>

Name : <input type=”text” name=”username” />

Time : <input type=”text” name=”time” />

</form>

</body>

</html>

==============================================================================================================

[Ajax – 브라우저 지원(support)]

Ajax의 요지는 XMLHttpRequest object이다.

서로 다른 브라우저는 XMLHttpRequest object를 생성할 때 각기 다른 방법을 사용한다.

IE는 ActiveXObject를 사용하는 반면, 다른 브라우저는 XMLHttpRequest라는 내장 javascript object를 사용한다.

이 object를 생성하고 각기 다른 브라우저에서 처리하기 위해서, “try and catch” 구문을 사용할 것이다.

XMLHttpRequest object를 생성하는 javascript를 사용하여 바로 이전 글에서 만들었던 “testAjax.htm” 파일을 업데이트 해보자.

<html>

<body>

function ajaxFunction() {

var xmlHttp;

try {

// Firefox, Opera 8.0+ , Safari

xmlHttp = new XMLHttpRequest();

}

catch (e) {

// IE

try {

xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP’);

}

catch (e) {

try {

xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);

}

catch (e) {

alert(“Your browser does not support AJAX!”);

return false;

}

</script>

Name : <input type=”text” name=”username” />

Time : <input type=”text” name=”time” />

</form>

</body>

</html>

1. 먼저 XMLHttpRequest object를 얻기 위해서 xmlHttp 변수를 생성한다.

2. 그리고 xmlHttp=new XMLHttpRequest() 에서는 객체를 생성하려고 한다. 이 부분은 Firefox, Opera, Safari 를 사용하는 경우를 위해서이다.

3. 실패한다면, IE 6.0+에 적용될 xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”)을 실행한다.

4. 이마저 실패하면 xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”)를 실행한다.(IE 5.5+)

5. 위 세가지 어떤 것도 안된다면, 사용자는 매우 오래된 브라우저를 사용하고 있는 것이며 그 브라우저가 Ajax를 지원하지 않는다는 경고창을 보게 될 것이다.

Note: 위의 browser-specific 코드는 길고 꽤 복잡하다. 하지만 이것은 XMLHttpRequest object를 생성하고자 할 때마다 사용하는 코드이므로, 필요할 때마다 그냥 복사/붙여넣기 하여 사용하면 된다. 위의 코드는 일반적으로 알려져 있는 모든 브라우저 – IE, Opera, Firefox, Safari – 에서 호환가능하다.

다음 글에서는 XMLHttpRequest object가 서버와 어떻게 커뮤니케이션을 하는지를 보여줄 것이다.

==============================================================================================================

[Ajax – 서버에 요청하기]

서버로 요청을 보내려면, open() 메소드와 send() 메소드를 사용한다.

open() 메소드는 3개의 인수를 갖는다. 첫번째 인수는 요청을 보낼 때 사용하는 방법(GET이냐 POST냐)를 정의한다. 두번째 인수는 server-side script의 URL이며, 세번째 인수는 요청이 asynchronous하게 처리되어야 하는 것을 지정한다.

send() 메소드는 요청을 서버로 보낸다. HTML과 ASP 파일이 같은 디렉토리에 있다고 가정할 때, 코드는 다음과 같다.

xmlHttp.open(“GET”,”time.asp”,true);

xmlHttp.send(null);

이제 Ajax 함수가 실행되어질 시점을 결정해야 한다. 그 함수를 사용자가 “username” 필드에 무엇인가를 입력할 때 “은밀하게” 실행시킬 것이다.

Name : <input type=”text” onkeyup=”ajaxFunction();” name=”username” />

Time : <input type=”text” name=”time” />

</form>

이제 업데이트된 “testAjax.htm” 파일은 다음과 같다.

<html>

<body>

function ajaxFunction() {

var xmlHttp;

try {

// Firefox, Opera 8.0+, Safari

xmlHttp = new XMLHttpRequest();

} catch (e) {

// IE

try {

xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”);

} catch (e) {

try {

xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);

} catch (e) {

alert(“Your browser does not support AJAX!”);

return false;

}

xmlHttp.onreadystatechange=function() {

if(xmlHttp.readyState==4) {

document.myForm.time.value=xmlHttp.responseText;

}

xmlHttp.open(“GET”,”time.asp”,true);

xmlHttp.send(null);

}

</script>

Name : <input type=”text” onkeyup=”ajaxFunction();” name=”username” />

Time : <input type=”text” name=”time” />

</form>

</body>

</html>

다음 글에서는 “time.asp” 를 작성하여 AJAX 어플리케이션을 완성할 것이다.

==============================================================================================================

[Ajax – Server-Side ASP Script]

이제 현재 서버시간을 표시하는 스크립트를 만들어보자.

“responseText” 속성(이전 글에서 설명했던)은 서버에서 되돌려받은 데이터를 저장한다. 이제 우리는 현재시간을 되돌리기 원한다. “time.asp” 에서의 코딩은 다음과 같다.

response.expires = -1

response.write(time)

Note : “expires” 속성은 페이지가 만료되기 전에 브라우서에 얼마나 오랫동안 저장될지를 결정한다. 페이지가 만료되기 전에 같은 페이지로 돌아올 때, 캐쉬된 페이지가 뿌려진다. ‘Expires=-1’ 은 페이지가 캐쉬되지 않도록 하는 것을 의미한다.

(역자:위 코드를 PHP로 바꾸면,

<?
header("Pragma: no-cache"); // ASP의 response.expires = -1 과 같이 캐쉬를 저장하지 않는다는 의미
$now_time = date("h:i:s A",time());
echo $now_time;
?>
정도가 될 듯합니다.

)

[Ajax 어플리케이션을 실행해보자]

‘Name’ 상자에 아무 텍스트나 입력하고, ‘Time’ 상자 안쪽을 클릭해보자.

time.asp파일은 페이지를 새로고침하지 않고 ‘Time’ 상자에 서버 시간을 받아온다.

==============================================================================================================

지금까지 Ajax가 좀 더 인터렉티브한 어플리케이션을 만들 수 있다는 것을 봤다.

[Ajax Suggest Example]

아래의 Ajax 예에서는 사용자가 기본적인 HTML form에 데이터를 입력할 때, 웹페이지가 어떻게 웹서버와 온라인으로 통신하는지를 설명할 것이다.

[아래 박스에 이름을 입력해보라]

(역자 : 이 단락은 이번 예제가 최종적으로 어떻게 실행되는지를 보여주는 부분이다.
블로그 특성상 코드를 삽입할 수 없기에, 다음을 클릭해서 테스트해볼 수 있다.
http://www.w3schools.com/ajax/ajax_example_suggest.asp )

[예제 설명 - HTML Form]

위의 form의 HTML코드는 다음과 같다.

<form>
First Name : <input type="text" id="txt1" onkeyup="showHint(this.value)">
</form>

<p>Suggestions : <span id="txtHint"></span></p>

보는 것처럼 'txt1'이라는 input field를 가지고 있는 단순한 HTML form이다.

input field의 이벤트 속성은 onkeyup 이벤트로 발생되는 함수를 정의한다.

form 아래 단락에는 'txtHint'라는 span이 있다. 이 span은 웹서버로부터 돌려받은 데이터를 보여주는 곳(placeholder)으로 사용된다.

사용자가 데이터를 입력할 때, 'showHint()' 함수가 실행된다. 이 함수는 'onkeyup' 이벤트에 의해 실행된다. 즉, 사용자가 input field에서 키보드의 키에서 손가락을 뗄 때마다 showHint 함수를 호출한다.

[예제 설명 - showHint() 함수]

showHint() 함수는 HTML의 <head>부분에 위치하는 매우 단순한 javascript 함수이다.

이 함수는 다음과 같다.

이 함수는 input field에 한글자 한글자 입력할 때마다 실행된다.

text field에 어떤 문자가 있으면(str.length>0), 이 함수는 다음을 수행한다.

1. 서버로 보낼 url(파일명)을 정의한다.
2. 한 파라미터(q)에 input field의 내용을 넣어 url에 추가한다.
3. 서버가 캐쉬파일을 사용하지 못하도록 랜덤 숫자를 추가한다.
4. XMLHTTP 객체를 생성하고, 변동이 있을 경우에는 이 XMLHTTP 객체가 stateChanged라는 함수를 실행하도록 한다.
5. 위의 url에 XMLHTTP 객체를 연다.
6. 서버로 HTTP 요청을 보낸다.

만약 input field가 비어 있다면, 이 함수는 txtHint 부분의 내용을 지운다.

[예제 설명 - GetXmlHttpObject() 함수]

위의 예에서 보면, GetXmlHttpObject()라는 함수를 호출한다.

이 함수의 목적은 다른 브라우저들에서 각기 다른 XMLHTTP 객체를 생성하는 문제를 해결하기 위해서이다.

이 함수는 다음과 같다.

[예제 설명 - stateChanged() 함수]

stateChanged() 함수는 다음과 같다.

function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}

stateChanged() 함수는 XMLHTTP 객체의 상태가 변할 때마다 실행된다.

상태가 4(완료,complete)일 때, txtHint 위치의 내용은 response text로 나타난다.

[Ajax ASP 예제]

gethint.asp의 코드는 Internet Information Server(IIS)를 위해 VBScript로 작성되었다.
이 코드에서는 배열로 된 몇몇 이름을 체크한 후 클라이언트에게 대응되는 이름을 리턴한다.

<%
response.expires=-1
dim a(30)
'Fill up array with names
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"'get the q parameter from URL
q=ucase(request.querystring("q"))'lookup all hints from array if length of q>0
if len(q)>0 then
hint=""
for i=1 to 30
    if q=ucase(mid(a(i),1,len(q))) then
      if hint="" then
        hint=a(i)
      else
        hint=hint & " , " & a(i)
      end if
    end if
next
end if'Output "no suggestion" if no hint were found
'or output the correct values
if hint="" then
response.write("no suggestion")
else
response.write(hint)
end if
%>

==============================================================================================================
status 는 처리후 수행결과를 알 수 있다.

<SCRIPT LANGUAGE="JavaScript">
<!--
function proc(){
httpReq = getXMLHttpRequest();
httpReq.onreadystatechange = hey ;
httpReq.open("GET", "test.php", true);
httpReq.send(null);
}

function hey(){
if(httpReq.readystate==0){
alert("open매소드 호출되지 않음");
}else if(httpReq.readystate==1){
alert("send 매소드가 호출 되지 않는 상태");
}else if(httpReq.readystate==2){
alert("status 와 헤더는 도착하지 않은 상태");
}else if(httpReq.readystate==3){

alert("데이터 일부를 받은 상태");
}else if(httpReq.readystate==4){
if(httpReq.status==200){
alert("요청성공");
}else if(httpReq.status==403){
alert("접근거부");
}else if(httpReq.status==404){
alert("페이지없음");
}else if(httpReq.status==500){
alert("서버오류");
}
}
}
//-->
</SCRIPT>
<input type="button" value="호출" onclick="proc()">

==============================================================================================================

status 는 처리후 수행결과를 알 수 있다.

if(http_request.readystate==0){
   alert("open매소드 호출되지 않음");
}else if(http_request.readystate==1){
   alert("send 매소드가 호출 되지 않는 상태");
}else if(http_request.readystate==2){
   alert("status 와 헤더는 도착하지 않은 상태");
}else if(http_request.readystate==3){
   alert("데이터 일부를 받은 상태");
}else if(http_request.readystate==4){
   if(http_request.status==200){
     alert("요청성공");
   }else if(http_request.status==403){
     alert("접근거부");
   }else if(http_request.status==404){
     alert("페이지없음");
   }else if(http_request.status==500){
     alert("서버오류");
   }
}

==============================================================================================================

저작자표시 비영리 변경금지

'자바스크립트 > Ajax' 카테고리의 다른 글

Ajax XMLHttpRequest 함수 및 post, get 전송 정의 (0)	2012.11.10
자바스크립트 아작스 로딩바 (0)	2012.11.10
민간부문의 장애인 웹 접근성 제고 세미나 개최 (0)	2010.06.30

현재글Ajax 강좌

.·´″˚☆ 이제 더이상 정보 찾아 떠돌지 말자...

Adobe AIR, rtmfp,

Today :
Yesterday :

.·´″˚☆꿈꾸는새벽별´″˚☆

Ajax 강좌

'자바스크립트 > Ajax' 카테고리의 다른 글

'자바스크립트/Ajax'의 다른글

티스토리툴바

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Ajax 강좌

'자바스크립트 > Ajax' 카테고리의 다른 글

'자바스크립트/Ajax'의 다른글

관련글

티스토리툴바