jsp_Ajax
Ajax란?
Asynchronous javascript And XML 의 약자로서 비동기적 통신이다.
빠르게 동작하는 웹페이지를 만들기 위한 개발 기법으로 웹 페이지 전체를 다시 로딩하지않고도 웹 페이지의 일부분만 갱신할 수 있고 백그라운드 영역에서 서버와 통신하여 그 결과를 웹 페이지의 일부분에만 표시할 수 있다. 이 때 서버와 데이터를 주고받을 수 있는데 데표적인 데이터는 JSON, XML, HTML, TEXT 파일 등이 있다.
A.jax에서 서버의 DB로 가서 결과값을 리턴해줄 때 화면 깜빡임 없이 백단에서 데이터를 비동기적으로 전송하는 방법을 말하는데 예전에는 XML문서를 사용하였다. 그러나 태그식으로 데이터를 사용하는 XML이 너무 무거워 요즘은 JSON방식을 아주 많이 사용한다.
JSON방식이란?
javascript에서 객체를 만들 때 사용하는 표현식을 의미하며 사람과 기계 모두 이해하기 쉽고 용량이 작아 최근 XML을 대체하여 데이터 전송에 많이 사용되는 방식이다.
경량화된 데이터 교환형식으로, 서로 다른 언어들 간 데이터를 주고받을 수 잇도록 만들어진 텍스트 기반의 형식이다. 여기서 주의할 점은 JSON은 데이터 포맷일 뿐이며 어떠한 통신방법도 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐이다.
네이버에서 Network의 Fetch/XMR의 JSON을 더블클릭하면 targetAndPaneljs.json 형식의 파일이 존재하며
이를 클릭하면
이러한 창이 출력된다.
창에서 보는 것과 같이 JSON형식은 javascript처럼 key와 value형식이 존재한다.
여기서 key는 파란박스 id, key, targetMap이다.
특히 targetMap안의 value값들은 모두 object형식으로서 배열로 값이 들어가있는 것을 확인할 수 있다.
비동기 방식이란?
웹 페이지를 리로드하지않고 데이터를 불러오는 방식이며, ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포하고 있다.
동기방식은 회원가입을 해야만 로그인을 할 수 있는 것 처럼 첫번째 업무를 끝내야지만 두번째 업무를 할 수있는 업무방식을 뜻하며 비동기방식은 회원가입일 경우 로그인을 할 때 아이디 중복체크 기능이 실행되는 것 처럼 하나의 업무가 진행되고 있을 때 해당 업무에서 가지를 뻗어나가며 업무를 진행하는 방법이 비동기방식이다. 즉, Ajax는 비동기 방식을 지원해주는 통신 수단이다.
Ajax의 장점
웹 페이지 전체를 다시 로딩하지 않고도 웹 페이지 일부분만 갱신할 수 있다.
웹 페이지가 로드된 후에 서버로 데이터 요청을 보내거나 받을 수 있다.
다양한 UI(동적페이지) 구현이 가능해진다.
Ajax의 단점
페이지의 이동이 없기 때문에 히스토리가 관리가 안된다.
반복적인 데이터 요청이 있으면 느려진다.
Ajax의 활용- 서버에 요청하기(request)
- XMLHttpRequest 객체
Ajax의 핵심적인 구성 요소이며 이 객체는 웹 브라우저가 서버와 데이터를 교환할 때 사용한다.
이 객체 안에는 웹 브라우저가 백그라운드에서 서버와 통신할 수 있게하는 많은 클래스와 메서드들이 작성이 되어있다. 우리는 이 객체를 생성함으로 인해 여러가지 메서드(ex.open())을 꺼내와서 사용을 할 수 있는 것이다.
- Open()메서드
XMLHttpRequest 객체에 정의되어있는 메서드로서 XMLHttpRequest의 객체를 생성함으로서 해당 메서드를 사용할 수 있다. 서버로 보낼 Ajax 요청의 형식을 설정한다.
open(전달방식,url주소,동 기여부); 형식으로 파라미터를 정의하며 전달방식은 get,post방식 중 하나를 선택하고 url주소는 요청을 처리할 서버의 파일 주소를 전달하며 동기여부는 요청을 동기식으로 전달할지 비동기식으로 전달할지 선택하는 것이다.(비동기: true/ 동기: false)
- send() 메서드
역시 XMLHttpRequest안에 내장되어있는 메서드이다. 작성된 Ajax 요청을 서버로 전달하는 역할을 한다.
서버로 부터 응답(response)
- readyState
XMLHttpRequest 객체의 현재 상태를 나타낸다
UNSET(숫자 0): XMLHttpRequest 객체가 생성됨
OPEND(숫자1): open() 메서드가 성공적으로 실행
HEADERS_RECEIVED(숫자2): 모든 요청에 대한 응답이 도착
LOADING(숫자3): 요청한 데이터를 처리 중
DONE(숫자4): 요청한 데이터의 처리가 완료되어 응답할 준비가 완료
- status
1XX: 조건부 응답
2XX: 성공
3XX: 리다이렉션 완료
4XX: 요청오류
5XX: 서버오류
- onreadystatechange
XTMHttpRequest 객체의 readyState값이 변할 때 마다 자동으로 호출되는 함수
실습
*ajax_test.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>Ajax 요청보내기 테스트</h3>
<input type="submit" value="Get방식으로 요청보내기" onclick="send1()" />
<input type="submit" value="post 방식으로 요청보내기" onclick="send2()" />
<p id="result"></p>
<script>
function send1(){
let xhr = new XMLHttpRequest();
xhr.open("GET","request_ajax.jsp?userid=apple&userpw=abcd1234",true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){
document.getElementById("result").innerHTML = xhr.responseText;
}
}
}
function send2(){
let xhr = new XMLHttpRequest();
xhr.open("post","request_ajax.jsp",true);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send("userid=javas&userpw=abcd1234");
xhr.onreadystatechange = function(){
if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){
document.getElementById("result").innerHTML = xhr.responseText;
}
}
}
</script>
</body>
</html>
|
cs |
*request_ajax.jsp
|
1
2
3
4
5
6
7
8
9
10
11
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String userid = request.getParameter("userid");
String userpw = request.getParameter("userpw");
out.print("아이디: " + userid + "비밀번호: " + userpw);
%>
|
cs |
point 1)
Ajax방식을 사용할 기본 골격이라고 생각한다.
XMLHttpRequest()의 객체를 생성하여 open(),send()를 가지고 오는 것을 기본으로 생각하며 POST방식이냐 GET방식이냐에 따라 디테일을 조금씩 다르게 코딩한다.
point2)
Get방식과 Post방식의 차이
- 빨간박스: 박스안에 Get과 Post방식인지를 기재해준다.
- 파란박스: Get방식은 url에 id와 pw값이 그대로 노출되지만 post방식은 감춰진다. 그래서 Get은 파란박스에 id와 pw값을 넣어주었고 Post방식은 생략해주었다.
- 분홍박스: HTTP요청 헤더값을 설정한다. 반드시 setRequestHeader( ) 를 open( )뒤에 호출하여야하며 또한, send( ) 가 호출되기 전에 호출해야만한다. XMLHttpRequest객체.setRequestHeader(헤더이름,헤더값); 으로 이해한다.
- 초록박스: Get방식은 open( ) 안에 헤더를 넣어주지만 Post는 헤더를 send( ) 에 넣어 보내준다.
Point3)
request_ajax.jsp를 보면 jsp파일인데도 불구하고
해당부분이 생략되어있고 java로만 이루어져있다.
이는 Ajax에서 데이터를 가지고오면 모든 데이터를 다 끌고오기때문인데 위의 코드를 삭제해주지않고 출력을 할 경우,
위의 사진처럼 모든 코드가 출력된다. 그렇기에 위의 코드를 모두 삭제하고 진행해야만한다.
Json형식 parse하여 사용방법
*data.json{ }
|
1
2
3
4
|
{
"result":"success",
"count":"42"
}
|
cs |
*json_test.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
let xhr = new XMLHttpRequest();
xhr.open("GET","data.json",true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){
/* alert(xhr.responseText); */
let obj = JSON.parse(xhr.responseText);
alert(obj.result);
alert(obj.count);
}
}
</script>
</body>
</html>
|
cs |
17~29행의 코드를 삭제하고 주석처리된 16행 alert창만 띄운다면
위의 사진처럼 JSON은 모든 데이터를 가지고 온다.
이때 우린 result의 success라는 key값만 가지고오고싶을 수 있고, count의 42값만 가지고 오고싶을 수 있다.
이 때 사용하는 것이 JSON.parse라는 메서드이다.
해당 메서드는 JSON 문자열을 key와 value로 잘라내어 특정 문자만 가지고올 수 있다.
그렇게 위의 코드를 실행시키면
위 사진처럼 특정 값만 가지고 온다.
응용. 실시간 검색어 구현
*json_test2.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>Ajax를 이용한 실시간 순위 나타내기</h1>
<table border="1">
<tr>
<th>실시간 검색순위</th>
<th>키워드</th>
</tr>
<tr>
<td id="td1">순위</td>
<td id="td2">키워드</td>
</tr>
</table>
<script>
let word = new Array();
let obj = "";
let xhr = new XMLHttpRequest();
xhr.open("GET","data2.json",true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){
/* alert(JSON.parse(xhr.responseText)); */
obj = JSON.parse(xhr.responseText);
for(let i=0; i<obj.search_word.length; i++){
word[i] = obj.search_word[i].name;
}
}
}
let i = 0;
let interval = setInterval(function(){
i = i%obj.search_word.length;
document.getElementById("td1").innerHTML = i+1;
document.getElementById("td2").innerHTML = word[i];
i++;
},2000);
</script>
</body>
</html>
|
cs |
*data2.json
|
1
2
3
4
5
6
7
8
9
10
11
|
{
"search_word":[
{"rank" : "1", "name" : "코로나"},
{"rank" : "2", "name" : "비트코인"},
{"rank" : "3", "name" : "JSP"},
{"rank" : "4", "name" : "JAVA"},
{"rank" : "5", "name" : "웹개발"}
]
}
|
cs |
point1)
기존의 Get방식을 그대로 복사 붙혀넣기해왔다.
위의 코드가 Ajax를 사용하기위한 기본 골격임을 기억하고 Ajax를 사용하고싶다면 위 코드먼저 작성하자
point2)
35행부터 39행까지 주석처리하고 위 코드의 주석을 풀면 alert값으로 object Object값이 출력된다.
이를통해 우린 Objcet형식의 key와 value값을 받으며 이를 파싱하여 원하는 td 에 넣어주면 된다는 것을 확인할 수 있다.
point3)
우리는 우선 검색어를 배열에다가 담아올 것이다. for문 안에는 데이터를 담는 공간, for문 바깥에서는 실시간 검색어를 계속해서 돌려줄 공간으로 나뉘어야하기때문에 전역적으로 사용하기 위해 사용할 변수를 바깥에 선언해준다.
point4)
위의 for문 안은 데이터를 담아오는 역할을 하며 밑의 interval로 데이터를 돌려준다.
코드를 짤 때 한 function에 여러개의 기능을 넣으려하지말고 여러개의 메서드등을 만들어 기능을 쪼개어 코딩하는 것이 좋다.
point5)
obj에 parse의 기능을 넣었고 obj.search_word[i].name;을 통해서 파싱할 기준을 코딩해주었다 .
obj.search_word라는 배열의 각 방에는 "rank":1,"name":"코로나 같이 또다른 json들이 담겨있는데 각 방의 name키로 담겨있는 검색어를 꺼내어 word배열에 담아주겠다. 라는 의미를 가진 코드이다.
point6)
td1은 순위의 순번을 뜻하는 것으로 1,2,3,4..로 순차적으로 올라가기에 별다른 반복문을 실행하지않고 i+1 로 간단하게 구현해주었으며 word[i]를 넣고 반복문을 돌려줌으로서 name을 키값으로 가진 데이터가 순차적으로 나오게된다.
뒤의 2000을 입력함으로 2초마다 반복됨을 구체적으로 코딩해주었으며, 실시간 검색어는 가진 데이터의 끝까지 가면 다시 초기화되어 무제한으로 돌아가기에 i%obj.search_word.length;를 사용해줌으로서 마지막숫자 5가 되는 순간 다시 0이 될 수 있도록 코딩하였다 .