기존 비동기처리는 이벤트를 기반으로 하는 XHR객체를 사용했으나 이후 http요청에 최적화된 api들이 생겨나기 시작
=> fetch(Promise), Axios(xhr, promise)
- 결과 반환 전까지의 3개 상태(이행/거부에 해당하는 두 개의 콜백함수를 인자로 받음) resolve : 해결, 이행, 완료시 결과를 표현하며 then()을 통해 처리결과를 전달받을 수 있음 reject : 거부, 실패시 결과를 표현하며 catch()로 에러정보를 받을 수 있음
- 사용 방법
Fetch(requestInfo(URL), requestInit(OPTION))
- 응답 객체 제공 메소드
형태
뜻
text()
응답을 텍스트로 변환
json()
응답을 JSON형태로 파싱
blob()
응답을 blob형태로 반환(멀티미디어 데이터를 다룰 때 사용)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input id="userId" value="b001">
<input type="password" id="userPw" value="1004">
<button>버튼</button>
<div></div>
<script>
document.querySelector('button').addEventListener('click', function(){
let userId = document.querySelector('#userId').value;
let userPw = document.querySelector('#userPw').value;
let opt = {
method: 'post',
body: new URLSearchParams("uId=" + userId + "&uPw=" + userPw)
};
let rst = fetch("loadTest.jsp", opt);
// console.log(rst);
rst.then( rst => rst.json() ) // json정보를 파싱처리
.then( data => data.rst ) // 파싱처리된 결과 (=객체로 변환된) 결과를 매개변수가 받음
// .then( data1 => console.log("1회 출력된 정보는 더이상 출력되지 않음", data1))
.then( data2 => {
if(data2 == "ok") document.querySelector('div')
.innerHTML = "<mark>로그인 " + data2 + "</mark>";
else document.querySelector('div').innerText = "회원정보가 맞지 않음";
})
.catch(err => console.log("에러>> ", err))
.finally(alert("성공/실패 상관없이 무조건 뜸"));
});
</script>
</body>
</html>
: 서버와 통신하여 데이터를 가져오는 메소드로 ajax()보다 간소화된 비동기 호출 메소드 불필요한 리소스를 줄이고 코드를 간결하게 함
ex) $(selector).load(url, data, callback)
+JDBC로 DB정보 얻기
1. 연결할 DB가 설치되어야 함 2. 자바와 DB를 연결하기 위한 라이브러리 필요 ojdbc.jar 3. Class.forName("JDBC Driver명")을 이용해 드라이버 로딩 4. DriverManager를 통해 Connection객체 생성 5. SQL구문 실행을 위한 Statement객체 생성
- 사용 방법
$(selector).load(URL, data, callback);
load.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div {
border: 1px solid;
width: 50%;
height: 10vh;
}
</style>
</head>
<body>
<input id="userId">
<input type="password" id="userPw">
<button>버튼</button>
<div id="d1"></div>
<div id="d2"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$('button').on('click', function() {
/*
load() : 서버로부터 응답받은 데이터를 선택한 html요소 콘텐츠로 대체
서버와 통신하여 데이터를 가져오는 메소드로 ajax()보다 간소화된 비동기 호출 메소드
불필요한 리소스를 줄이고 코드를 간결하게 함
$(selector).load(url, data, callback)
*/
let $uId = $('#userId').val();
let $uPw = $('#userPw').val();
$('#d1').load('loadTest.jsp', {uId:$uId, uPw:$uPw}, f_cb);
});
// a - 성공시 결과 전달, b - 호출상태문자(statusText), c - xhr객체(로 속성접근가능)
function f_cb(a,b,c) {
// alert( JSON.parse(a).rst ); // ok 또는 false
let data = JSON.parse(a).rst;
if(data == "ok") {
$('#d2').text("회원 정보로 로그인 " + data).css('color', 'green');
} else {
$('#d2').text("회원 정보로 로그인 " + data).css('color', 'red');
}
alert(b); // success
alert(c.statusText); // success
}
</script>
</body>
</html>
loadTest.jsp
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.DriverManager"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String uId = request.getParameter("uId");
String uPw = request.getParameter("uPw");
System.out.println("이클립스 콘솔상에서 확인해주세요. >> " + uId);
Class.forName("oracle.jdbc.driver.OracleDriver");
String url = "jdbc:oracle:thin:@localhost:1521:xe";
Connection conn = DriverManager.getConnection(url, "pc10", "java");
Statement stmt = conn.createStatement();
String sql = "select mem_id from member "
+ "where mem_id = '" + uId
+ "' and mem_pass = '" + uPw + "'";
ResultSet rs = stmt.executeQuery(sql);
if(rs.next()) {
// 정보 있는 응답 데이터 생성
%>
{"rst" : "ok"}
<%
} else {
// 정보 있는 응답 데이터 생성
%>
{"rst" : "fail"}
<%
} // if end
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input value="저스티스타이탄">
<input type="button" value="post">
<div></div>
<script>
"use strict";
let v_btns = document.querySelectorAll('[type=button]');
let v_disp = document.querySelector('div');
// post
v_btns[0].onclick = function(){
let data = document.querySelector('input').value;
let ajax = new XMLHttpRequest();
ajax.open('post', 'test.jsp');
ajax.addEventListener('readystatechange', function(){
if(this.readyState == 4 && this.status == 200) {
console.log("post response : ", this.responseText);
}
});
ajax.setRequestHeader('content-type','application/x-www-form-urlencoded;');
// 데이터 '전달하는' 위치에서 인코딩 처리 >> 받는 곳에서 인코딩 처리 하지 않아도 됨
// ajax.setRequestHeader('content-type','application/x-www-form-urlencoded;charset=utf-8;');
ajax.send("imkey=" + data); // urlencoded형식(key=value)으로
};
</script>
</body>
</html>
test.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8"); // post로 데이터를 '전달받는' 위치에서 인코딩 처리하기
// post의 경우 get과 달리 인코딩 처리를 하지 않아 한글이 깨짐 > 인코딩 처리해줘야 함
String data = request.getParameter("imkey"); // post key
%>
<h4 style='color: red;'>응답 데이터: <%= data%></h4>
결과 화면2
서블릿 이용한 예제
ajax.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input value="저스티스타이탄">
<input type="button" value="get">
<input type="button" value="post">
<div></div>
<script>
"use strict";
let v_btns = document.querySelectorAll('[type=button]');
let v_disp = document.querySelector('div');
v_btns[0].addEventListener('click', function() {
let textVal = document.querySelector('input').value;
// 1. XMLHttpRequest()객체 생성
let req = new XMLHttpRequest();
// 2. open(설정) - url test.jsp
// content-root유무에 따라 접근 경로 path를 다르게 작성해야 함 - [(context-root)/urlPatten]
req.open('get', '/webPro/Ajax?senData='+textVal);
// 4. onreadystatechange - readyState, status - responseText
req.onreadystatechange = function(){
if(req.readyState == 4 && req.status == 200) {
console.log("응답 확인 >> ", req.responseText);
v_disp.innerHTML = req.responseText;
}
}
// 3. send()
req.send();
});
// post
v_btns[1].onclick = function(){
let data = document.querySelector('input').value;
let ajax = new XMLHttpRequest();
ajax.open('post', 'test.jsp');
ajax.addEventListener('readystatechange', function(){
if(this.readyState == 4 && this.status == 200) {
console.log("post response : ", this.responseText);
v_disp.innerHTML = req.responseText.replace('\n','<br>');
}
});
ajax.setRequestHeader('content-type','application/x-www-form-urlencoded;');
ajax.send("imkey=" + data);
};
</script>
</body>
</html>
