parisangsoo
Ajax,EL,Json 03/20 본문
1. Ajax(비동기 통신) : 자바스크립트를 이용한 백그라운드 통신기술 (하나의 웹페이지 안 에서 변경이 발생한 특정 영역에 대해서만 갱신이 가능
Ex) 1. ex01_gugudan.jsp
<!-- Ajax( Asynchronus Javascript & xml ) : 비동기통신
자바스크립트를 이용한 백그라운드 통신기술( 하나의 웹페이지 안에서 변경이 발생한 특정 영역에 대해서만 갱신이 가능하다 )-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- Ajax사용을 위해 미리 준비해둔 httpRequest.js를 참조 -->
<script src="js/httpRequest.js"></script>
<script>
function send(){
let dan = document.getElementById("dan").value;
//유효성 체크
//Ajax를 통해 dan을 파라미터로 전달
let url = "ex01_gugudan_ajax.jsp";
let param = "dan="+dan;
// 콜백메서드
sendRequest(url, param, resultFn, "GET");
}
//콜백 메서드( Ajax로 요청된 결과를 처리하기위한 메서드 )
function resultFn(){
//console.log( xhr.readyState + "/" + xhr.status );
//xhr.readyState
//-0 : 초기화 오류
//-1,2,3 : 현재 페이지 로드 중
//4 : 로드완료
//xhr.status
//200 : 이상없음
//404 : 경로없음, 500 : 서버에러
if( xhr.readyState == 4 && xhr.status == 200 ){
//결과를 가지고 돌아온 데이터를 읽어온다
let data = xhr.responseText;
//alert(data);
document.getElementById("disp").innerHTML = data;
}
}
</script>
</head>
<body>
단 : <input id="dan">
<input type="button" value="결과보기" onclick="send();">
<br>
<div id="disp"></div>
</body>
</html>2. ex01_gugudan.ajax.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//ex01_gugudan_ajax.jsp?dan=5
int dan = Integer.parseInt( request.getParameter("dan") );
String str = "";
for( int i = 1; i <= 9; i++ ){
str += String.format("%d x %d = %d<br>", dan, i, dan*i );
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%= str %>
</body>
</html>1. Json : 서로 다른 플랫폼에서 데이터를 교환하기위해 정의되어 있는 공통적(약속된) 표기법
1. ex02_json.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- JSON(Javascript Object Notation)표기법 :
서로 다른 플랫폼에서 데이터를 교환하기위해 정의되어 있는 공통적(약속된)인 표기법 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
//기본형태의 json구조
let p = { 'name':'홍길동', 'age':30, 'tel':'010-123-1234' };
document.write(p.name + " / " + p['age'] + " / " + p.tel);
document.write("<hr>");
//배열형태의 json구조
let p_arr = [ {'name':'hong', 'age':20 },
{'name':'kim', 'age':30 },
{'name':'park', 'age':40 } ];
document.write( p_arr[0].name + " / " + p_arr[0].age + "<br>");
document.write( p_arr[1].name + " / " + p_arr[1].age + "<br>");
document.write("<hr>");
let course = { 'name':'임베디드웹개발',
'start':'2023-01-01',
'end':'2023-06-01',
'sub':['java', 'web', 'jsp'],
'student':[ {'name':'hong', 'age':'20'},
{'name':'kim', 'age':24},
{'name':'park', 'age':30}]};
document.write( "과목명 : " + course.name + "<br>" );
document.write( "시작일 : " + course.start + "<br>" );
document.write( "종료일 : " + course.end + "<br>" );
document.write( "<hr>" );
for( let i = 0; i < course.sub.length; i++ ){
document.write( course.sub[i] + " / " );
}
document.write("<hr>");
for( let i = 0; i < course.student.length; i++ ){
document.write( course.student[i].name + " / " + course.student[i].age + "<br>" );
}
</script>
</head>
<body>
</body>
</html>1. EL : jsp에서 사용되는 표현식을 더 간결하게 사용할 수 있도록 해주는 표현형태
1.ex03_EL.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- EL표기법 : jsp에서 사용되는 표현식을 더 간결하게 사용할 수 있도록 해 주는 표현형태
EL(Expression Language) - EL로 값을 표현하려면 jsp의 관리하에 있는 4개의 영역에서만 사용을 할 수 있다
1) page영역 : 단 하나의 페이지(현재페이지)에서만 값을 저장하고 공유할 수 있다
2) request영역(가장 많이 쓰임) : 지역개념으로 페이지가 닫히면 영역도 종료가 된다.
최대 두 개의 페이지에서 값을 저장하거나 공유할 수 있다.
3) session영역 : 전역 개념으로 브라우저가 완전히 종료되기 전까지는 영역이 살아있다.
같은 웹 브라우저 내에서 요청되는 페이지들에게 값을 공유
4) application영역 : 한 프로젝트에서 요청되는 페이지들간 값의 공유
EL의 접근형식 : 달러표시{ 영역.변수 } -->
<%
String msg = "안녕";
//pageScope에 값을 저장
pageContext.setAttribute("msg", "page영역입니다");
//requestScope에 값을 저장
request.setAttribute("msg", "request영역입니다");
request.setAttribute("hi", "안녕하세요");
//sessionScope에 값을 저장
session.setAttribute("msg", "session 영역입니다");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
일반jsp 표현식 : <%= msg %> <br>
EL표현식(생략) : ${ msg }<br>
EL표현식(생략) : ${ hi }<br>
EL표현식(생략x) : ${ requestScope.msg }<br>
EL표현식(생략x) : ${ sessionScope.msg }<br>
EL표현식(파라미터) : ${ param.age }
<!-- 생략식을 사용했을 때 영역의 참조 순서
1.pageScope
2.requestScope
3.sessionScope
4.applicationScope -->
<hr>
EL표기법의 연산자<br>
\${ 1 + 1 }<br>
\${ 2 + 2 } = ${ 2 + 2 }<br>
${ 10 / 3 }<br>
${ 10 % 3 }
<hr>
비교연산자<br>
\${ 3 > 2 } = ${ 3 > 2 } or ${ 3 gt 2 }<br>
${ 3 < 2 } or ${ 3 lt 2 }<br>
${ 3 ge 2 } or ${ 3 >= 2 }<br>
${ 3 == 2 } or ${ 3 eq 2 }<br>
${ 3 != 2 } or ${ 3 ne 2 }<br>
<hr>
삼항연산자<br>
파라미터 값 : ${ param.msg == null ? '값 없음' : param.msg }<br>
파라미터 값 : ${ empty param.msg ? '값 없음' : param.msg }<br>
<hr>
논리연산자<br>
${ 10 gt 3 && 5 eq 5 }<br>
${ 10 gt 3 and 5 eq 5 }
</body>
</html>2.ex04_EL.jsp
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="vo.TestVO"%>
<%@page import="java.util.HashMap"%>
<%@page import="java.util.Map"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
Map<String, Object> map = new HashMap<>();
map.put("name", "홍길동");
map.put("age", 20);
map.put("tall", 167.2 );
request.setAttribute("myMap", map);
//request영역에 VO를 저장하고 출력해보자
TestVO vo1 = new TestVO();
vo1.setName("홍길동");
vo1.setAge(22);
TestVO vo2 = new TestVO();
vo2.setName("김길동");
vo2.setAge(26);
request.setAttribute("vo", vo1);
//ArryList에 담긴 vo들의 정보를 출력
List<TestVO> list = new ArrayList<>();
list.add(vo1);
list.add(vo2);
request.setAttribute("arr", list);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
이름 : ${ myMap.get("name") }<br>
나이 : ${ myMap['age'] }<br>
키 : ${ myMap.tall } -> 가장 많이 사용하는 방법
<hr>
이름 : ${ vo.name }<br>
나이 : ${ vo.age }
<hr>
${ arr[0].name } / ${ arr[0].age }<br>
${ arr[1].name } / ${ arr[1].age }
</body>
</html>'JSP' 카테고리의 다른 글
| 모델 2 회원정보 프로그램(JSP 03/21) (0) | 2023.03.21 |
|---|---|
| JSTL 03/21 (0) | 2023.03.21 |
| 03/17 JSP (베이커리 홈페이지) (0) | 2023.03.19 |
| 03/16 (친구관리 홈페이지) (0) | 2023.03.19 |
| JSP 03/16 (성적관리 홈페이지) (0) | 2023.03.19 |
Comments