서버로부터 응답(response) 확인
Ajax에서 서버로부터의 응답을 확인하기 위해 사용하는 XMLHttpRequest 객체의 프로퍼티는 다음과 같다.
- readyState 프로퍼티
- status 프로퍼티
1. readyState 프로퍼티
XMLHttpReqeust 객체의 현재 상태를 나타낸다. 이 프로퍼티의 값은 현재 상태에 따라 다음과 같은 주기로 변화한다.
| 값 | 의미 | 설명 |
| 0 | UNINITIALIZED | XMLHttpRequest 객체만 생성되고 초기화되지 않은 상태 (open 메서드가 호출되지 않음) |
| 1 | LOADING | open 메서드가 호출되었지만 아직 send 메서드는 불리지 않은 상태 |
| 2 | LOADED | send 메서드가 불렸지만 status와 헤더는 도착하지 않은 상태 |
| 3 | INTERACTIVE | 요청한 데이터를 처리 중인 상태 |
| 4 | COMPLETED | 요청한 데이터에 대한 처리가 완료된 상태 |
2. status 프로퍼티
서버의 문서 상태를 나타낸다.
| 값 | 의미 | 설명 |
| 200 | OK | 요청 성공 |
| 403 | Forbidden | 접근 거부 |
| 404 | Not Found | 페이지 없음 |
| 500 | Internal Server Error | 서버 오류 발생 |
Ajax로 응답데이터 받기
- HTML 형식: responseText
- XML 형식: responseXML
- JSON 형식: responseText로 받은 뒤 JSON.parse() 함수를 이용해서 문자열을 JSON 객체로 변환
1) HTML 형식의 파일 받기
[HTML 형식의 파일: pizzaResult.jsp]
|
1
2
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
100#홍길동#서울 마포구 동교동#3333-3333
|
cs |
|
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
|
let req = false;
const init = function(){
try{
req = new XMLHttpRequest();
console.log('req: ' + req);
}catch(e){
alert('req생성 실패');
}
}
const getUserInfo = function(){
//1. 사용자가 입력한 연락처 정보를 알아내자
let tel = $('#phone').val(); //document.getElementById('phone').value
//2. Ajax로 요청을 보내보자
//[1] 요청을 준비하는 단계
let url = "pizzaResult.jsp?phone=" + tel; //text data를 생성
req.open('GET', url, true); //true==>비동기방식으로 요청을 보낸다(디폴트)
//[2] 요청을 보내기 전에 onreadystatechange 속성값에 콜백함수 지정 (상태값이 바뀔 때 함수를 호출)
req.onreadystatechange = updatePage;
//[3] 요청을 전송하는 단계 => XMLHttpRequest의 send(파라미터데이터들)
req.send(null); //get은 body가 비어서 가기 때문에 null을 전달해야 함
}
//1. text(HTML)로 받을 경우
const updatePage = function(){
//readyState: 2, 3, 4가 뜸
if(req.readyState==4 && req.status==200){ //데이터 수신이 완료되면 4를 반환
let res = req.responseText;
//alert(res);
//'#' 구분자를 기준으로 쪼개어 배열에 저장
let tokens = res.split('#');
//tokens[0]: 회원번호 tokens[1]: 이름 ...
let str = "<h3>회원 이름: " + tokens[1] + "</h3>";
let str2 = `
<h3>회원 주소: \${tokens[2]}</h3>
<h3>회원 연락처: \${tokens[3]}</h3>
`;
$('#userInfo').html(str); //id가 userInfo인 <div>에 출력
$('#address').html(str2); //id가 address인 <div>에 출력
}
}
window.onload = init; //준비되면 init함수를 실행시켜라 |
2) XML 형식의 파일 받기
[Oracle DB SQL: pizza_user 테이블 생성]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
drop table pizza_user;
create table pizza_user(
num number(8) primary key,
name varchar2(30),
phone varchar2(15) not null,
addr varchar2(100) not null
);
drop sequence pizza_seq;
create sequence pizza_seq
start with 1
increment by 1
nocache;
insert into pizza_user(num, name, phone, addr)
values(pizza_seq.nextval, '이영철', '1111-1111', '서울 마포구 합정동 1번지');
insert into pizza_user(num, name, phone, addr)
values(pizza_seq.nextval, '콩진호', '2222-2222', '서울 마포구 서교동 2번지');
commit;
|
cs |
[XML 형식의 파일: pizzaResultXml.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
|
<%@ page language="java" contentType="text/xml; charset=UTF-8"
pageEncoding="UTF-8" import="java.sql.*" %>
<%
String phone = request.getParameter("phone");
Class.forName("oracle.jdbc.driver.OracleDriver");
String url = "jdbc:oracle:thin:@localhost:1521/XE";
String user = "multishop", pwd = "tiger";
Connection con = DriverManager.getConnection(url, user, pwd);
String sql = "select * from pizza_user where phone=?";
PreparedStatement ps = con.prepareStatement(sql);
ps.setString(1, phone);
ResultSet rs = ps.executeQuery();
String num = "0", name = "", addr = "", tel="";
while(rs.next()){
num = rs.getString("num");
name = rs.getString("name");
addr = rs.getString("addr");
tel = rs.getString("phone");
}
rs.close();
ps.close();
con.close();
%>
<user>
<num><%=num%></num>
<name><%=name%></name>
<addr><%=addr%></addr>
<phone type="cell"><%=phone%></phone>
</user>
|
cs |
|
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
|
let req = false;
const init = function(){
try{
req = new XMLHttpRequest();
console.log('req: ' + req);
}catch(e){
alert('req생성 실패');
}
}
const getUserInfo = function(){
//1. 사용자가 입력한 연락처 정보를 알아내자
let tel = $('#phone').val(); //document.getElementById('phone').value
//2. Ajax로 요청을 보내보자
//[1] 요청을 준비하는 단계 => XMLHttpRequest의 open(요청방식, url, [비동기여부(true/false)])
let url = "pizzaResultXml.jsp?phone=" + tel;//xml data를 생성
req.open('GET', url, true); //true==>비동기방식으로 요청을 보낸다(디폴트)
//[2] 요청을 보내기 전에 onreadystatechange 속성값에 콜백함수 지정 (상태값이 바뀔 때 함수를 호출)
req.onreadystatechange = updatePage;
//[3] 요청을 전송하는 단계 => XMLHttpRequest의 send(파라미터데이터들)
req.send(null); //get은 body가 비어서 가기 때문에 null을 전달해야 함
}
//2. xml로 받을 경우
const updatePage = function(){
if(req.readyState==4 && req.status==200){
let res = req.responseXML;
//xml로 받을 경우 ==> XMLDocument객체로 응답옴 ==> 이 문서를 파싱하여 필요한 데이터 추출 ==> jquery의 find()함수 사용
//alert(res);
let num = $(res).find('num').text();
if(parseInt(num)==0){//비회원일 경우
$('#nonUser').show(1000); //보여주기(1000초)
$('#userInfo').html("").hide(1000);//감추기(1000초)
$('#addr').focus();
}else{//회원일 경우
let name = $(res).find('name').text();
let addr = $(res).find('addr').text();
let phone = $(res).find('phone').text();
//phone태그의 type 속성 추출(정적인 속성: attr() / 기능적인 속성: prop())
let phoneType = $(res).find('phone').attr('type');
let str = `
<h3>회원 번호: \${num}</h3>
<h3>회원 이름: \${name}</h3>
<h3>회원 주소: \${addr}</h3>
<h3>회원 연락처[\${phoneType}]: \${phone}</h3>
`;
$('#userInfo').html(str).show(1000);
$('#nonUser').hide();
$('#addr').val("");
}
}
}
window.onload = init; //준비되면 init함수를 실행시켜라 |
cs |
3) JSON 형식의 파일 받기
[JSON 형식의 파일: pizzaResultJson.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
|
<%@ page language="java" contentType="application/json; charset=UTF-8"
pageEncoding="UTF-8" import="java.sql.*" %>
<%
String phone = request.getParameter("phone");
Class.forName("oracle.jdbc.driver.OracleDriver");
String url = "jdbc:oracle:thin:@localhost:1521/XE";
String user = "multishop", pwd = "tiger";
Connection con = DriverManager.getConnection(url, user, pwd);
String sql = "select * from pizza_user where phone=?";
PreparedStatement ps = con.prepareStatement(sql);
ps.setString(1, phone);
ResultSet rs = ps.executeQuery();
String num = "0", name = "", addr = "", tel="";
while(rs.next()){
num = rs.getString("num");
name = rs.getString("name");
addr = rs.getString("addr");
tel = rs.getString("phone");
}
rs.close();
ps.close();
con.close();
/*JSON (JavaScript Object Notation)
객체: {속성명:값, 속성명2:값2}
배열: [1, 2, 3, 4], [{}, {}, {}, {}](객체)
contentType을 application/json으로 설정해야 함에 유의!
*/
%>
{
"num":"<%=num%>",
"name":"<%=name%>",
"addr":"<%=addr%>",
"phone":"<%=tel%>"
}
|
cs |
|
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
60
61
62
63
64
65
66
67
68
|
let req = false;
const init = function(){
try{
req = new XMLHttpRequest();
console.log('req: ' + req);
}catch(e){
alert('req생성 실패');
}
}
const getUserInfo=function(){
//1. 사용자가 입력한 연락처 정보를 알아내자
let tel = $('#phone').val(); //document.getElementById('phone').value
//2. Ajax로 요청을 보내보자 //[1] 요청을 준비하는 단계 => XMLHttpRequest의 open(요청방식, url, [비동기여부(true/false)])
let url = "pizzaResultJson.jsp?phone=" + tel; //JSON data를 생성
req.open('GET', url, true); //true==>비동기방식으로 요청을 보낸다(디폴트)
//[2] 요청을 보내기 전에 onreadystatechange 속성값에 콜백함수 지정 (상태값이 바뀔 때 함수를 호출)
req.onreadystatechange = updatePage;
//[3] 요청을 전송하는 단계 => XMLHttpRequest의 send(파라미터데이터들)
req.send(null);
//get은 body가 비어서 가기 때문에 null을 전달해야 함
}
//3. json으로 받을 경우
const updatePage = function(){
if(req.readyState==4 && req.status==200){
let res = req.responseText;
//alert(res+", typeof res: " + typeof(res)); //string
//[1] JSON.parse(문자열) => 문자열을 json객체로 변환함
//[2] JSON.stringify(json객체) => json객체를 문자열로 변환함
let obj = JSON.parse(res);
//alert(obj+", typeof(obj): " + typeof(obj)); //[object Object], typeof(obj): object
let num = obj.num;
let name = obj.name;
let phone = obj.phone;
let addr = obj.addr;
if(parseInt(num)==0){
$('#nonUser').show(1000); //보여주기(1000초)
$('#userInfo').html("").hide(1000);//감추기(1000초)
$('#addr').focus();
}else{
let str = `
<div class="alert alert-danger my-3">
<h3>회원 번호: \${num}</h3>
<h3>회원 이름: \${name}</h3>
<h3>회원 주소: \${addr}</h3>
<h3>회원 연락처: \${phone}</h3>
</div>
`;
$('#nonUser').hide();
$('#userInfo').html(str).show(1000);
$('#addr').val("");
}
}
}
window.onload = init; //$(function(){})
//준비되면 init함수를 실행시켜라
|
cs |
- JSON.parse(string): 문자열을 JSON객체로 변환
- JSON.stringify(obj): JSON객체를 문자열로 변환
let obj = JSON.parse(res);
alert(obj+", typeof(obj): " + typeof(obj));
