Ajax - 텍스트 데이터 전송받기

Dev/JS & Jquery

Ajax - 텍스트 데이터 전송받기

창문닦이 2019. 3. 29. 17:46

JavaScript & Ajax & JQuery

자바스크립트와 jQuery를 이용해서 Ajax를 구현하는 간단한 페이지를 실습해보고자 한다.

JavaScript 사용예제 - test1.jsp, ajaxUtil.js, test1_ok.jsp

JavaScript를 이용하여 서버로 보내는 HTTP request를 만들기 위해서는 그에 맞는 기능을 제공하는 Object의 인스턴스가 필요하다.

XMLHttpRequest 객체 생성

var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");//IE5.0이후에 나온 브라우저

var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE5.0이전

var xmlHttp = new XMLHttpRequest();//non IE

test.jsp - 페이지

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>예제1</title>
<script type="text/javascript" src="<%=cp%>/data/js/ajaxUtil.js"></script>
<script type="text/javascript">
function sendIt(){
xmlHttp = createXMLHttpRequest();//XMLHttpRequest 객체 생성을 하는 메소드를 모듈화하여 사용

var query = "";
var su1 = document.getElementById("su1").value;
var oper = document.getElementById("oper").value;
var su2 = document.getElementById("su2").value;

query = "test1_ok.jsp?su1="+su1+"&su2="+su2+"&oper="+oper;

//onreadystatechange 메소드
//서버가 작업을 마치고 클라이언트에게 정보를 돌려줄 때 자동으로 실행할 메소드를 지정한다.
xmlHttp.onreadystatechange = callback;//callback 함수 밑에 정의
//open(); 주소를 보내기위해 하는 준비작업
xmlHttp.open("GET",query,true);//true는 비동기방식
//send(); 보내는 명령어
xmlHttp.send(null);//POST방식으로 전송시 send에 전송해야하는 데이터값을 파라미터로 넣어준다
}
function callback(){
if(xmlHttp.readyState==4){
//4일 경우 서버응답 완료상태
if(xmlHttp.status==200){
//서버로부터 받은 응답코드를 나타내는 숫자. 정상적으로 응답을 받은 경우 200
printData();
// 200이 아닌경우는 요구를 처리하는 과정에서 문제 발생
//예를 들어 응답 상태 코드는 404 (Not Found) 이거나 혹은 500 (Internal Server Error) 이 될 수 있음
}
}
}
function printData(){
var result = xmlHttp.responseXML.getElementsByTagName("root")[0];//XML파일로 읽어옴
var out = document.getElementById("resultDIV");
out.innerHTML = "";
out.style.display = "";//기존값이 있다면 null 초기화
out.innerHTML = result.firstChild.nodeValue;
}
</script>
</head>
<body>
<input type="text" id="su1"/>
<select id="oper">
<option value="hap">더하기</option>
<option value="sub">빼기</option>
<option value="mul">곱하기</option>
<option value="div">나누기</option>
</select>
<input type="text" id="su2"/>
<input type="button" value=" = " onclick="sendIt();"/>
<br/><br/>
<div id="resultDIV" style="display:none;"></div>
</body>
</html>

data - js - javascript source file 생성 - ajaxUtil.js 생성

Ajax를 활용하기 위해서는 서버와 요청/응답을 주고받아야 하기 때문에 매번 XMLHttpRequest 객체를 생성해야한다. 그러므로 이를 모듈화하는 자바스크립트문을 생성.

var xmlHttp;//변수생성
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();//non IE
}else if(window.ActiveXObject){
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");//IE5.0이후
} catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE5.0이전
}
}
return xmlHttp;
}

test1_ok.jsp - model을 받아 처리 후 반환해주는 페이지

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();

int su1 = Integer.parseInt(request.getParameter("su1"));
int su2 = Integer.parseInt(request.getParameter("su2"));
String oper = request.getParameter("oper");

int sum = 0;
if(oper.equals("hap")){
sum = su1 + su2;
}else if(oper.equals("sub")){
sum = su1 - su2;
}else if(oper.equals("div")){
sum = su1 / su2;
}else if(oper.equals("mul")){
sum = su1 * su2;
}

//결과를 돌려주기 위해서 xml파일에 데이터를 넣어 만들어준 후 반환
StringBuffer sb = new StringBuffer();
sb.append("<?xml version='1.0' encoding='UTF-8'?>\n");
sb.append("<root>"+sum+"</root>");
//클라이언트에게 response
response.setContentType("text/xml;charset=utf-8");
response.getWriter().write(sb.toString());
%>

실행결과 페이지

Ajax & JQuery 사용예제

test2.jsp : 입력 및 출력 페이지

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=cp%>/data/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">

$(function(){

$("#sendButton").click(function(){
var params = "subject=" + $("#subject").val() + "&content=" + $("#content").val();
$.ajax({
type:"POST", //전송방식
url:"test2_ok.jsp", //주소
data:params, //전송데이터
dataType:"xml", //반환값을 xml로 받겠다
success:function(args){ //결과가 제대로된 데이터라면 args로 들어감

//xml에서 데이터 읽기(parsing 작업 필요)
$(args).find("status").each(function(){//status해당태그 검색. each는 반복문
alert($(this).text());
});
var str = "";
//each로 인해서 반복문
$(args).find("record").each(function(){
var id = $(this).attr("id"); //1 2
var subject = $(this).find("subject").text();
var content = $(this).find("content").text();
str += "id="+id+",subject="+subject+",content="+content+"<br/>";
});

$("#resultDIV").html(str);
},
beforeSend:showRequest,//보내기전에 입력여부 체크
error:function(e){
alert(e.responseText);//에러메세지 텍스트로 띄우기
}
});
});
});
//자바스크립트
function showRequest(){

var flag = true;
if(!$("#subject").val()){
alert("제목을 입력하세요!");
$("#subject").focus();
return false;
}
if(!$("#content").val()){
alert("내용을 입력하세요!");
$("#content").focus();
return false;
}
return flag;//true가 return 되어야만 sendButton이 클릭되었을때 함수가 돌아감
}
</script>
</head>
<body>
제목 : <input type="text" id="subject"/><br/>
내용 : <input type="text" id="content"/><br/>
<input type="button" id="sendButton" value="보내기"/>
<br><br><br>
<div id="resultDIV"></div>
</body>
</html>

test2_ok.jsp : 서버의 요청을 받아 응답하는 웹 페이지

<%@ page contentType="text/xml; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
String subject = request.getParameter("subject");
String content = request.getParameter("content");
%>
<root>
<status>권장도서</status>
<record id="1">
<subject><%=subject %></subject>
<content><%=content %></content>
</record>
<record id="2">
<subject>피구왕 통키</subject>
<content>스포츠</content>
</record>
</root>

실행결과 페이지

JQuery 사용예제

test3.jsp : 로그인 페이지(GET방식)

/*
//Post
$.post("test3_ok.jsp",{userId:value1,userPwd:value2},function(args){
$("#resultDIV").html(args);
});
*/

});

$("#clearButton").click(function(){
$("#resultDIV").empty();
});

});
</script>
<title>Insert title here</title>
</head>
<body>
아이디: <input type="text" id="userId"/><br/>
패스워드: <input type="text" id="userPwd"/><br/>
<button id="saveButton">전송</button>
<button id="clearButton">지우기</button>
<br>
<br>
<div id="resultDIV"></div>
</body>
</html>

test3_ok.jsp : 파라미터값을 받아오는 페이지

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
String userId = request.getParameter("userId");
String userPwd = request.getParameter("userPwd");
%>
아이디:<%=userId %><br/>
패스워드:<%=userPwd %><br/>

실행결과 페이지

Ajax & JQuery 사용예제

test4.jsp 로그인 페이지(POST방식)

test4_ok.jsp : 파라미터값을 받아오는 페이지

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
String userId = request.getParameter("userId");
String userPwd = request.getParameter("userPwd");
%>
아이디:<%=userId %><br/>
패스워드:<%=userPwd %><br/>

실행결과 페이지

Jquery & Ajax를 이용하여 JSON 데이터 전송하기

JSON은 Map방식으로 <Key, Value> 형태로 데이터가 저장됨.

test5_ok.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();

String userId = request.getParameter("userId");
String userPwd = request.getParameter("userPwd");

String result = "";

for(int i=1;i<=3;i++){
result += "{\"id\":\""+i ;
result += "\",\"userId\":\""+userId;
result += "\",\"userPwd\":\""+userPwd + "\"},";
}

JSON방식은 {Key:Value} 형식으로 데이터가 저장된다. 각각의 값들은 큰따옴표로 묶여있어야한다.
JSON 데이터 규격
[
{"id":"1","userId":"Lee","userPwd":"123"},
{"id":"1","userId":"Lee","userPwd":"123"},
{"id":"1","userId":"Lee","userPwd":"123"},
]

result = result.substring(0,result.length()-1);//마지막에 있는 따옴표 제거
result = "["+result+"]"; //전체데이터는 대괄호로 묶임
out.println(result);
%>

실행결과 페이지

'Dev > JS & Jquery' 카테고리의 다른 글

Ajax - Document Object Model과 XML (0)	2019.04.03
Ajax - 검색시 제시어 기능 만들기 (0)	2019.04.02
Ajax - get/post방식,Id유효성검사,서버/클라이언트 시간확인,CSV형식 데이터 읽기 (0)	2019.04.01
JQuery 셋팅 및 예제 (0)	2019.03.29
Ajax란 (0)	2019.03.29

현재글Ajax - 텍스트 데이터 전송받기

창문을 열심히 닦아요