JSP10 minutes read (About 1470 words)  0 visits

Ajax : xml처리, json처리

Ajax 요청에 따른 응답

  • 처리할 수 있는 데이터 형태 : XML, HTML, TXT, JSON

    HTML : 웹페이지 일부를 업데이트

  • 특징
    • 응답처리가 간결.
    • 브라우저별로 별도의 처리가 필요없음 (바로 사용가능).
  • 한계
    • 서버가 사용가능한 페이지를 리턴해야만 함. = 데이터 이식성이 좋지 않음.
    • 요청이 반드시 같은 도메인으로 처리되어야 함.

XML : HTML과 유사하게 사용하지만 태그의 이름이 다르다.

  • 특징
    • 태그의 데이터를 지정해서 사용가능 => 거의 모든 플랫폼에서 사용.
    • 다양한 데이터타입의 구조를 표현가능
    • HTML태그와 유사하게 처리 가능.
  • 한계
    • 데이터 처리시 많은 리소스가 필요하기때문에 많은 양의 코드가 필요함.
    • 요청이 반드시 같은 도메인으로 처리되어야 함.

JSON : js객체표현식(=JavaSscript Object Natation)

  • 특징
    • html/xml보다 간결한 데이터처리 가능 (이름 : 값-쌍)
    • 위의 한계였던 다른 도메인 요청에서도 사용가능.
  • 한계
    • 문법이 예민함 > 콤마, 따옴표, 콜론 등등 문법처리 중요 > 잘못하면 파일 전체 사용불가
    • 악의적인 목적의 객체를 사용가능 > 신뢰된 페이지에서만 사용가능하게 처리해야 함.

Ajax xml처리

xml.jsp 파일생성

  1. contentType=”text/xml”로 설정하기
  2. 임의의 xml데이터작성하기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- 임의로 xml데이터 만들어보기  -->
<people>
	<person>
		<name>유저1</name>
		<gender>여</gender>
		<hobby>독서</hobby>
	</person>
	<person>
		<name>유저2</name>
		<gender>여</gender>
		<hobby>여행</hobby>
	</person>
	<person>
		<name>유저3</name>
		<gender>여</gender>
		<hobby>운전</hobby>
	</person>
</people>

xml.html 파일생성

xml.jsp파일을 xml데이터를 볼러와서 xml.html에서 출력하기.

  1. 제이쿼리 준비
  2. ajax사용
  3. 출력값이 object이므로 접근을 each로 해야함
    • object와 배열은 주로 each로 접근한다.
  4. body에 출력
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
<script src="../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" >
$(function(){
	//xml.jsp페이지에서 xml데이터를 읽어와서 출력하기
	
	//비동기방식
   $.ajax({
	   url:"xml.jsp",
	   success: function(data){
		   //1. alert창으로 잘 처리되는지 확인
		   //alert('xml데이터를 읽어오기 성공');
		   //alert(data); //출력값 [object XMLDocument]
		   
		   //2. data안에서 person태그를 찾아서 그안의 데이터 출력 > object라서 접근을 each로 해야함
		   let tmp = $(data).find('person');
		   //alert(tmp) //출력값 [object Object]
		   
		   //2-1. each로 반복문을 돌린 후 body에 출력
		   //people에 접근할 필요없이 원하는 태그인 person에 바로 접근 가능
		   $(data).find('person').each(function(){
			   let name = $(this).find('name').text();
			   let gender = $(this).find('gender').text();
			   let hobby = $(this).find('hobby').text();
			   
			   //3. body에 출력시키기
			   $('body').append(name+"/"+gender+"/"+hobby+"<br>");
			   
		   });
	   },
	   error:function(){
		   alert('xml데이터를 읽어오기 실패');
	   }   
   });
});
</script>

Ajax json처리

  • 항상 속성(key)-값(value)쌍으로 구성.
  • 속성구분시 콤마(,)로 구분함.
  • {} = json객체를 의미
  • [] = json배열을 의미
  • 우리가 사용하는 거의 모든 브라우저에는 json타입을 처리하는 json파서가 포함되어있다. 그래서 브라우저에서 파일이 자동으로 열림

지원하는 자료형

  • 정수형(10진수) (2,816진수X)
  • 실수형(고정 소수점 , 부동 소수점)
    • 고정소수점 : 1.123
    • 부동소수점 : 1e4, 2.4E-5
  • boolean형
  • Null
  • 문자형(문자열) ex “”
    • 이스케이프문법지원(ex \n, \t)
  • 배열 : 타입에 상관업싱 모두 저장 가능
    • 배열안에 객체 저장 가능, 배열안에 배열저장 가능
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      [
      	{
      	   "name":"지영",
      	   "age":77,
      	   ["abc",123,321]
      	},
      	{
      	   "name":"영희",
      	   "age":88
      	}
      ]

Json1.jsp생성 + Json1.html생성 : Ajax사용

  1. contentType=”application/json; charset=UTF-8” 로 마임타입(MIME타입) 바꾸기
  2. 임의의 json데이터 입력
1
2
3
4
5
6
7
<%@ page language="java" contentType="application/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
    {
     "name":"하지",
     "gender":"여",
     "hobby":"게임"
    },
  1. Json1.html생성 : Ajax사용
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
<script src="../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" >
$(function(){
	//json데이터 가져와서 html 문서에 출력하기
	
	$.ajax({
		//1. dataType:json으로 작성
		url: "Json1.jsp",
		dataType: "json",
		success: function(data){
			//2. 출력잘되는 지 확인
			//alert(data);//출력값 [object Object]
			
			//3. each로 접근해서 body에 출력.
			$.each(data, function(item, data){
				alert(item+"/"+data);
				$('body').append(item+"/"+data+"<br>")
			});
		},error: function(){
			alert("json데이터가져오기 실패");
			
		}
	});
});
</script>

Json1.jsp생성 +Json1_1.html생성 : getJSON사용

  1. contentType=”application/json; charset=UTF-8” 로 마임타입(MIME타입) 바꾸기
  2. 임의의 json데이터 입력
1
2
3
4
5
6
7
<%@ page language="java" contentType="application/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
    {
     "name":"하지",
     "gender":"여",
     "hobby":"게임"
    },
  1. Json1.html생성 : getJSON사용
1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" >
$(function(){
	//json데이터 ajax가 아닌 getJson으로 가져와서 html 문서에 출력하기
	$.getJSON('Json1.jsp', function(data){
		//해당 json파일을 읽어서 가져오기
		$.each(data, function(item, data){
			$('body').append(item+"/"+data+"<br>")
		})
	});

});
</script>

Json2.json생성 +Json2.html생성 : 배열데이터를 getJSON사용

  • json데이터가 한개가 아니라 여러개일때 즉 json데이터가 배열일때 body에 출력하는 예시이다.
  • 가장 많이 사용한다.
  1. Json2.json생성
  2. 임의의 json데이터 입력
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[
	{
		"name":"하지",
		"age":77,
		"addr":"일산"
	},
	{
		"name":"메지",
		"age":66,
		"addr":"대구"
	},
	{
		"name":"한사장",
		"age":55,
		"addr":"부천"
	}
]
  1. Json2.html생성
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
<script src="../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" >
$(function(){
	$.getJSON('Json2.json', function(data){
		//첫번째, data에 JSON데이터를 배열형태로 파라미터로 가지고 오기
		$.each(data, function(index, item){
			$('body').append("사용자"+(index+1)+" : "+item.name+" / "+item.age+" / "+item.addr+"<br>")
		})
		
		//두번째, json배열데이터를 html테이블에 데이터 넣기
		$.each(data, function(index, item){
			$('table').append("<tr><td>"+item.name+"</td>"+"<td>"+item.age+"</td>"+"<td>"+item.addr+"</td></tr>")
		})
		
	})
})
</script>
</head>
<body>
<table border="1" style="text-align:center">
	<tr>
		<th> 이름 </th>
		<th> 나이 </th>
		<th> 주소 </th>
	</tr>
</table>

//첫번째 출력값
사용자1 : 하지 / 77 / 일산
사용자2 : 메지 / 66 / 대구
사용자3 : 한사장 / 55 / 부천

//두번째 출력값
이름	나이	주소
하지	77	일산
메지	66	대구
한사장	55	부천
#

Comments

Follow

Categories

Recent

Archives

Tags

APK1
Backjoon12
Book1
BookReview1
C#3
CORS1
CSRF1
ChatGPT1
Codeup10017
DBeaver1
DB설계1
DataStructure5
Discord1
Docker2
EL2
Eclipse10
Facebook1
GIT31
GeekNews1
Gson4
HTML&CSS30
Hackerrank10
Hexo5
HttpEntity1
ITWILL(JAVA)263
IntelliJ1
JAVA1
JSON2
JSTL4
JavaScript1
Journal22
Leetcode6
List11
Lombok1
MSA1
MariaDB9
Moment.js3
MyBatis6
MySQL11
NoSQL1
Node.js3
Oracle48
Port2
Programmers2
RESTfulAPI3
Redis1
RestTemplate2
Review20
SQLD2
SQL퀴즈2
STS7
SVN4
SpringBoot6
TIL359
Tomcat4
VanillaJS2
VueJS2
WEB2
Web Development1
Web Game9
Websocket3
YouTube1
ajax1
jQuery13
java.util.Calendar1
xAPI1
구글애드센스1
디자인패턴4
생활코딩5
설치1
오늘또못알아듣고말았습니다14
오류일지18
정규표현식3
차이17
패스트캠퍼스(초격차Java/Spring)12
패스트캠퍼스(파이썬웹개발)37
회고록10

Advertisement

×