2020. 12. 2. 11:15ㆍ교육과정/KOSMO
키워드 : AJAX
****
0. 복습
(1) 폼 <---> DB 연결
(2) 기본객체
: JSP를 JAVA로 변환할 때 기본적으로 만들어지는 객체는
별도로 생성하지 않아도 가져다 사용할 수 있다.
` request - 폼의 입력값(클라이언트)을 얻어올 때
- header 정보를 얻어올 때
- 쿠키값은 서버로 전송
` response - 리다이렉트 (Redirect)
` session
(3) 쿠키 & 세션
2. AJAX 사용 배경
* AJAX란?
( Asyncronous Javascript AND Xml 비동기식 자바스크립트와 xml )
: 클라이언트 모르게(url 변경X) 화면 뒷단에서 데이터 변경 후 전체 페이지 새로고침 없이 화면을 새롭게 그리는 것
ex) 댓글을 작성할 경우, 전체화면은 그대로 유지되면서 댓글부분만 새롭게 그려짐
※ 웹의 기본 수행 방식(original) - 사용자 요청(request)에 따라 화면이 바뀜(response)
(1) 클라이언트가 00.normal.web.jsp 페이지에서 사용자 입력값 넣고 버튼 클릭
<form name="frm" action="00_server.jsp">
<input type="submit" value="server.jsp파일을 불러 데이터 받아옴">
(2) 입력값이 00.server.jsp로 넘어가서 명령 수행 후 response.sendRidirect로 00_normal_web.jsp 요청
// 1. 이전 화면에서 넘겨받은 데이타
String cate = request.getParameter("cate");
String name = request.getParameter("name");
// 2. 다시 화면으로 보낼 데이터 구성
cate="changed_"+cate+"_by_server";
name="from_"+name+"_server";
//out.write("00_normal_web.jsp?"+"cate="+ cate+"&name=" + name);
// 3. 다시 00_normal_web.jsp 요청
response.sendRedirect("00_normal_web.jsp?"+"cate="+ cate+"&name=" + name);
(3) 00_normal_web.jsp?cate=( )&name=( )인 페이지로 다시 화면이 그려지고 사용자에게 출력
서버로부터 넘겨받은 데이터<br/>
첫번째 데이터 : <input type="text" name="cate" id="cate" value="<%=cate%>"/><br/>
두번째 데이터 : <input type="text" name="name" id="name" value="<%=name%>"/><br/>
< 00_normal_web.jsp 전체 소스 코드 >
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// *** 한글이 깨지는 문제가 있지만 전반적인 흐름만 이해합니다.
request.setCharacterEncoding("UTF-8");
String cate = request.getParameter("cate");
String name = request.getParameter("name");
if( cate == null ) cate = "";
if( name == null ) name = "";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<form name="frm" action="00_server.jsp">
<input type="submit" value="server.jsp파일을 불러 데이터 받아옴">
<br/>
서버로부터 넘겨받은 데이터<br/>
첫번째 데이터 : <input type="text" name="cate" id="cate" value="<%=cate%>"/><br/>
두번째 데이터 : <input type="text" name="name" id="name" value="<%=name%>"/><br/>
</form>
</body>
</html>
< 00_server.jsp 전체 소스 코드 >
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// *** 한글이 깨지는 문제가 있지만 전반적인 흐름만 이해합니다.
request.setCharacterEncoding("UTF-8");
// 1. 이전 화면에서 넘겨받은 데이타
String cate = request.getParameter("cate");
String name = request.getParameter("name");
// 2. 다시 화면으로 보낼 데이터 구성
cate="changed_"+cate+"_by_server";
name="from_"+name+"_server";
//out.write("00_normal_web.jsp?"+"cate="+ cate+"&name=" + name);
// 3. 다시 00_normal_web.jsp 요청
response.sendRedirect("00_normal_web.jsp?"+"cate="+ cate+"&name=" + name);
%>
2. AJAX 기초 - original java 방식
※ 사용자는 1번만 페이지를 요청했으나 서버에서는 3번?? 바꿔서 보여줌
(1) 01_ajax_get.csv.jsp 페이지 접속
var xmlHttp;
window.onload=function(){
// 1. 브라우저에 따른 XMLHttpRequest생성하기.
xmlHttp = new XMLHttpRequest();
// 2. 요청에 대한 응답처리 이벤트 리스너 등록.
xmlHttp.onreadystatechange=on_ReadyStateChange;
(2) 서버로 보낼 데이터 생성 : cate=book&name=kim
var data = "cate=book&name=kim";
(3) get 방식으로 01_server.jsp?cate=book&name=kim 페이지를 엶
xmlHttp.open("GET", "01_server.jsp?"+data, true);
(4) 01_server.jsp에서 cate=서버로부터cate|name=from_server_name 이라는 구문을 받아옴
→ 추후 parseData 함수 수행할 데이터임
// 1. 이전 화면에서 넘겨받은 데이타
String cate = request.getParameter("cate");
String name = request.getParameter("name");
// 2. 다시 화면으로 보낼 데이터 구성
cate="서버로부터"+cate;
name="from_server_"+name;
out.write("cate="+ cate+"|name=" + name);
(5) alert 띄움 ("전송 시작!")
// T. 동기/비동기 실행 테스트를 위한 부분.
alert("전송 시작!");
(6) on_ReadyStateChange() 메소드 수행 시작
→ 화면의 상태(xmlHttp.readyState)가 순차적으로
초기화면(0), 로딩중(1) 로딩됨(2) 대화상태(3) 데이터전송완료(4)로 바뀜
( readyState의 값이 변경될 때마다 사용자 액션이 없더라도
on_ReadyStateChange() 메소드에 등록된 callback 함수가 수행되어 총 4회 수행된다.)
→ 4까지 오면 서버로부터 응답이 성공인 것
function on_ReadyStateChange(){
(7) xmHttp.readyState == 4가 되면 if문 수행
if(xmlHttp.readyState==4){
(8) xmlHttp.status == 200 인지 확인
(200은 에러 없음, 404는 페이지 존재하지 않음, 500은 서버단 에러)
if(xmlHttp.status==200){
(9) 200일 경우 alert 띄움
("서버에서 받은 원본 데이터 : ~~~)
............. ~~~는 01_server.jsp에서 받아온 구문 전체임
alert("서버에서 받은 원본 데이터 : "+xmlHttp.responseText);
(10) parseData 함수로 데이터 파싱처리 수행하여 cate와 name에 해당하는 내용을 분리
(01_server.jsp에서 받아온 구문 사용)
< 01_ajax_get_csv.jsp >
parseData(xmlHttp.responseText);
< 01_server.jsp >
//7. CSV포맷 데이터 처리.
function parseData(strText){
// |를 기준으로 문자열을 분리하여 배열로 담음
var aryData = strText.split("|");
for(var i=0;i<aryData.length;i++){
// =를 기준으로 분자열을 분리하여 배열로 담음
var param = aryData[i].split("=");
// 공백제거를 하지 않으면 처음에 공백에 들어와서 cate를 찾지 못함
// param[0]에 cate가 있으면 출력은 param[1]을 함
if( param[0].trim() == 'cate'){
document.getElementById("cate").value = param[1];
}
// param[0]에 name이 있으면 출력은 param[1]을 함
if( param[0].trim() == 'name'){
document.getElementById("name").value = param[1];
}
}
}
(11) 화면의 #cate에 해당하는 곳에 구문분석한 cate값을 대입하여 출력, #name에 해당하는 곳에 구문분석한 name값을 대입하여 출력
document.getElementById("cate").value = param[1];
document.getElementById("name").value = param[1];
< 01_ajax_get_csv.jsp 전체 소스 코드 >
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script>
var xmlHttp;
window.onload=function(){
// 1. 브라우저에 따른 XMLHttpRequest생성하기.
xmlHttp = new XMLHttpRequest();
// 2. 요청에 대한 응답처리 이벤트 리스너 등록.
xmlHttp.onreadystatechange=on_ReadyStateChange;
// 3.서버로 보낼 데이터 생성.
// 3.데이터 생성.
var data = "cate=book&name=kim";
//###########################################################
// 4. GET방식으로 데이터 보내기, 응답은 비동기로 클라이언트<->서버간의 연결 요청준비.
xmlHttp.open("GET", "01_server.jsp?"+data, true);
// 5. 실제 데이터 전송.
xmlHttp.send(null);
//####
// T. 동기/비동기 실행 테스트를 위한 부분.
alert("전송 시작!");
}
// 6.응답처리.
function on_ReadyStateChange(){
// 4=데이터 전송 완료.(0=초기화전,1=로딩중,2=로딩됨,3=대화상태)
if(xmlHttp.readyState==4){
//200은 에러 없음.(404=페이지가 존재하지 않음)
if(xmlHttp.status==200){
// 서버에서 받은 값.
alert("서버에서 받은 원본 데이터 : "+xmlHttp.responseText);
//7. 데이터 파싱처리.
parseData(xmlHttp.responseText);
}
else{
alert("처리 중 에러가 발생했습니다.");
}
}
}
//##################################################
//7. CSV포맷 데이터 처리.
function parseData(strText){
// alert( strText );
// |를 기준으로 문자열을 분리하여 배열로 담음
var aryData = strText.split("|");
for(var i=0;i<aryData.length;i++){
// =를 기준으로 분자열을 분리하여 배열로 담음
var param = aryData[i].split("=");
// 공백제거를 하지 않으면 처음에 공백에 들어와서 cate를 찾지 못함
// param[0]에 cate가 있으면 출력은 param[1]을 함
if( param[0].trim() == 'cate'){
document.getElementById("cate").value = param[1];
}
// param[0]에 name이 있으면 출력은 param[1]을 함
if( param[0].trim() == 'name'){
document.getElementById("name").value = param[1];
}
}
}
</script>
</head>
<body>
서버로부터 넘겨받은 데이터<br/>
첫번째 데이터 : <input type="text" name="" id="cate"/><br/>
두번째 데이터 : <input type="text" name="" id="name"/><br/>
</body>
</html>< 01_server.jsp 전체 소스 코드 >
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// 1. 이전 화면에서 넘겨받은 데이타
String cate = request.getParameter("cate");
String name = request.getParameter("name");
// 2. 다시 화면으로 보낼 데이터 구성
cate="서버에서"+cate+"변경";
name="from_"+name+"_server";
out.write("cate="+ cate+"|name=" + name);
%>
3. AJAX 기초 - AJAX 방식 도입 (중간단계)
※ original 방식에서 길게 작성한 스크립트를 JQuery를 사용하여 간략하게 기술할 수 있다.
※ 축약형인 $.get() 메소드의 의미
: 01_server.jsp라는 페이지를 요청할 때 param이라는 데이터를 가져가고,
이를 성공하면 parseData라는 함수를 호출하겠다는 뜻
$(function(){
var param = { cate : 'book', name : 'kim'}
$.get("01_server.jsp", param, parseData);
function parseData(strText){
var aryData = strText.split("|");
for(var i=0;i<aryData.length;i++){
var param = aryData[i].split("=");
if( param[0].trim() == 'cate'){
document.getElementById("cate").value = param[1];
}
if( param[0].trim() == 'name'){
document.getElementById("name").value = param[1];
}
}
}
});
※ 축약이 아닌 $.get() 메소드의 original 문법 - 알아보기 쉬워 더 많이 사용하는 편임
$.ajax({
// IE나 Chrome과 같은 브라우저별로 기본 type이 다를 수 있어 별도로 지정해주는 것
type : 'get', // 전송방식
data : param, // 보내는 데이터
url : '01_server.jsp', // 요청 서버 페이지
success : parseData // 성공시 연결 함수
error : function(err){ // 실패시 연결 함수
alert('error!!! + err')
}
});
< 01_ajax_get_csv.jsp 전체 소스 코드 >
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="libs/jquery-1.9.1.min.js"> </script>
<script type="text/javascript">
$(function(){
var param = { cate : 'book', name : 'kim'}
// 축약형인 $.get() 메소드
$.get("01_server.jsp", param, parseData);
// -> 01_server.jsp라는 페이지를 요청할 때 param이라는 데이터를 가져가고, 이를 성공하면 parseData라는 함수를 호출하겠다는 뜻
/* 축약이 아닌 original 문법
$.ajax({
type : 'get',
data : param,
url : '01_server.jsp',
success : parseData
error : function(err){
alert('error!!! + err')
}
}); */
//7. CSV포맷 데이터 처리.
function parseData(strText){
var aryData = strText.split("|");
for(var i=0;i<aryData.length;i++){
var param = aryData[i].split("=");
if( param[0].trim() == 'cate'){ // 공백제거를 하지 않으면 처음에 공백에 들어와서 cate를 찾지 못함
document.getElementById("cate").value = param[1];
}
if( param[0].trim() == 'name'){
document.getElementById("name").value = param[1];
}
}
}
});
</script>
</head>
<body>
서버로부터 넘겨받은 데이터<br/>
첫번째 데이터 : <input type="text" name="" id="cate"/><br/>
두번째 데이터 : <input type="text" name="" id="name"/><br/>
</body>
</html>< 01_server.jsp 전체 소스 코드 >
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// 1. 이전 화면에서 넘겨받은 데이타
String cate = request.getParameter("cate");
String name = request.getParameter("name");
// 2. 다시 화면으로 보낼 데이터 구성
cate="서버로부터"+cate;
name="from_server_"+name;
out.write("cate="+ cate+"|name=" + name);
%>
4. xml을 사용한 AJAX
※ 서버로부터 넘어오는 데이터가 xml 타입일 경우의 AJAX 사용
var param = { cate: 'IT', name: 'hong'};
$.ajax({
type: 'get', // 전송방식
data: param, // 보내는 데이터
url: '03_server.jsp', // 요청 서버 페이지
dataType: 'xml', // 받을 데이터 타입
success: function(xmldata){ // 성공시 연결 함수
$('#cate').val( $(xmldata).find('first').text() );
},
error: function(err){ // 실패시 연결 함수
alert('실패' + err)
}
});
이 때 xmldata는 이미 객체화되어 alert로는 undefined로 확인할 수 없음
alert(xmldata);
< 03_ajax_post_xml.jsp 전체 소스 코드 >
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="libs/jquery-1.9.1.min.js"> </script>
<script type="text/javascript">
$(function(){
var param = { cate: 'IT', name: 'hong'};
$.ajax({
// IE나 Chrome과 같은 브라우저별로 기본 type이 다를 수 있어 별도로 지정해주는 것
type: 'get', // 전송방식
data: param, // 보내는 데이터
url: '03_server.jsp', // 요청 서버 페이지
dataType: 'xml', // 받을 데이터 타입
success: function(xmldata){ // 성공시 연결 함수
// alert(xmldata); //-> 이미 객체화되어 alert로는 undefined로 확인하지 못함
$('#cate').val( $(xmldata).find('first').text() );
},
error: function(err){ // 실패시 연결 함수
alert('실패' + err)
}
});
});
</script>
</head>
<body>
서버로부터 넘겨받은 데이터<br/>
첫번째 데이터 : <input type="text" name="" id="cate"/><br/>
두번째 데이터 : <input type="text" name="" id="name"/><br/>
</body>
</html>< 03_server.jsp 전체 소스 코드 >
<%@ page language="java" contentType="text/xml; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- contentType="text/xml"이다. -->
<% // 1. 이전 화면에서 넘겨받은 데이타
String cate = request.getParameter("cate");
String name = request.getParameter("name");
// 2. 다시 화면으로 보낼 데이터 구성
String result ="";
result += "<data>";
result += "<first>"+ "서버에서"+cate+"변경" +"</first>";
result += "<second>"+ "from_"+name+"_server" +"</second>";
result += "</data>";
out.write(result);
%>
5. json을 사용한 AJAX
※ 서버로부터 넘어오는 데이터가 xml 타입일 경우의 AJAX 사용
$.ajax({
type: 'post',
data: param,
dataType: 'text',
url: '04_server.jsp',
success: function(result){
//alert(result);
var obj = {};
obj = eval("("+result+")"); // text -> json 객체
$('#cate').val(obj.first);
$('#name').val(obj.second);
}
});* 4라인에서 dataTaype : 'json' 으로 작성해야 하나,
본 실습에서는 04_server.jsp를 작성하는 과정에서 내용물이 text로 구성되어 부득이하게 text로 기술함
* eval() 함수의 사용 목적은 객체를 만들기 위함하고 json 역시 객체로 만들어 사용한다.
json의 내용물이 { a : 1, b : 2 }라고 가정할 때 eval() 함수를 사용하면 json으로 인식하는 것이 아니라,
{ label : 1, b : 2 } 라고 읽어버린다. ---> invalied label error
이러한 에러를 방지하기 위해 괄호()로 감싸주면 정상적으로 { a : 1, b : 2 }의 내용을 갖는 json으로 읽을 수 있다.
→ ※ eval()에 대한 내용은 틀릴 수 있음!ㅠㅠ
(참고)
< 04_ajax_post_json.jsp 전체 소스 코드 >
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="libs/jquery-1.9.1.min.js"> </script>
<script>
$(function(){
var param = { cate: 'IT', name: 'hong'};
$.ajax({
type: 'post',
data: param,
dataType: 'text', // 우선은 text(04_server.jsp 내용 때문) 사용했으나 추후에는 json으로 사용해야 함
url: '04_server.jsp',
success: function(result){
//alert(result);
var obj = {};
obj = eval("("+result+")"); // text -> json 객체
// eval()은 result를 ()로 감싸야 인식하기 때문에 ""를 사용하여 감싸준 것
$('#cate').val(obj.first);
$('#name').val(obj.second);
}
});
})
</script>
</head>
<body>
서버로부터 넘겨받은 데이터<br/>
첫번째 데이터 : <input type="text" name="" id="cate"/><br/>
두번째 데이터 : <input type="text" name="" id="name"/><br/>
</body>
</html>< 04_server.jsp 전체 소스 코드 >
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% // 1. 이전 화면에서 넘겨받은 데이타
String cate = request.getParameter("cate");
String name = request.getParameter("name");
// 2. 다시 화면으로 보낼 데이터 구성
String result ="";
result += "{";
result += "'first' : "+ "'changed_"+cate+"_by_server" +"',";
result += "'second' : "+ "'from_"+name+"_server'";
result += "}";
// 나중에 json 구조 만들 때는 라이브러리 사용
System.out.println(result);
out.write(result);
%>
6. AJAX를 사용한 계산기
(1) calc-action.jsp과 연결
cal-form-json.html에서 <form>의 값을 calc-action.jsp로 넘겨준다.
<form id='frm' action="./jsp/calc-action.jsp" method="get">${param.op1 }+${param.op2 }( 막간 참고용 ) - 틀릴수도 있음!
calc-action.jsp의 param은 cal-form-json.html에서 넘어오는 데이터 전체를 가리키는 것
이전의 실습에서는 var param = { ~~ : ~~, ~~ : ~~ }로 따로 정의하여 사용했으나,
이번 실습에서는 따로 정의하지 않고 외부 라이브러리에서 정의된 param을 사용한 것이다.
간단하게 action.jsp 에서는 넘어오는 데이터가 param이라는 이름을 갖는 것으로 생각하면 된다.
버튼을 클릭해도 화면이 넘어가지 않도록 return false와 함께 $.ajax({})를 기술한다.
→ 같은 페이지 내 [실행결과]에 결과를 출력하기 위함
$(function(){
$('#frm').submit(function(){
$.ajax({
url: './jsp/calc-action.jsp',
type: 'get',
data: {
'op1' : $('#op1').val(),
'op2' : $('#op2').val()
},
dataType: 'text',
success: function(data){
$('#result').text(data);
},
error: function(err){
console.log(err);
}
});
return false; // submit 전송되지 않도록 막아줌
});
})
< cal-form-json.html 전체 소스 코드 >
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax 계산기 JSON</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#frm').submit(function(){
$.ajax({
url: './jsp/calc-action.jsp',
type: 'get',
data: {
'op1' : $('#op1').val(),
'op2' : $('#op2').val()
},
dataType: 'text',
success: function(data){
$('#result').text(data);
},
error: function(err){
console.log(err);
}
});
return false; // submit 전송되지 않도록 막아줌
});
})
</script>
</head>
<body>
<form id='frm' action="./jsp/calc-action.jsp" method="get">
<input name="op1" id="op1" size="3">
<select name="opr" id="opr" >
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
<option>%</option>
</select>
<input name="op2" id="op2" size="3">
<input type="submit" value=" = ">
</form>
<fieldset>
<legend>실행결과</legend>
<div id="result"></div>
</fieldset>
</body>
</html>< cal-action.jsp 전체 소스 코드 >
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- -->
${param.op1 }+${param.op2 }
(2) calc-action-json.jsp과 연결
$.ajax({})에서 연결될 url을 calc-action-json.jsp로 지정하여 데이터를 보내고
json타입으로 받아온 data에서 result에 해당하는 값을 화면상의 "실행결과"에 출력한다.
$.ajax({
url: './jsp/calc-action-json.jsp',
...
dataType: 'json',
...
$('#result').text(data.result);
...
});
< cal-form-json.html 전체 소스 코드 >
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax 계산기 JSON</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#frm').submit(function(){
$.ajax({
url: './jsp/calc-action-json.jsp',
type: 'get',
data: {
'op1' : $('#op1').val(),
'op2' : $('#op2').val()
},
dataType: 'json',
success: function(data){
$('#result').text(data.result);
},
error: function(err){
console.log(err);
}
});
return false; // submit 전송되지 않도록 막아줌
});
})
</script>
</head>
<body>
<form id='frm' action="./jsp/calc-action.jsp" method="get">
<input name="op1" id="op1" size="3">
<select name="opr" id="opr" >
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
<option>%</option>
</select>
<input name="op2" id="op2" size="3">
<input type="submit" value=" = ">
</form>
<fieldset>
<legend>실행결과</legend>
<div id="result"></div>
</fieldset>
</body>
</html>< cal-action-json.jsp 전체 소스 코드 >
<%@ page language="java" contentType="application/json; charset=UTF-8"
pageEncoding="UTF-8"%>
{
"op1":${param.op1},
"op2":${param.op2},
"opr": "${param.opr}",
"result":${param.op1 + param.op2}
}
7. AJAX를 사용한 홈페이지 - 이지스퍼블리싱 예문
※ ui.js의 3라인
→ id가 container인 곳에 start라는 클래스를 부여함
$("#container").addClass("start");
→ start라는 클래스는 ui.css에서 확인 가능
#container.start .content{top:0;}→ #container가 처음에는 top:0이 아닌 위치에 자리하고 있다가 top:0으로 바뀐 것임을 예상할 수 있다.
주석처리 해보면 구분 된다.
// $("#container").addClass("start");
※ ui.js의 5라인
→ 우측의 메뉴를 클릭했을 때 발생하는 이벤트를 기술함
$("nav li").click(function(){→ container의 크기를 조정하여 100%로 맞춤
$("#container").css("max-width", "100%")→ 선택된 요소의 속성 중 data-rol을 가져와서 id라는 변수에 담음
var id=$(this).attr("data-rol"); → 선택된 요소에 해당하는 것 1개만 띄우기 위해,
li의 on 클래스를 모두 지운 뒤, 선택된 것에만 on 클래스를 부여함
$("nav li").removeClass("on");
$(this).addClass("on");
※ 도서소개 - 하단의 도서 이미지를 클릭하면 중앙의 도서 정보가 바뀌게 하기
(1) 이벤트가 발생한 li 요소(도서 이미지)의 속성 중 data-url값을 가져와서 변수 liurl에 담는다.
alert로 liurl에 담긴 값을 확인해볼 수 있다.
$(".book_roll li").click(function(){
// (1) 이벤트 발생한 li 요소에서 data-url 값 가져오기
var liurl = $(this).attr('data-url');
alert(liurl);
})
(2) ajax의 결과를 alert창에서 확인해보면 html 문서임
$(".book_roll li").click(function(){
// (1) 이벤트 발생한 li 요소에서 data-url 값 가져오기
var liurl = $(this).attr('data-url');
// (2) class='notebook' 지정한 article의 요소에 ajax로 파일을 받아서 지정
$.ajax({
type: 'post',
url: liurl,
dataType: 'html',
success: function(data){
alert(data;
}
});
});
(3) class가 notebook인 요소의 html을 data의 값으로 변경
$(".book_roll li").click(function(){
// (1) 이벤트 발생한 li 요소에서 data-url 값 가져오기
var liurl = $(this).attr('data-url');
// (2) class='notebook' 지정한 article의 요소에 ajax로 파일을 받아서 지정
$.ajax({
type: 'post',
url: liurl,
dataType: 'html',
success: function(data){
$('.notebook').html(data);
}
});
});(참고) text()와 html() 차이
단순 글자를 바꿀 때는 text()
태그와 태그 사이를 바꿀 때는 html()
8. AJAX를 사용한 아이디 중복 검사
※ 중복체크 버튼을 클릭했을 때 .userinput의 사용자 입력값을 userid라는 key값으로 IdCheck.jsp로 보낸다.
$('#id_check').click(function(){
$.ajax({
type: 'get',
url: './IdCheck.jsp',
data: { userid : $('.userinput').val() },→ IdCheck.jsp에서는 받아온 userid에 해당하는 value로 SQL을 수행한다.
userid와 동일한 정보가 있으면 1행 이상이 ResultSet에 담아지고,
ResultSet의 다음행이 있는지 next() 함수로 확인하여 YES, NO를 변수 result에 담아 IdForm.jsp로 돌려준다.
String sql = "select * from emp where ename=upper('" + request.getParameter("userid")+"')";
System.out.println(sql);
Statement stmt = connection.createStatement();
ResultSet rs = stmt.executeQuery(sql);
String result="NO";
if (rs.next()){
result = "YES";
}
out.print(result);→ SQL 결과로 넘어온 data가 알맞게 출력되는지 alert로 확인할 수 있다.
dataType: 'text',
success: function(data){
alert(data);
}
→ 넘어온 data값이 "YES"라면 "이미 사용중" 출력, 그렇지 않다면 "사용 가능" 출력
if(data.trim() == 'YES'){
$('#idmessage').text('이미 사용중');
$('#idmessage').slideDown();
}else{
$('#idmessage').text('사용 가능');
$('#idmessage').slideDown();
}
※ 중복체크 버튼을 누르지 않아도 사용자가 입력할 때마다 실시간으로 결과를 알려주려면 keyUp을 사용하면 된다.
(서버를 계속 다녀와서 화면을 그려야 하므로 현재는 그다지 사용하지 않는 방식임)
$('.userinput').keyup(function(){
< IdForm.jsp 전체 소스 코드 >
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 아이디 중복 검사 </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#id_check').click(function(){
// $('.userinput').keyup(function(){
$.ajax({
type: 'get',
url: './IdCheck.jsp',
data: { userid : $('.userinput').val() },
dataType: 'text',
success: function(data){
// alert(data);
// 넘어온 data값이 "YES"라면 "이미 사용중" 출력
// 그렇지 않다면 "사용 가능" 출력
if(data.trim() == 'YES'){
$('#idmessage').text('이미 사용중');
$('#idmessage').slideDown();
}else{
$('#idmessage').text('사용 가능');
$('#idmessage').slideDown();
}
}
});
});
})
</script>
</head>
<body>
<input name="id" type="text" class="userinput" size="15" />
<button type="button" id="id_check">중복체크</button><br/><br/>
<div id="idmessage" style="display:none;"></div>
</body>
</html>< IdCheck.jsp 전체 소스 코드 >
<%@ page contentType="text/xml; charset=utf-8" %>
<%@ page language="java" import="java.sql.*"%>
<%
String driver="oracle.jdbc.driver.OracleDriver";
String user="scott";
String pass="tiger";
String dbURL="jdbc:oracle:thin:@192.168.0.17:1521:orcl";
Class.forName(driver);
Connection connection=DriverManager.getConnection(dbURL,user,pass);
String sql = "select * from emp where ename=upper('" + request.getParameter("userid")+"')";
System.out.println(sql);
Statement stmt = connection.createStatement();
ResultSet rs = stmt.executeQuery(sql);
String result="NO";
if (rs.next()){
result = "YES";
}
out.print(result);
%>
9. AJAX를 사용하여 버튼 클릭할 때마다 정보를 가져와서 화면 부분적으로 새로 그리기
<body>
<h1>선택</h1>
<button id="get_time">시간</button>
<button id="nate">네이트</button>
<button id="melon">멜론</button>
<button id="kma">날씨</button>
<div id="result"></div>
</body>
(1) "시간" 버튼이 눌렸을 때
$(function(){
$('#get_time').click(function(){
$.ajax({
url: './jsp/time.jsp',→ time.jsp라는 페이지를 요청함
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%= new java.util.Date() %>→ 자바의 Date() 클래스를 가져와서 출력
dataType: 'text',
success: function(data){
$('#result').html(data);→ 출력값은 text 타입이며 그 값을 id가 result인 태그 사이에 넣음
(결과)
(2) "멜론" 버튼이 눌렸을 때
$('#melon').click(function(){
$.ajax({
url: './jsp/proxy_melon.jsp',→ proxy_melon.jsp라는 페이지를 요청함
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix='c' uri="http://java.sun.com/jsp/jstl/core" %>
<c:import url="https://www.melon.com/"></c:import>
→ c라는 프리픽스로 시작하는 태그는 uri로부터 가져오는 태그라고 명시하는 것
→ jstl의 core Tag 중 c:import는 다른 서버 및 웹사이트의 컨텐츠를 액세스하게 함
( JSTL : JSP Standard Tag Library )
→ JSTL을 사용하기 위해 위의 경로에 .jar 파일을 넣어줘야 한다.
success: function(data){
alert(data);→ proxy_melon.jsp 페이지를 요청한 뒤 받아온 데이터를 alert로 확인해 볼 수 있다.
확인 결과, data에 들어있는 값은 멜론 홈페이지의 모든 HTML임
var songchart = $('.typeRealtime > ul > li', data);→ 멜론 홈페이지의 개발자모드(F12)에서 가져오고자 하는 실시간 차트의 선택자를 찾아 songchart라는 변수에 담는다.
songchart.each(function(){
var title = $('.song', this).text();
var singer = $('.artist > .ellipsis > a', this).text();
var img = $('.thumb img', this);
$('#result').append('<div class="list">' + title + "-->" + singer + "</div>");
$('#result').append( img );
});→ songchart에 담긴 li가 여러 개이므로 각각을 명확히 하기 위해 each() 함수 사용
(결과)
(3) "네이트" 버튼이 눌렸을 때
$('#nate').click(function(){
$.ajax({
url: './jsp/proxy_nate.jsp',
success: function(data){
$('#result').empty();
var livechart = $('#pannList1 li', data);
livechart.each(function(){
var rank = $('.num_rank', this).text();
var keyword = $('a', this).text();
$('#result').append('<div class="list">' + rank + "-->" + keyword + "</div");
console.log(rank);
});
}
});
});
(결과)
< test.html 전체 소스 코드 >
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.list { color : #F18372; }
</style>
<script type="text/javascript" src="./js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
// 1. '시간' 버튼이 눌렸을 때
$('#get_time').click(function(){
$.ajax({
url: './jsp/time.jsp',
dataType: 'text',
success: function(data){
$('#result').html(data);
}
})
});
// 2. 멜론 버튼이 눌렸을 때
$('#melon').click(function(){
$.ajax({
url: './jsp/proxy_melon.jsp',
success: function(data){
// data 안에 멜론 사이트의 모든 html이 들어있어 alert로 확인해볼 수 있음
// alert(data);
// 클릭할 때마다 화면을 지우고 새로 그리게 함
$('#result').empty();
var songchart = $('.typeRealtime > ul > li', data);
// songchart에 담긴 li가 여러개라서 각각을 명확히 하기 위해 each 함수 사용
songchart.each(function(){
var title = $('.song', this).text();
var singer = $('.artist > .ellipsis > a', this).text();
var img = $('.thumb img', this);
$('#result').append('<div class="list">' + title + "-->" + singer + "</div>");
$('#result').append( img );
});
}
})
});
// 3. 네이트 버튼이 눌렸을 때
$('#nate').click(function(){
$.ajax({
url: './jsp/proxy_nate.jsp',
success: function(data){
$('#result').empty();
var livechart = $('#pannList1 li', data);
livechart.each(function(){
var rank = $('.num_rank', this).text();
var keyword = $('a', this).text();
$('#result').append('<div class="list">' + rank + "-->" + keyword + "</div");
console.log(rank);
});
}
});
});
})
</script>
</head>
<body>
<h1>선택</h1>
<button id="get_time">시간</button>
<button id="nate">네이트</button>
<button id="melon">멜론</button>
<button id="kma">날씨</button>
<div id="result"></div>
</body>
</html>< time.jsp 전체 소스 코드 >
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%= new java.util.Date() %>< proxy_melon.jsp 전체 소스 코드 >
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix='c' uri="http://java.sun.com/jsp/jstl/core" %>
<c:import url="https://www.melon.com/"></c:import>
< proxy_nate.jsp 전체 소스 코드 >
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- "http://java.sun.com/jsp/jstl/core"를 c라고 부르겠다는 의미-->
<%@ taglib prefix='c' uri="http://java.sun.com/jsp/jstl/core" %>
<!-- 네이트 주소를 가져옴 -->
<c:import url="https://www.nate.com/"></c:import>