오늘은 Ajax를 통해 데이터를 주고 받는 코딩 예제를 살펴보겠다.
Get 또는 Post 방식으로 데이터 보내기
Get 방식과 Post 방식으로 각각 데이터를 보내는 법을 알아볼 것이다.
총 2개의 파일로 진행된다.
ajaxGetPost.jsp
먼저 웹페이지에 출력될 body 부분이다.
<body>
<form action="" name="myForm">
<input type="text" name="greeting"/>
<input type="button" value="Get전송" onclick="ajaxRequestGet();">
<input type="button" value="Post전송" onclick="ajaxRequestPost();">
</form>
<div id="printDiv" style="border: 1px solid blue; width: 50%"></div>
</body>
form을 사용하여 사용자가 입력할 부분은 'greeting'으로 지정하였다.
각각의 'Get/Post전송' 버튼을 누를 때마다 다른 메소드가 실행되도록 하였다.
이제 해당 메소드들을 살펴보도록 하자.
- XMLHttpRequest 객체 생성
<script type="text/javascript">
var XMLHttpRequest;
function getXMLHttpRequest(){
if(window.ActiveXObject){
try {
XMLHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
XMLHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
}else{
XMLHttpRequest = new XMLHttpRequest();
}
}
window.onload = function(){
getXMLHttpRequest();
}
</script>
먼저 실행 시 getXMLHttpRequest를 실행되도록 하여
브라우저 상황에 따라 다른 XMLHttpRequest 객체 생성 코딩을 실행하도록 한다.
- <Get 방식으로 데이터 보내기>
먼저 "Get전송" 버튼을 입력하면 실행되는 ajaxRequestGet() 메소드이다.
viewMessage() 는 콜백함수로 각각의 방식에서 모두 동일하게 실행되니
지금 Get방식과 함께 설명하는 것으로 하겠다.
function ajaxRequestGet(){
var data = document.myForm.greeting.value;
if(data==""){
alert("데이터 입력!");
document.myForm.greeting.focus();
return;
}
XMLHttpRequest.open("GET","ajaxGetPost_ok.jsp?greeting=" + data,true);
XMLHttpRequest.onreadystatechange = viewMessage;
XMLHttpRequest.send(null);
}
function viewMessage(){
var divE = document.getElementById("printDiv");
if(XMLHttpRequest.readyState==1 || XMLHttpRequest.readyState==2 || XMLHttpRequest.readyState==3){
divE.innerHTML = "<img src='./image/processing.gif' width='50' height='50'/>";
}else if(XMLHttpRequest.readyState==4){
divE.innerHTML = XMLHttpRequest.responseText;
}
}
- ajaxRequestGet()
변수 data에 greeting 밸류 값을 설정해주었다.
해당 내용이 없을 경우 종료되도록 하였으며
값이 있는 경우 밑에 내용이 진행된다.
XMLHttpRequest.open에 get방식이므로 주소에 넘어갈 값을 같이 넣어주었고 비동기 방식을 설정했다.
ajaxGetPost_ok는 글 순서상 밑에 나올 예정이다. 밑의 내용을 참고하면 될 것 같다.
onreadystatechange는 콜백함수를 지정하고
send에는 get방식이므로 null을 주었다.
- viewMessage()
출력할 printDiv의 element를 가져왔다.
XMLHttpRequest가 정상적으로 실행되기 전까지 이미지를 띄우도록 하였다.
이를 위해 밑에 _ok.jsp 파일에서 처리 시간이 길어지도록 하였다.
제대로 실행이 되었다면
XMLHttpRequest.responseText로 텍스트를 innerHTML에 넘긴다.
- <Post 방식으로 데이터 보내기>
"Post전송" 버튼을 눌렀을 때 실행되는 ajaxRequestPost 메소드이다.
function ajaxRequestPost(){
var data = document.myForm.greeting.value;
if(data==""){
alert("데이터 입력!");
document.myForm.greeting.focus();
return;
}
XMLHttpRequest.open("POST","ajaxGetPost_ok.jsp",true);
XMLHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
XMLHttpRequest.onreadystatechange = viewMessage;
XMLHttpRequest.send("greeting=" + data);
}
위의 Get방식과의 차이점 위주로 살펴보겠다.
XMLHttpRequest.open에서 경로에 데이터를 넘기지 않았으며
추가로 setRequestHeader를 입력하였다. post방식이라면 추가해줘야 한다.
또한 send에서 데이터를 넘겨줘야 하므로 넘길 data를 입력하였다.
마찬가지로 viewMessage를 실행하여 데이터를 출력하면 완성이다.
ajaxGetPost_ok.jsp
<%
String greeting = request.getParameter("greeting");
for(int i=0;i<35000;i++){
System.out.print("처리중...");
}
%>
<%="Server: " + greeting %>먼저 웹페이지에서 클라이언트가 입력한 greeting을 받아온다.
for문은 제대로 실행되기 전까지 이미지를 띄우기 위해 콘솔창에 문자를 띄움으로써 딜레이시켰다.
server와 함께 데이터를 다시 보내며
ajaxGetPost.jsp에서 이를 받게 되는 것이다.
Get 방식과 Post 방식으로 각각 데이터를 보내는 방법을 살펴보았다.
앞으로 다른 곳에서도 호출하여 쓸 수 있도록 자바스크립트에서 메소드를 만들어 볼 것이다.
내용은 동일하다.
var httpRequest = null;
function sendRequest(url,params,callback,method){
httpRequest = getXMLHttpRequest();
//method처리
var httpMethod = method ? method : "GET";
if(httpMethod!="GET" && httpMethod!="POST"){
httpMethod = "GET";
}
//data 처리
var httpParams = (params==null || params=="") ? null : params;
//url 처리
var httpUrl = url;
if(httpMethod=="GET" && httpParams!=null){
httpUrl = httpUrl + "?" + httpParams;
}
httpRequest.open(httpMethod,httpUrl,true);
httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
httpRequest.onreadystatechange = callback;
httpRequest.send(httpMethod=="POST" ? httpParams : null);
}
메소드 명은 sendRequest이다. 매개변수는 총 4개이다.
먼저 getXMLHttpRequest()를 호출하며 이는 ajaxGetPost.jsp에서 보았던 코딩과 같으므로 생략하겠다.
각각의 매개변수들은 삼항연산자로 구분하여 처리했다.
방식이 get인지 post인지 구분하기 위해 임의로 지정한 httpMethod에
get과 post가 아니더라도 get 방식으로 지정했다.
data는 httpParams에 담았으며 매개변수 params에 따라 달라진다.
url 역시 받은 값을 통해
GET방식이자 값이 있으면 url에 ?로 연결하여 값을 넘기도록 하였다.
open~send메소드들은 모두 위에서 설명한 내용이자
send의 경우에도 삼항연산자로 처리하였다.
이제 다른 곳에서 해당 코딩이 있는 js파일을 호출한 다음
sendRequest()메소드를 사용하면 되겠다!
3월 16일 수요일 수업🌝
'개발 교육 TIL > front-end' 카테고리의 다른 글
| [Ajax] Ajax로 게시판 / 방명록 만들기 (jQuery, JSP) (0) | 2022.03.19 |
|---|---|
| [Javascript] DOM(Document Object Model) - HTML DOM 객체 생성 (0) | 2022.03.17 |
| [Ajax] Ajax 개념, 기본 예제 - jQuery, XMLHttpRequest (0) | 2022.03.15 |
| [JSP/Servlet] 필터(Filter) 사용법 및 Encoding 예제 (0) | 2022.02.24 |
| [JSP/Servlet] 파일 다운로드 방법 및 예제 (0) | 2022.02.24 |
