요청 파라미터를 서버로 보내기
지금까지는 ajax를 이용하여 요청을 서버로 보내는 방법과 서버로부터 받은 결과 정보를 파싱해서 처리하
는 여러 특징들에 대해서 살펴보았다. 하지만 이것만으로는 부족하다. xml 의 고정된 정보를 다루는 것이
실증나지 않는가? 요청을 보낼때 특정 파라미터를 실어서 서버에 보내고, 서버는 요청정보를 바탕으로 특
화된 응답정보를 보내야만 쓸만해 진다.
XMLHttpRequest(XHR) 은 고전적 웹의 GET/POST 방식과 흡사하게 동작한다. GET 방식은 name=value
쌍의 파라마터를 url 에 실어서 서버로 전송한다. 물론 name=value 쌍은 리소스 url 의 끝을 의미하는 ?
이후에 구분자(&) 를 사이사이에 끼고 주욱 붙는다.
POST 방식은 GET 방식과 마찬가지로 name=value 쌍의 형태로 데이터를 전달한다. 물론 같은 구분자
(&)를 사용한다. 하지만 POST 방식은 폼 요소의 데이터를 인코딩하여 Http Request 객체의 body 에 저
장해서 보낸다.
또 다른 차이점이 있다면 서버로 보낼 수 있는 요청정보의 크기인데, GET 방식으로는
name1=value1&name2=value2&name3=value3... 이런 문자열의 길이가, 브라우저마다 차이가 있지만, 대
략 2000 byte 이상이면 불가능하다. 불가능하다는 의미가 무엇이냐 하면 브라우저는 요청정보를 보내려고
시도는 하지만 처리가 안되기 때문에 프러세스는 중단되고 만다. 따라서 서버로 보내는 파라미터가 많을
때는 POST 방식을 사용해야 한다. 일반적으로 데이터를 fetch(검색) 할때는 GET 방식을 사용하고 그 이
외의 작업(추가, 수정, 삭제)에는 POST 방식을 주로 사용한다. 예를 들어 클릭해서 현재 이 글을 읽고 있
는 경우는 GET 방식이 사용되었을 것이고, 이 글을 수정할때는 POST 방식이 사용될 것이다.
Ajax와 관련된 차이점이라면 GET 방식은 파라미터가 인코딩되어 url 에 붙어가기 때문에 해당 url 을 통
째로 재사용(bookmark) 가능하지만 ajax 특성상 이런 북마킹 기능은 불가능 하다. HTML 폼 요소에는
method 속성이 있는데 개발자는 GET 또는 POST 방식을 선택할 수 있다. 요청 데이터들은 서버로
submit 될때 method속성에 알맞도록 자동으로 인코딩되지만 XHR 객체는 이런 내장 알고리즘이 없기 때
문에 개발자가 쿼리 스트링을 작성해야 한다. 쿼리 스트링을 작성하는 방법은 GET 또는 POST 방식에 상
관없이 동일하다. 유일한 차이점이 있다면 GET 방식의 쿼리 스트링은 요청 url 에 붙어서 서버로 전송되
지만 POST 방식의 쿼리 스트링은 XHR 객체의 send(쿼리 스트링) 메소드가 호출될때 파라미터로 전송된
다. 샘플을 살펴보면서 ajax 에서 GET 및 POST 방식을 어떻게 사용하는지 알아보자. 이번에는 결과화면
을 먼저 소개한다.
<3-11 GET/POST 방식 샘플 화면>
위 그림 3-11 은 브라우저에서 First name, Middle name, Birthday 를 입력한 후 Send parameters
using GET 버튼 혹은 Send parameters using POST 버튼을 눌렀을 때의 결과가 바로 아래 부분에 표시
되는 형태의 단순한 예제이다. 위 샘플을 실행시켜 보기 위해서는 getAndPostExample.html 과 서버 프로
그램인 GetAndPostExample.java 가 필요하다. 하지만 이번 예제의 주요 핵심은 서버 프로그램이 아니다.
XHR 객체가 GET/POST 방식을 어떻게 사용하는지를 이해하는 것이 중요하다. 클라이언트 및 서버 프로
그램 코드를 기술한 후 XHR 의 주요코드에 대해서 설명을 하겠다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sending Request Data Using GET and POST</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function createQueryString() {
var firstName = document.getElementById("firstName").value;
var middleName = document.getElementById("middleName").value;
var birthday = document.getElementById("birthday").value;
var queryString = "firstName=" + firstName + "&middleName=" + middleName
+ "&birthday=" + birthday;
return queryString;
}
function doRequestUsingGET() {
createXMLHttpRequest();
var queryString = "GetAndPostExample?";
queryString = queryString + createQueryString()
+ "&timeStamp=" + new Date().getTime();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", queryString, true);
xmlHttp.send(null);
}
function doRequestUsingPOST() {
createXMLHttpRequest();
var url = "GetAndPostExample?timeStamp=" + new Date().getTime();
var queryString = createQueryString();
xmlHttp.open("POST", url, true);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(queryString);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
parseResults();
}
}
}
function parseResults() {
var responseDiv = document.getElementById("serverResponse");
if(responseDiv.hasChildNodes()) {
responseDiv.removeChild(responseDiv.childNodes[0]);
}
var responseText = document.createTextNode(xmlHttp.responseText);
responseDiv.appendChild(responseText);
}
</script>
</head>
<body>
<h1>Enter your first name, middle name, and birthday:</h1>
<table>
<tbody>
<tr>
<td>First name:</td>
<td><input type="text" id="firstName"/>
</tr>
<tr>
<td>Middle name:</td>
<td><input type="text" id="middleName"/>
</tr>
<tr>
<td>Birthday:</td>
<td><input type="text" id="birthday"/>
</tr>
</tbody>
</table>
<form action="#">
<input type="button" value="Send parameters using GET" onclick="doRequestUsingGET();"/>
<br/><br/>
<input type="button" value="Send parameters using POST"
onclick="doRequestUsingPOST();"/>
</form>
<br/>
<h2>Server Response:</h2>
<div id="serverResponse"></div>
</body>
</html>
<3-12 getAndPostExample.html 의 전체 소스 코드>
package ajaxbook.chap3;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class GetAndPostExample extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
protected void processRequest(HttpServletRequest request,
HttpServletResponse response, String method)
throws ServletException, IOException {
//Set content type of the response to text/xml
response.setContentType("text/xml");
//Get the user's input
String firstName = request.getParameter("firstName");
String middleName = request.getParameter("middleName");
String birthday = request.getParameter("birthday");
//Create the response text
String responseText = "Hello " + firstName + " " + middleName
+ ". Your birthday is " + birthday + "."
+ " [Method: " + method + "]";
//Write the response back to the browser
PrintWriter out = response.getWriter();
out.println(responseText);
//Close the writer
out.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//Process the request in method processRequest
processRequest(request, response, "GET");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//Process the request in method processRequest
processRequest(request, response, "POST");
}
}
<3-13 GetAndPostExample.java 의 전체 소스 코드>
3-12 의 샘플 코드는 이전 예제와 비교해 봤을때 크게 어려운 부분은 없을 것이다. 3-13 의 프로그램은
단순한 에코성 문자열을 생성해서 다시 클라이언트로 보내는 것이므로 특별한 설명은 필요하지 않을 듯 싶
다. 이번 예제의 핵심은 ajax 에서 GET 및 POST 방식으로 서버에 파라미터를 보내는 방법이다.
function createQueryString() {
var firstName = document.getElementById("firstName").value;
var middleName = document.getElementById("middleName").value;
var birthday = document.getElementById("birthday").value;
var queryString = "firstName=" + firstName + "&middleName=" + middleName
+ "&birthday=" + birthday;
return queryString;
}
먼저 위 코드는 GET 및 POST 방식에 있어서 쿼리 스트링을 만들어 공통으로 사용하기 위한 메소드이다.
전에도 설명했듯이 name=value 쌍의 파라미터를 한줄의 String 데이터로 만들고 있다. 각 name=value 쌍
은 &로 구분지어야 한다. name=value 쌍의 순서는 상관없다.
function doRequestUsingGET() {
createXMLHttpRequest();
var queryString = "GetAndPostExample?";
queryString = queryString + createQueryString()
+ "&timeStamp=" + new Date().getTime();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", queryString, true);
xmlHttp.send(null);
}
위의 코드는 ajax 를 활용하여 GET 방식으로 파라미터를 서버에 보내는 코드이다. XHR 객체 생성후 쿼리
스트링을 생성한다. var queryString = "GetAndPostExample?"; 라인에서 GetAndPostExample 은
ajaxbook.chap3.GetAndPostExample 서브렛을 호출하기 위해서 서브렛 이름과 매핑된 url 이름이다. 이
부분은 해당 컨텍스트의 web.xml 에 다음과 같이 기술되어 있어야 한다.
<web-app>
<servlet>
<servlet-name>GetAndPostExample</servlet-name>
<servlet-class>ajaxbook.chap3.GetAndPostExample</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>GetAndPostExample</servlet-name>
<url-pattern>/GetAndPostExample</url-pattern>
</servlet-mapping>
</web-app>
쿼리 스트링을 만들때 "&timeStamp=" + new Date().getTime(); 부분을 넣은 이유는 다음과 같다. 몇몇
브라우저들은 명확하지 않은 조건하에서 똑같은 url 로 XHR 멀티 요청을 보냈을때 서버의 결과를 캐싱하
는 경향을 보인다. 비록 같은 url 이지만 응답이 다를경우엔 캐싱하는 경향이 오히려 예상치 못한 결과의
원인이 될 수도 있기때문에 되도록이면 unique 한 url을 생성하기 위한 방법을 택한것이다. 이렇게 생성한
쿼리 스트링을 open 메소드에 넣어주고 send 메소드에는 null 값을 설정한다. 다음은 POST 방식에 대해
서 살펴보자.
function doRequestUsingPOST() {
createXMLHttpRequest();
var url = "GetAndPostExample?timeStamp=" + new Date().getTime();
var queryString = createQueryString();
xmlHttp.open("POST", url, true);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(queryString);
}
POST 방식도 GET 방식과 마찬가지로 같은 쿼리 스트링을 사용한다. 하지만 용도는 다르다. GET 방식은
url 과 쿼리 스트링을 합쳐서 open 메소드에 넣어서 사용한 반면, POST 방식은 위 코드처럼 send 메소드
에 파라미터로 넣어준다. 또 다른 차이점이라면 POST 방식은 HTTP Request 객체의 바디에 파라미터가
저장되는 것이므로 헤더에도 Content-Type 을 반드시 정의해 줘야 한다. 정의를 해주지 않으면 서버에서
는 클라이언트에서 보낸 파라미터를 얻지 못한다.
출처: http://uip80.tistory.com/entry/요청-파라미터를-서버로-보내기?category=199706 [여명의집]