Async (6)

async(비동기) 처리를 위한 ThreadPoolTaskExecutor

ThreadPoolTaskExecutor를 이용하여 비동기처리하는 방법을 알아보겠습니다.

ThreadPoolTaskExecutor는 스프링에서 제공해주는 클래스로 org.springframework.scheduling.concurrent 패키지에 속해있습니다.

생성자도 기본생성자 하나만 존재합니다. 이름에서 알 수 있듯이 쓰레드풀을 이용하여 멀티쓰레드 구현을 쉽게 해주는 클래스입니다.

 

그럼 어떻게 사용하는지 살펴보겠습니다.

	public static void main(String[] args) {
		ThreadPoolTaskExecutor executor = new ThreadPoolTaskExecutor();
		executor.initialize();
	}

ThreadPoolTaskExecutor 를 생성하고 사용할 수 있도록 initialize()를 호출했습니다. 왜냐면 이니셜라이즈하기 전에는 executor를 사용을 할 수 없기 때문입니다. 만약 이니셜라이즈 하기 전에 사용하려고 한다면 아래와 같은 오류 메시지를 보게 됩니다.

 

Exception in thread "main" java.lang.IllegalStateException: ThreadPoolTaskExecutor not initialized

 

그럼 이제 아래처럼 코드를 좀 더 추가한 뒤 실제로 쓰레드를 실행시켜 보겠습니다.

	public static void main(String[] args) {
		ThreadPoolTaskExecutor executor = new ThreadPoolTaskExecutor();
		executor.initialize();
		
		log.info("executing threads....");
		Runnable r = () -> {
			try {
				log.info(Thread.currentThread().getName() + ", Now sleeping 10 seconds...");
				Thread.sleep(10000);
			} catch (InterruptedException e) {
				e.printStackTrace();
			}
		};

		for (int i = 0; i < 10; i++) {
			executor.execute(r);
		}
	}

 

출력 결과를 한번 볼까요?

07:42:09.450 [main] INFO com.keichee.test.service.TestService - executing threads....
07:42:09.460 [ThreadPoolTaskExecutor-1] INFO com.keichee.test.service.TestService - ThreadPoolTaskExecutor-1, Now sleeping 10 seconds...
07:42:19.464 [ThreadPoolTaskExecutor-1] INFO com.keichee.test.service.TestService - ThreadPoolTaskExecutor-1, Now sleeping 10 seconds...
07:42:29.465 [ThreadPoolTaskExecutor-1] INFO com.keichee.test.service.TestService - ThreadPoolTaskExecutor-1, Now sleeping 10 seconds...
07:42:39.470 [ThreadPoolTaskExecutor-1] INFO com.keichee.test.service.TestService - ThreadPoolTaskExecutor-1, Now sleeping 10 seconds...
07:42:49.472 [ThreadPoolTaskExecutor-1] INFO com.keichee.test.service.TestService - ThreadPoolTaskExecutor-1, Now sleeping 10 seconds...
07:42:59.477 [ThreadPoolTaskExecutor-1] INFO com.keichee.test.service.TestService - ThreadPoolTaskExecutor-1, Now sleeping 10 seconds...
07:43:09.483 [ThreadPoolTaskExecutor-1] INFO com.keichee.test.service.TestService - ThreadPoolTaskExecutor-1, Now sleeping 10 seconds...
07:43:19.489 [ThreadPoolTaskExecutor-1] INFO com.keichee.test.service.TestService - ThreadPoolTaskExecutor-1, Now sleeping 10 seconds...
07:43:29.491 [ThreadPoolTaskExecutor-1] INFO com.keichee.test.service.TestService - ThreadPoolTaskExecutor-1, Now sleeping 10 seconds...
07:43:39.496 [ThreadPoolTaskExecutor-1] INFO com.keichee.test.service.TestService - ThreadPoolTaskExecutor-1, Now sleeping 10 seconds...

로그가 출력된 시간을 보면 10초마다 출력이 되고있고 쓰레드도 ThreadPoolTaskExecutor-1 하나가 모두 처리한 것을 알 수 있습니다. 즉, 지금 위 코드는 멀티쓰레드로 돌아간게 아니란 얘기죠. ThreadPoolTaskExecutor는 몇 가지 설정값들을 가지고 있습니다. 그 중 corePoolSize 값이 동시에 실행할 쓰레드의 개수를 의미하는데 이 설정의 default 값이 1로 세팅되어 있기 때문에 위 처럼 corePoolSize 설정없이 그대로 사용하면 싱글쓰레드로 돌아가게 됩니다. 

 

설정값

그럼 설정값들에 어떤 것들이 있는지 그것들이 의미하는게 무엇인지 setter 메서드를 기준으로 중요한 값들만 한번 살펴보고 넘어가겠습니다.

 

메서드

설명

기본값

setCorePoolSize

corePoolSize 값을 설정함. corePoolSize는 동시에 실행시킬 쓰레드의 개수를 의미함

1

setAllowCoreThreadTimeOut

코어 쓰레드의 타임아웃을 허용할 것인지에 대한 세터 메서드. true로 설정할 경우 코어 쓰레드를 10으로 설정했어도 일정 시간(keepAliveSeconds)이 지나면 코어 쓰레드 개수가 줄어듦.

false

setKeepAliveSeconds

코어 쓰레드 타임아웃을 허용했을 경우 사용되는 설정값으로, 여기 설정된 시간이 지날 때까지 코어 쓰레드 풀의 쓰레드가 사용되지 않을 경우 해당 쓰레드는 terminate 된다.

60초

setMaxPoolSize

쓰레드 풀의 최대 사이즈

Integer.MAX

setQueueCapacity

쓰레드 풀 큐의 사이즈. corePoolSize 개수를 넘어서는 task가 들어왔을 때 queue에 해당 task들이 쌓이게 된다. 최대로 maxPoolSize 개수 만큼 쌓일 수 있다.

Integer.MAX

 

여기서 corePoolSize, maxPoolSize, queueCapacity 이 세 가지 설정값이 가장 중요합니다.

우선 위에서 봤던 첫 번째 예제에서는 이 세 가지 값에 대해서 별도로 설정을 하지 않았었습니다. 그래서 싱글 쓰레드로 작업이 이루어졌죠.

 

corePoolSize

이번에는 corePoolSize를 올려보겠습니다.

    public static void main(String[] args) {
        ThreadPoolTaskExecutor executor = new ThreadPoolTaskExecutor();
        executor.setCorePoolSize(5);
        executor.initialize();

        log.info("executing threads....");
        Runnable r = () -> {
            try {
                log.info(Thread.currentThread().getName() + ", Now sleeping 10 seconds...");
                Thread.sleep(10000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
        };

        for (int i = 0; i < 10; i++) {
            executor.execute(r);
        }
    }

 

corePoolSize를 5로 설정 후 실행해보았습니다. (queueCapacity와 maxPoolSize값은 현재 기본값인 Integer.MAX 입니다)

08:52:50.423 [main] INFO com.keichee.test.service.TestService - executing threads....
08:52:50.456 [ThreadPoolTaskExecutor-3] INFO com.keichee.test.service.TestService - ThreadPoolTaskExecutor-3, Now sleeping 10 seconds...
08:52:50.456 [ThreadPoolTaskExecutor-2] INFO com.keichee.test.service.TestService - ThreadPoolTaskExecutor-2, Now sleeping 10 seconds...
08:52:50.456 [ThreadPoolTaskExecutor-5] INFO com.keichee.test.service.TestService - ThreadPoolTaskExecutor-5, Now sleeping 10 seconds...
08:52:50.456 [ThreadPoolTaskExecutor-1] INFO com.keichee.test.service.TestService - ThreadPoolTaskExecutor-1, Now sleeping 10 seconds...
08:52:50.456 [ThreadPoolTaskExecutor-4] INFO com.keichee.test.service.TestService - ThreadPoolTaskExecutor-4, Now sleeping 10 seconds...
08:53:00.460 [ThreadPoolTaskExecutor-1] INFO com.keichee.test.service.TestService - ThreadPoolTaskExecutor-1, Now sleeping 10 seconds...
08:53:00.460 [ThreadPoolTaskExecutor-2] INFO com.keichee.test.service.TestService - ThreadPoolTaskExecutor-2, Now sleeping 10 seconds...
08:53:00.461 [ThreadPoolTaskExecutor-3] INFO com.keichee.test.service.TestService - ThreadPoolTaskExecutor-3, Now sleeping 10 seconds...
08:53:00.461 [ThreadPoolTaskExecutor-4] INFO com.keichee.test.service.TestService - ThreadPoolTaskExecutor-4, Now sleeping 10 seconds...
08:53:00.461 [ThreadPoolTaskExecutor-5] INFO com.keichee.test.service.TestService - ThreadPoolTaskExecutor-5, Now sleeping 10 seconds...

실행되자마자 5개의 쓰레드가 실행되고 10초 후에 또 다른 5개의 쓰레드가 실행된 것을 확인할 수 있습니다. 즉, queueCapacity와 maxPoolSize값을 기본값으로 해놓으면 corePoolSize의 값만큼 쓰레드가 동시에 실행되는 것을 알 수 있습니다.

 

corePoolSize와 queueCapacity

그럼 이번에는 corePoolSize는 default 값인 1로 놔두고 queueCapacity와 maxPoolSize 값을 5로 설정해보겠습니다. 그리고 10개의 task가 실행될 때 poolSize, activeSize, queueSize 가 어떻게 변하는지 확인할 수 있게 출력해보겠습니다. 또, 출력을 좀 짧게 하기위해서 쓰레드명 prefix를 "my-"로 변경했습니다.

    public static void main(String[] args) {
        ThreadPoolTaskExecutor executor = new ThreadPoolTaskExecutor();
        executor.setThreadNamePrefix("my-");
        executor.setQueueCapacity(5);
        executor.setMaxPoolSize(5);
        executor.initialize();

        log.info("executing threads....");
        Runnable r = () -> {
            try {
                log.info(Thread.currentThread().getName() + ", Now sleeping 10 seconds...");
                Thread.sleep(10000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
        };

        for (int i = 0; i < 10; i++) {
            executor.execute(r);
            System.out.print("poolSize:" + executor.getPoolSize());
            System.out.print(", active:" + executor.getActiveCount());
            System.out.println(", queue:" + executor.getThreadPoolExecutor().getQueue().size());
        }
    }

 

어떤 결과가 나올 것 같은지 한번 생각을 해보고 아래 결과를 확인해보시기 바랍니다.

09:02:22.864 [main] INFO com.keichee.test.service.TestService - executing threads....
poolSize:1, active:1, queue:0
poolSize:1, active:1, queue:1
poolSize:1, active:1, queue:2
poolSize:1, active:1, queue:3
poolSize:1, active:1, queue:4
poolSize:1, active:1, queue:5
poolSize:2, active:2, queue:5
09:02:22.886 [my-1] INFO com.keichee.test.service.TestService - my-1, Now sleeping 10 seconds...
09:02:22.887 [my-2] INFO com.keichee.test.service.TestService - my-2, Now sleeping 10 seconds...
poolSize:3, active:3, queue:5
09:02:22.887 [my-3] INFO com.keichee.test.service.TestService - my-3, Now sleeping 10 seconds...
poolSize:4, active:4, queue:5
09:02:22.887 [my-4] INFO com.keichee.test.service.TestService - my-4, Now sleeping 10 seconds...
poolSize:5, active:5, queue:5
09:02:22.887 [my-5] INFO com.keichee.test.service.TestService - my-5, Now sleeping 10 seconds...
09:02:32.888 [my-1] INFO com.keichee.test.service.TestService - my-1, Now sleeping 10 seconds...
09:02:32.890 [my-2] INFO com.keichee.test.service.TestService - my-2, Now sleeping 10 seconds...
09:02:32.890 [my-4] INFO com.keichee.test.service.TestService - my-4, Now sleeping 10 seconds...
09:02:32.890 [my-5] INFO com.keichee.test.service.TestService - my-5, Now sleeping 10 seconds...
09:02:32.890 [my-3] INFO com.keichee.test.service.TestService - my-3, Now sleeping 10 seconds...

 

 

위 출력 결과를 보면 10개의 task를 실행할 때 queue 사이즈가 0에서 5까지 올라가고 그 이후에 poolSize와 active 사이즈가 증가하는 것을 알 수 있습니다. corePoolSize가 1 이라서 2번째 task부터 6번째 task까지는 queue에 들어가게 됩니다. 그리고 7번째 task부터 10번째 task까지 4개의 task는 maxPoolSize 를 넘어서지 않는 한 추가로 쓰레드를 생성하여 pool에 넣고 해당 쓰레드로 각 task를 실행하게 됩니다. 

그럼 만약 maxPoolSize를 넘어설 만큼 많은 양의 task들이 들어온다면 어떻게 될까요?

Exception in thread "main" org.springframework.core.task.TaskRejectedException: Executor [java.util.concurrent.ThreadPoolExecutor@32eff876[Running, pool size = 5, active threads = 5, queued tasks = 5, completed tasks = 0]] did not accept task: com.keichee.test.service.TestService$$Lambda$22/0x00000008000ce840@5e0826e7
	at org.springframework.scheduling.concurrent.ThreadPoolTaskExecutor.execute(ThreadPoolTaskExecutor.java:324)

TaskRejectedException 오류가 발생하게 됩니다. 

따라서 얼마나 많은 양의 task를 소화해야 하는지를 정확히 알고 corePoolSize, queueCapacity, maxPoolSize에 적절한 값을 세팅하여 사용해야 합니다. 기본 값으로 사용하면 TaskRejectedException을 볼 일은 거의 없겠지만 그 대신 queue에 어마어마한 양의 task가 쌓이겠죠. 그러다가 애플리케이션의 배포나 어떤 이유에 의해서 재기동이 필요하게 되면 해당 queue에 쌓여있던 task들은 사라지게 됩니다. 

 

스프링부트에서 사용하실 분들은 아래 포스팅을 참고하시면 좋습니다.

스프링 부트에서 ThreadPoolTaskExecutor를 설정 및 사용하는 방법

 

💻 Programming/웹프로그래밍

AJAX란? - 데이터베이스

AJAX 데이터베이스 예제

아래 예제는 AJAX를 이용해서 데이터베이스에서 읽어온 자료를 처리하는 것을 보여줍니다.

예제

form 태그가 먹히지 않는 관계로 예제는 실습하기 버튼을 눌러서 W3Schools로 가셔서 해보시기 바랍니다.

실습하기 »

예제 설명 - showCustomer() 함수

사용자가 드랍다운 리스트에서 고객을 선택하면, "showCustomer()" 함수가 호출되어 실행됩니다. 이 함수는 "onchange" 이벤트가 발생하면 호출되도록 되어있습니다.

showCustomer 함수 소스 코드

function showCustomer(str) {
  var xhttp; 
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
    document.getElementById("txtHint").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET""getcustomer.asp?q="+str, true);
  xhttp.send();
}

showCustomer() 함수는 아래와 같은 작업을 합니다.

  • customer가 선택이 되었는지 검사합니다.
  • XMLHttpRequest 객체를 생성합니다.
  • 서버로부터 응답을 받고나서 실행될 함수를 정의합니다.
  • 서버에 있는 파일로 요청을 보냅니다.
  • 요청을 보낼 때 파라미터 "q" 와 드랍다운 리스트에서 읽어온 str을 URL에 추가했습니다.

 AJAX Server Page

위 예제에서 사용된 서버페이지는 "getcustomer.asp"입니다.


서버 페이지 파일은 PHP, JSP와 같은 다른 서버 언어로도 구현할 수 있습니다.


PHP로 구현한 동일한 기능의 소스 보기


 "getcustomer.asp" 는 데이터베이스의 정보를 조회하고 읽어온 정보를 HTML 테이블에 넣는 기능을 합니다.

<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"

set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/datafolder/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn

response.write("<table>")
do until rs.EOF
  for each x in rs.Fields
    response.write("<tr><td><b>" & x.name & "</b></td>")
    response.write("<td>" & x.value & "</td></tr>")
  next
  rs.MoveNext
loop
response.write("</table>")
%>


자, 큰 그림이 그려지나요?

정리를 한번 해드리자면,

1. 드랍다운 리스트에서 항목을 선택한다.
2. 항목이 선택되면 onchange 이벤트에의해 showCustomer() 함수를 호출하여 ajax 요청이 서버로 전송되고
3. 서버에서 getcustomer.asp파일이 실행이 되는데 이 파일은 DB를 조회해서 읽어온 정보를 html형태의 테이블을 만들어서 응답으로 보냅니다.
4. 그러면 이 응답으로 받은 html형식의 정보를 드랍다운 리스트 아래쪽에 뿌려줍니다.

이런식으로 ajax를 이용한 요청이 처리가 되는 겁니다.

별로 어렵지 않죠? ^-^ 

여기서 AJAX 포스팅은 마치도록 하겠습니다.

참고로 AJAX포스팅에 사용된 자료는 W3Schools에 있는 자료를 번역해놓은 수준입니다.

궁금한게 있으시면 댓글 달아주시면 답글 달아드리도록 하겠습니다.





💻 Programming/웹프로그래밍

AJAX란? - 이벤트 종류

onreadystatechange 이벤트

XMLHttpRequest객체는 상태정보를 가지고 있는데 readyState 속성이 그 값을 가지고 있습니다.


그리고 우리는 이 상태 정보를 보고 응답이 왔는지, 그 응답이 정상적으로 왔는지 확인할 수가 있습니다.


이 readyState 가 변할 때마다 항상 발생하는 이벤트가 있는데 그것이 바로  onreadystatechange 이벤트입니다.


XMLHttpRequest 객체의 중요한 세 가지 속성은 아래와 같습니다.

속성설명
onreadystatechange readyState 속성값이 변할 때마다 자동으로 호출될 함수 또는 함수명을 저장합니다.
readyStateXMLHttpRequest 객체의 상태를 가지고 있고, 0 에서 4 의 값을 가집니다. 
0: 요청이 초기화되지 않았습니다. 
1: 서버와 연결되었습니다.
2: 요청이 받아들여졌습니다.
3: 요청이 진행중입니다.
4: 요청이 완료되고 응답을 받았습니다.
status200: 정상
404: 페이지를 찾을 수 없습니다.


 onreadystatechange 이벤트가 발생하고 readyState가 4이며 status가 200이면 정상적으로 요청이 처리되어 응답이 온 경우이므로 이때 원하는 작업을 하시면 됩니다.

예제

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 && xhttp.status == 200) {
    document.getElementById("demo").innerHTML = xhttp.responseText;
  }
};
실습하기 »

Note: onreadystatechange 이벤트는 한번의 요청을 할 때 총 5번 발생합니다 (readyState가 0에서 4까지 바뀌므로).


Callback 함수 사용하기

callback 함수는 다른 함수의 파라미터로 넘겨지는 함수를 말합니다.

만약 웹사이트에 하나 이상의 AJAX 작업이 있다면, 단 하나의 표준 함수를 만들어서 XMLHttpRequest 객체를 생성하고 각각의 AJAX 작업이 있을 때마다 이 표준함수에서 호출함으로써 코드를 단순화 할 수 있습니다.

표준함수는 각각의 AJAX작업을 하는 함수를 파라미터로 넘겨받아서 이를 처리하게 됩니다.

예제

function loadDoc(cFunc) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 && xhttp.status == 200) {
    cFunc(xhttp);
  }
실습하기 »

 

💻 Programming/웹프로그래밍

AJAX란? - 서버로부터 응답받기

 

서버 응답

서버로부터 응답을 받기 위해서는 XMLHttpRequest객체의 responseText 또는 responseXML 속성을 사용합니다.

속성설명
responseText응답 데이터를 string으로 받습니다.
responseXML응답 데이터를 XML 로 받습니다.


responseText 속성

예제

document.getElementById("demo").innerHTML = xhttp.responseText;
실습하기 »

responseXML 속성

예제

 cd_catalog.xml 파일을 요청하고 응답으로 온 데이터 파싱하기

xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
  txt += x[i].childNodes[0].nodeValue + "<br>";
  }
document.getElementById("demo").innerHTML = txt;
실습하기 »


응답을 받는거는 했는데 그렇다면 응답이 왔는지는 어떻게 알 수 있나요? 

자, 그 부분에 대해서는 다음 포스팅에 있을 이벤트에 대해서 공부를 하고나면 아실 수 있습니다.

자, 다음 시간에는 AJAX에서 사용되는 이벤트에 대해서 알아보도록 하겠습니다.





'💻 Programming > 웹프로그래밍' 카테고리의 다른 글

AJAX란? - 데이터베이스  (0) 2016.06.12
AJAX란? - 이벤트 종류  (0) 2016.06.12
AJAX란? - 서버로 요청하기  (1) 2016.06.12
Ajax 란? - Ajax 시작하기  (1) 2016.06.12
[jQuery] 2. jQuery Basics ( 기본 )  (0) 2015.08.06

💻 Programming/웹프로그래밍

AJAX란? - 서버로 요청하기

서버로 요청하기


- 서버로 요청을 할 때에는 XMLHttpRequest객체에서 제공하는 open(), send() 메소드를 사용합니다.


예를들어, 아래처럼 사용합니다.


var xhttp = new XMLHttpRequest();

xhttp.open("GET", "URL", true);

xhttp.send();


이런 식으로 말이죠.


이때 open()과 send()의 메소드 설명은 아래와 같습니다.

메소드설명
open(method, url, async)요청 타입을 정합니다.

method: 요청 타입: GET 또는 POST
url: 서버 (파일) 위치
async: true (비동기식) 또는 false (동기식)
send()서버로 요청을 보낸다 (GET방식에서 사용)
send(string)서버로 요청을 보낸다 (POST방식에서 사용)


GET 방식과 POST방식


GET 은 POST보다 단순하고 빠르며 대부분의 경우에 사용할 수 있습니다.

하지만 아래 경우에는 꼭 POST방식으로 써야합니다:

  • A cached file is not an option (서버에 있는 파일이나 데이터베이스를 업데이트하는 경우).
  • 서버로 많은 양의 데이터 전송이 필요한 경우 (GET방식은 전송할 데이터 사이즈 제한이 있으나 POST 방식은 사이즈 제한이 없습니다).
  • (unknown characters를 포함할 수 있는) 사용자 input을 서버로 전송할 때 , POST 방식이 보안상 GET방식보다 좋습니다.

GET Requests

간단한 GET 요청:

예제1

xhttp.open("GET""demo_get.asp"true);
xhttp.send();
실습하기 »

위 예제에서는 이미 캐쉬된 결과를 볼 수도 있습니다. 그런 경우를 피하려면, 유니크 ID를 URL에 넣어주셔야 합니다.

예제2

xhttp.open("GET""demo_get.asp?t=" + Math.random(), true);
xhttp.send();
실습하기 »

GET 방식으로 요청을 보내고 싶으시면, 정보를 URL에 입력해주시면 됩니다.

예제3

xhttp.open("GET""demo_get2.asp?fname=Henry&lname=Ford"true);
xhttp.send();
실습하기 »

POST Requests

간단한 POST 요청:

예제1

xhttp.open("POST""demo_post.asp"true);
xhttp.send();
실습하기 »

HTML 형식으로 POST 요청을 하려면, setRequestHeader()를 이용하여 HTTP 헤더 정보를 넣어주시면 됩니다. 그리고 send() 메소드에 보내려는 데이터정보를 넣어주시면 됩니다.

예제2

xhttp.open("POST""ajax_test.asp"true);
xhttp.setRequestHeader("Content-type""application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
실습하기 »

The url - 서버 상의 파일 주소

open() 메소드의 url 파라미터는 서버에 위치한 파일의 주소입니다.

xhttp.open("GET""ajax_test.asp"true);

여기서 말하는 파일은 .txt, .xml 파일처럼 평범한 파일들, 또는 .asp, .php 와 같은 서버스크립팅 파일입니다.  (서버스크립팅 파일들은 서버에서 응답을 보내기 전에 특정 일을 수행할 수 있습니다.).


비동기식 - True or False?

ajax를 사용하려면 3번째 파라미터는 무조건 true여야 합니다.

xhttp.open("GET""ajax_test.asp"true);

Async=true

예제

xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 && xhttp.status == 200) {
    document.getElementById("demo").innerHTML = xhttp.responseText;
  }
};
xhttp.open("GET""ajax_info.txt"true);
xhttp.send();
실습하기 »



Async=false

xhttp.open("GET""ajax_info.txt"false);

async=false 로 사용하게되면 더이상 AJAX를 사용하는게 아닌게 되어버립니다. 이렇게 서버로 요청을 하게되면 서버에서 응답이 오기 전까지 화면에서 아무것도 할 수 없는 상황이 발생합니다.

예제

xhttp.open("GET""ajax_info.txt"false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
실습하기 »



자, 지금까지 AJAX를 이용한 서버로 요청 보내기에 대해서 알아보았습니다.

다음 포스팅에서는 응답을 받는 것에 대해서 알아보도록 하겠습니다.



💻 Programming/웹프로그래밍

Ajax 란? - Ajax 시작하기

AJAX가 뭘까요? 


AJAX는 Asynchronous Javascript And Xml의 약자입니다.


이름에서 알 수 있듯이 비동기식 자바스크립트와 XML을 말합니다. 


이름에 XML이 나오기는 하지만 XML을 알 필요는 없습니다.  


AJAX를 사용하기 위해서는 기본적으로 HTML과 Javascript를 알고있어야 합니다.


그럼 가장먼저 AJAX가 어떻게 동작하는지에 대해서 알아보도록 할까요?


AJAX는 아래와 같은 순서를 거칩니다.


1. 클라이언트(IE 7+, 크롬, 사파리, 파이어폭스, etc. )에서 XMLHttpRequest객체를 생성하고 메시지를 담아 서버로 보낸다.

2. 서버에서 메시지를 받으면 메시지에 해당하는 정보를 읽어서 다시 브라우저한테 응답해준다.

3. 클라이언트 브라우저가 서버로부터 응답을 받으면 해당 정보를 특정 영역에 refresh해준다.


AJAX를 사용함에 있어서 가장 기본은 XMLHttpRequest 객체입니다. 이 객체는 서버로부터 데이터를 전송받을 때 사용이 됩니다. ( IE 5, 6 버전에서는 ActiveXObject 라는 객체가 사용됩니다. )


그럼 이 객체를 어떻게 만드는지 예제를 통해서 알아보겠습니다.

예제1 - XMLHttpRequest 객체 생성하기

var xhttp;
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
    } else {
    // code for IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
연습하기 »


자, 이제 객체를 생성했으니까 이 객체를 이용해서 메시지를 서버로 전송해야겠죠?


다음 포스팅에서 서버로 메시지를 전송해보도록 하겠습니다.