서버로 요청 보내기

 

Ajax로 서버로 요청 보내는 방법은 XMLHttpRequest 객체의 open()메소드와 send()메소드를 사용한다.

 

xmlhttp = new XMLHttpRequest();

 

xmlhttp.open("GET", "ajaxTest.jsp",  true);

xmlhttp.send(); 

  

 

 

■요청 보내기 : open() 메소드

 

xmlhttp.open( method, url, 동기화 여부)

 

매개변수 설명

• method: 요청 메소드를 지정(GET and POST)
• url: 요청을 보낼 서버의 URL 주소
• 동기화여부: 서버와의 통신을 동기화시킬 것인지 비동기화 시킬 것이지 지정(true=asynchronous, false=syschronous)

 

 

 

 

■ HTTP 메소드에 따른 요청 방법

 

open()메소드에서 지정한 method 값에 따라 파라미터를 전달하는 방법이 달라진다. 일반적으로 GET 명령어가 POST 명령어보다 단순하고 빠르며 일반적으로 GET 명령어를 사용한다. POST 명령어를 사용할 때는 대용량의 데이터를 보낼 때, 사용자의 개인정보등을 보낼(GET방법보다 보안에 더 뛰어남) 때 사용한다.  

 

 

1. GET 메소드

 

xmlhttp.open("GET", "ajaxTest.jsp?name=henry&age=20", true);

xmlhttp.send() 

 

GET 메소드를 사용해 문서를 요청할 때 필요한 파라미터를 요청하는 문서의 URL 뒤에 GET 방식으로 파리미터를 포함하여 전송한다. 즉, URL 주소 뒤에 key=value 형태의 데이터 참조 형태로 전송한다. 또한, send() 메소드의 인자는 'null' 값을 가진다.

 

 

2. POST 메소드

 

xmlhttp.open("POST", "ajaxTest.jsp", true);

xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 

xmlhttp.send("name=Henry&age=20"); 

 

POST 메소드를 사용해 문서를 요청할 때는 setRequestHeader(header, value) 메소드를 포함시킨다. 즉, 요청 헤더의 데이터를 포함하여 전송한다. 또한, 파라미터는 send() 메소드에 포함하여 전송한다.

 

POST 메소드를 사용해 문서를 요청할 때는 setRequestHeader(header, value) 메소드를 포함시킨다. 즉, 요청 헤더의 데이터를 포함하여 전송한다. 또한, 파라미터는 send()메소드에 포함하여 전송한다.

  

 

 

  

■ 동기화 여부 지정하기

 

open() 메소드의 세 번째 인자인 동기화 여부는 'true'와 'false'값을 가질 수 있다. 일반적으로 true 값을 사용하며 true 값을 사용하는 이유는 서버가 많은 수행을 수행해야 할 때 서버의 응답을 기다리지 않고 클라이언트는 다른 일을 처리 할 수 있기 때문이다. true값을 다음과 같은 특성을 가지고 있다.

• 서버의 응답에 상관없이 다른 스크립트를 실행시킴
• 서버의 응답이 있을 경우 응답을 처리함

또한, 동기화 여부에 따라 처리하는 방법이 달라진다. 따라서 동기화 여부에 따른 처리 방법에 대해 알아야 한다. 

 

 

1. asynchronous = true (비동기 통신)

 

서버에 요청한 결과를 기다리지 않고 다른 스크립트를 수행하다가 서버가 요청에 해당하는 응답을 보내왔을 때 응답코드에 따른 수행을 지시한다. 따라서 응답결과에 따른 수행 절차를 따로 작성해야 한다.

 

xmlhttp.onreadystatechange = function() {

if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {

document.getElementById("myDiv").innerHTML = xmlhttp.responseText;

}

}

 

xmlhttp.open("GET", "ajax.txt", true);

xmlhttp.send();

 

 

XMLHttpRequest.onreadystatechange() 함수를 작성한다. 이 때 서버는 XMLHttpRequest.readyState 변수에 값을 포함하여 응답코드를 포함하여 응답하는데 응답코드별로 처리절차를 지정할 수 있다. 위의 코드 4는 응답완료 코드입니다.

 

 

2. synchronous = false(동기통신)

 

서버에 요청을 보낸 후 서버의 응답이 올 때까지 대기하고 있다가 응답을 받은 후 나머지를 처리하는 방식이다. 따라서 send() 메소드 아래에 서버 응답를 처리할 처리 절차를 작성한다.

 

xmlhttp.open("GET", "ajax.txt" false);

xmlhttp.send();

document.getElementById("myDiv").innerHTML = xmlhttp.responseText;