web

[AJAX] 텍스트 입력해서 데이터 출력 / 이미지 변경

소댓 2023. 5. 7. 17:39

* AJAX(Asynchronous Javascript And XML)
비동기 방식의 자바 스크립트와 XML
: 자바스크립트를 통해서 서버에 데이터를 요청하는 것
: 리로드를 하지 않고 데이터를 불러 오는 방식

 

 

- [ajax01] : ajax와 jsp 비교

  > simple1.txt / simple2.jsp / simple2.txt / simple2.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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax01.jsp</title>
<script type="text/javascript">
    // 비동기화 방식으로 통신
    
    // 통신을 담당하는 객체 : XMLHttpRequest 객체
    
    var xhr = null;
    
    function getXMLHttpRequest(){
        // MS
        if(window.ActiveObject){
        try{
            return new ActiveObject("MsMXL2.XMLHttp");
        }catch (e){
            try{
                return new ActiveObject("Microsoft.XMLHttp");                
            }catch (e){
                null;
                }
            }
        }else if(window.XMLHttpRequest){
            // 그 외 브라우저라면
            return new XMLHttpRequest();
        }else {
            return null;
        }
    } // getXMLHttpRequest() end
    
    function load(url){
        // 1. 통신객체 (XMLHttpRequest) 객체 얻어오기
        xhr = getXMLHttpRequest();
        console.log(url);
        
        // 2. callback 함수
        // 대기하고 있다가 응답이 오면 이 함수를 실행
        xhr.onreadystatechange=viewMessage;
        
        // 3. open (통신방식, 주소, 비동기 통신 여부)
        xhr.open("GET", url, true);
        //GET 방식 : url에 접근하는 비동기 방식으로 통신해 
        
        xhr.send(null);
        // POST 방식일 때 value 값을 준다.
        
        console.dir(xhr);
        
    }
 
    function viewMessage(){
        // console.log("viewMessage() 호출중");
        
        // 통신이 완료되고 정상페이지라면 
        if(xhr.readyState == 4) { // 통신이 완료
            if(xhr.status == 200) { // 정상 페이지
                // alert(xhr.responseText);
                var div1  = document.getElementById("div1");
                
                // 서버로부터 수신한 내용을 출력
                div1.innerText=xhr.responseText;
                
            }
        }
    }
    
    
</script>
</head>
<body>
 
    <!-- 
        AJAX(Asynchronous Javascript And XML)
        비동기 방식의 자바 스크립트와 XML
        : 자바스크립트를 통해서 서버에 데이터를 요청하는 것
        : 리로드를 하지 않고 데이터를 불러 오는 방식
    
     -->
 
    <input type="button" value="simple1.txt" onclick="load('simple1.txt');" />
    <input type="button" value="simple1.jsp" onclick="load('simple1.jsp');" />
    <input type="button" value="simple2.txt" onclick="load('simple2.txt');" />
    <input type="button" value="simple2.jsp" onclick="load('simple2.jsp');" />
    
    <div id="div1"></div>
        <!-- 서버에서 가져온 글자를 출력 -->
    
    
    
</body>
</html>
 cs

 

 

> simple1.txt

Hello Ajax World~!

 

> simple2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>simple1.jsp</title>
</head>
<body>
	Hello Ajax World!!!!!!!!!!!!
</body>
</html>

 

> simple2.txt

헬로우 에이젝스 월드

 

 

> simple2.jsp

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>simple2.jsp</title>
</head>
<body>
	헬로우 에이젝스 월드
</body>
</html>

 

 

*  ID 입력하면 해당 데이터 가져와서 출력

 

- [ajax02.jsp] : id 입력하면 해당 데이터의 이름 가져와서 출력

 

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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax02.jsp</title>
<script type="text/javascript" src="../js/httpRequest.js" ></script>
<script type="text/javascript">
 
    function hellToServer(){
        // console.log("test");
        
        var txt = document.getElementById("txt").value;
        
        var params = "txt="+txt; // txt=aaa
        
        // sendRequest(url, 전달파라미터, 콜백함수명, 통신방식)
        sendRequest("hello.jsp", params, callback, "GET");
        
        // 통신 객체가 hello.jsp?txt=aaa 요청을 한다.
        
    }
    function callback(){
        // console.log("콜백함수 호출중");
        if(xhr.readyState==4){ // 통신이 완료되면
            if(xhr.status == 200){ // 정상 페이지라면
                // console.dir(xhr); // 통신 객체 출력
                document.getElementById("div1").innerHTML=xhr.responseText; // div1에 xhr의 responseText를..
            }
        }
    }
</script>
</head>
<body>
<!-- 입력된 파일명을 탐색해서 내용을 화면에 출력
    hello.jsp?txt=aaa
    
     -->
    <!-- ajax02.jsp?txt=aaa -->
 
    <input type="text" name="txt" id="txt" />
    <input type="button" value="입력" onclick="hellToServer();"/>
 
 
    <!-- id가 aaa인 사용자의 이름을 아래 div에 출력 -->
    <div id="div1"></div>
</body>
</html>
 cs

 

 

-  [hello.jsp] : 검색창에 입력한 id의 파라미터값 가져오기
>> java-dao-[MemberDAO.java] 수정

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<%@page import="vo.MemberVO"%>
<%@page import="dao.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
    <%
    // ajax02의 txt(name)에 입력한 값으로 아이디를 검색
    String txt = request.getParameter("txt");
    
    if(txt != null){
        MemberDAO dao = new MemberDAO();
        // MemberDAO에 getData 추가
        MemberVO vo = dao.getData(txt);
        
        out.println("<h2> " + vo.getName() + " </h2>");
    }
    
    
    %>
 
 cs

 

 

> MemberDAO

 

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
package dao;
 
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
 
import vo.MemberVO;
 
public class MemberDAO {
 
// 기본 생성자 1~3
    String driver = "oracle.jdbc.driver.OracleDriver";
    String url = "jdbc:oracle:thin:@localhost:1521:orcl";
    String user = "scott";
    String password = "tiger";
    Connection conn ;
    PreparedStatement pstmt ;
    ResultSet rs ; 
    StringBuffer sb = new StringBuffer();
    
    public MemberDAO() {
        try {
            Class.forName(driver);
            conn = DriverManager.getConnection(url, user, password);
            System.out.println("conn : "+conn);
        } catch (ClassNotFoundException e) {
            System.out.println("드라이버 로딩 실패");
        } catch (SQLException e) {
            System.out.println("DB 연결 실패");
        }
        
    } // 기본생성자 end
    
    // id와 pw 입력하면 vo 객체를 리턴하는 메서드
    public MemberVO getOne(String id, String pwd) {
        // 4. SQL문장
        sb.append("SELECT * FROM member WHERE id = ? and pw = ?");
        
        MemberVO vo = null;    // 선언은 밖에 해두기
        // 5. 문장객체
        try {
            pstmt = conn.prepareStatement(sb.toString());
            pstmt.setString(1,  id); // 물음표 채우기
            pstmt.setString(2,  pwd);
            // 6. 실행 (SELECT ==> ResultSet
            rs = pstmt.executeQuery();
            
            // 7. 레코드별 로직 처리
            while(rs.next()) {
                int no = rs.getInt("no");
                String name = rs.getString("name");
                String gender = rs.getString("gender");
                String motive = rs.getString("motive");
                vo = new MemberVO(no, id, pwd, name, gender, motive);
            }            
        } catch (SQLException e) {
            e.printStackTrace();
        }
        
        return vo;
    } // getOne() end
    
    //추가(ajax)
    public MemberVO getData(String id) {
        // 4. SQL문장
        sb.setLength(0);
        sb.append("SELECT * FROM member WHERE id = ? ");
        
        MemberVO vo = null;    // 선언은 밖에 해두기
        // 5. 문장객체
        try {
            pstmt = conn.prepareStatement(sb.toString());
            pstmt.setString(1,  id); // 물음표 채우기
            // 6. 실행 (SELECT ==> ResultSet
            rs = pstmt.executeQuery();
            
            // 7. 레코드별 로직 처리
            while(rs.next()) {
                int no = rs.getInt("no");
                String pwd = rs.getString("pw");
                String name = rs.getString("name");
                String gender = rs.getString("gender");
                String motive = rs.getString("motive");
                vo = new MemberVO(no, id, pwd, name, gender, motive);
            }            
        } catch (SQLException e) {
            e.printStackTrace();
        }
        
        return vo;
    } // getData() end
    
    
    // 전체조회
    public ArrayList<MemberVO> selectAll() {
        ArrayList<MemberVO> list = new ArrayList<MemberVO>();
        // 4. SQL문장
        sb.setLength(0); // 길이를 0으로(기존의 값 지우기)
        sb.append("SELECT * FROM member ");
//        System.out.println("sb : " + sb);
        
        // 5. 문장객체
        try {
            pstmt = conn.prepareStatement(sb.toString());
            // 6. 실행 (SELECT ==> ResultSet
            rs = pstmt.executeQuery();
            
            // 7. 레코드별 로직 처리
            while(rs.next()) {
                int no = rs.getInt("no");
                String id = rs.getString("id");
                String pwd = rs.getString("pw");
                String name = rs.getString("name");
                String gender = rs.getString("gender");
                String motive = rs.getString("motive");
                MemberVO vo = new MemberVO(no, id, pwd, name, gender, motive);
                list.add(vo);
            }
            
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return list;
    } //selectAll() end
    
    
    public void addOne(MemberVO vo) {
        // 4. SQL 문장
        sb.setLength(0);
        sb.append("INSERT INTO member ");
        sb.append("VALUES(mem_no_seq.nextval, ?, ?, ?, ?, ?)");
        
        try {
            // 5. 문장 객체
            pstmt = conn.prepareStatement(sb.toString());
            
            // pstmt.setInt(1, vo.getNo());
            pstmt.setString(1, vo.getId());
            pstmt.setString(2, vo.getPw());
            pstmt.setString(3, vo.getName());
            pstmt.setString(4, vo.getGender());
            pstmt.setString(5, vo.getMotive());
            // 6. 실행 (SELECT ==> ResultSet
            pstmt.executeUpdate();
            
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }    
    }// addOne() end
 
    
    public void updateOne(MemberVO vo) {
        // 4. SQL 문장
        sb.setLength(0);
        sb.append("UPDATE member ");
        sb.append("SET motive = ? ");
        sb.append("WHERE id = ? ");
 
        try {
            // 5. 문장 객체
            pstmt = conn.prepareStatement(sb.toString());
 
            pstmt.setString(1, vo.getMotive());
            pstmt.setString(2, vo.getId());
            
            // 6. 실행 (SELECT ==> ResultSet
            pstmt.executeUpdate();
            
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        
    } // updateOne end
    
    
    public void deleteOne(String id) {
        // 4. 문장 객체
        sb.setLength(0);
        sb.append("DELETE FROM member ");
        sb.append("WHERE id = ? ");
        
        try {
            // 5. 문장 객체
            pstmt = conn.prepareStatement(sb.toString());
            pstmt.setString(1, id);
            // 6. 실행 (SELECT ==> ResultSet
            pstmt.executeUpdate();
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
 
    } // deleteOne end
    
    
    public void close() {
        // 자원반납
            try {
                if(rs!= null) rs.close();
                if(pstmt!= null) pstmt.close();
                if(conn!= null) conn.close();
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
    } // close end
    
} // class end
 
 cs

 

 

=> httpRequest 파일을 webapp-js 폴더에 복사

 

* 상품 이름 입력하면 제품 이미지 변경


- [ajax03.jsp] : 상품 이름으로 검색해서 productList.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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax03.jsp</title>
<script type="text/javascript" src="../js/httpRequest.js"></script>
<script type="text/javascript">
    
    function prt(){
        console.log("prt() 호출중");
        
        // search.jsp?txt=김말이 ==> 김말이 이미지 경로를 출력
    
        var txt = document.getElementById("txt").value;
        
        var params = "txt="+txt;
        
        sendRequest("search.jsp", params, callback, "GET");
        
                
    }
    
    function callback(){
        console.log("콜백함수 호출");
        if(xhr.readyState==4 && xhr.status == 200){
                console.dir(xhr);
                // document.getElementById("img").src=xhr.responseText;
                var img = document.getElementById("img");
                img.src = xhr.responseText;
            }
        }
        
    
    
</script>
</head>
<body>
 
    <input type="text" name="txt" id="txt" />
    <input type="submit" value="출력" onclick="prt();" />
 
    <div id="myconsole">
        <img src="../images/before.PNG" alt="뽀로로" id="img" />
    </div>
 
</body>
</html>
 cs

 

 

 


> [search.jsp] : 검색창에 입력한 값을 parameter로 가져오기

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<%@page import="vo.ProductVO"%>
<%@page import="dao.ProductDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<%
    // search.jsp?txt=김말이
    // 화면에 김말이 이미지 경로를 출력
    // https://img.cjthemarket.com/images/file/product/383/20211019103335935.jpg
 
    
    String txt = request.getParameter("txt");
 
    if(txt != null){
        ProductDAO dao = new ProductDAO();
        
        ProductVO vo = dao.getData(txt);
        if(vo!=null)
        out.println(vo.getImgfile());        
    }
 
%>
 
 cs

'web' 카테고리의 다른 글

[BootStrap] 부트스트랩 활용  (0) 2023.05.07
[AJAX] Ajax와 jquery (이미지 변경/로그인&회원가입/데이터 가져오기)  (0) 2023.05.07
[jquery] jquery / css 응용  (0) 2023.05.07
[jsp] 게시판 만들기 (게시물 작성/수정/게시물 리스트)  (0) 2023.04.30
[jsp] 글 작성 게시물 만들기  (0) 2023.04.30

'web'의 다른글

  • 현재글[AJAX] 텍스트 입력해서 데이터 출력 / 이미지 변경

관련글

댓글

티스토리툴바