[Script] AJAX Tutorial & Example ( 예제코드 )

출처 : w3schools AJAX

AJAX Home

- AJAX 는  Asynchronous JavaScript and XML 의 약자이다.

- AJAX는 프로그래밍 language가 아니라, 존재하는 standard를 이용하는 새로운 방법이다.

- AJAX는 server와 데이터를 교환하는 획기적인 방법의 하나로, 웹페이지의 일부만을 업데이트 한다. ( 전체 페이지 교체 없이 )

AJAX Introduction

What is AJAX?

- AJAX = Asynchronous JavaScript and XMl

- AJAX 는 빠르고 동적인 웹 페이지를 위한 기술

- AJAX는 적은 양의 데이타만을 교환해서 웹 페이지의 일부만을 갱신하는 방법이다. 이 방법으로 전체 웹페이지 갱신을 하지 않아도 되서 좋다.

- classic 웹 페이지들은 반드시 컨텐츠를 전부 갱신해야만 했다.

How AJAX Works

- Browser에서는 event 가 발생하면 XMLHttpRequest 객체를 만들어서 HttpRequest로 서버에 보낸다.

- Server는 HttpRequest를 처리하여 response 를 만들어 브라우저에 다시 보낸다. 

- Browser는 돌아온 data를 JS를 이용하여 처리하고 페이지를 갱신한다.

AJAX is Based on Internet Standards

- AJAX는 아래의 것들을 이용한 인터넷 표준이다.

 1. XMLHttpRequest object

 2. JS/DOM

 3. CSS

 4. XML

AJAX - Create an XMLHttpRequest Object

The XMLHttpRequest Object

- 대부분의 최신 브라우저들은 모두 XMLHttpRequest 를 지원한다. (  IE5 & 6 는 ActiveXObject를 사용한다. )

- XMLHttpRequest는 server와 데이터를 교환하는데 사용된다. 

Create an XMLHttpRequest Object

variable = new XMLHttpRequest();
variable = new ActiveXObject("Microsoft.XMLHTTP");  // IE5 & 6 

AJAX - Send a Request To Server

Send a Request To a Server

xmlhttp.open( method, url, async ); // xmlhttp.open("GET", "ajax_info.txt", true );
xmlhttp.send( string );  // xmlhttp.send();  string 은 POST 에서만 사용된다. 

GET or POST?

- GET이 POST에 비해 더 빠르고 간단해서 대부분 GET을 사용한다.

- 하지만 POST를 반드시 사용해야 하는 때가 있는데..

 1. server에서 file 이나 database를 업데이트 하는 등의 작업 ( cache값을 가져와서는 안 될 때 )

 2. 큰 용량의 데이터를 서버에 보낼 때 ( POST는 size limitation 이 없다. )

 3. user input을 보낼 때. POST가 훨씬 보안에 좋고 안정적이다.

GET Requests

xmlhttp.open("GET", "demo_get.asp", true );

- 위 결과는 cache 된 값을 가져온다.

- 이를 방지하기 위해서는 URL에 unique ID를 넣어야 한다.

xmlhttp.open("GET", "demo_get.asp?t=" + Math.random(), true );

POST Requests

xmlhttp.open("POST", "ajax_test.asp", true );
xmlhttp.setRequestHeader( "Content-type", "application/x-www-form-urlencoded" );
xmlhttp.send( "fname=Henry&lname=Ford" ); 

- Syntax

setRequestHeader( header, value )

The url - A File On a Server

- open() 이 server의 file을 지칭한다. file은 .txt, .xml, .asp, .php 등이 될 수 있으며 그 결과값이 전달된다.

Asynchronous - True or False?

- AJAX 요청중에도 비동기이기 때문에 다른 script를 수행할 수 있고, 응답이 오면 그 때 처리할 수 있다.

Async = true

- xmlhttp.onreadystatechange 에 응답을 처리할 function을 assign한다.

Async = false

- false 사용은 추천되고 있지 않다. false로 설정되면 script는 서버의 응답이 있을때까지 대기한다.

- false를 사용했을 경우에는 onreadytstatechange function을 사용하면 안된다. 그저 send() 다음에 코드를 기술하면 된다.

AJAX - Server Response

Server Response

- responseText : string response

- responseXML : xml response

The responseText Property

- XML이 아닌 경우에는 responseText 속성을 사용한다.

- xmlhttp.responseText

The responseXML Property

- XML인 경우에는 responseXML 속성을 사용하며 파싱을 해야 한다.

AJAX - The onreadystatechange Event

The onreadystatechange event

- 서버에 요청을 보내고 요청에 대한 처리 결과가 준비되면 ( 서버로부터 전송되어 받아오면 ) onreadystatechange 이벤트가 발생한다. 

- readyState 속성은 XMLHttpRequest의 상태에 대한 정보들을 담고 있다.

- 속성들

1. onreadystatechange

2. readyState

  0 : request가 초기화되지 않았음.

  1 : 서버와 연결되었음

  2 : 요청 받았음

  3 : 리퀘스트 처리중임

  4 : 요청이 끝나고 응답을 받았음

3. status

  200 : "OK"

  400 : Page not found

- 보통 xmlhttp.readyState==4 && xmlhttp.status==200 일 경우가 정상적으로 처리되었을 경우이다.

- onreadystatechange event는 한 요청 사이클에 5번 호출된다.

Examples

http://www.w3schools.com/ajax/ajax_examples.asp

도움이 되셨다면 손가락 꾸욱~ ( 로그인 필요 x )