봉봉의 개인 블로그

2017-06-28-T 본문

학원에서 배운것들/TEA - T

2017-06-28-T

봉봉이네 2017. 6. 28. 12:19

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
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
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
<script src="<%=request.getContextPath()%>/js/jquery-3.2.1.js"></script>
<script type="text/javascript">
    //ready() document를 읽어 사용할 준비가 되었슴.
    $(document).ready(function(){
        //선택자(↓↓) 부분에 스페이스바를 적게되면 하위라는 소리이다.
        $('#callAjax').click(function(){
            var request = $.ajax({
                url : "/TakTak/call.jsp", //호출 경로
                method : "POST",    //전송 방식
                //data : { 'calltest' : 'call ajax'},//전송해줄값
                dataType : "json" //결과값 타입
            });
            //ajax 실행 완료
            request.done(function(msg) {
                //////////////////////////////
                /////////////텍스트결과값/////////
                //////////////////////////////    
                //.replace() << 값 치환
                //msg = msg.trim(); 공백제거
/*                 if(msg == '0'){
                    console.log('데이터가 존재하지 않습니다.');
                }else{
                    console.log('성공', msg);
                    console.log('성공', msg.a);
                    console.log('성공', msg["a"]);
                } */
                //////////////////////////////
                /////////////json 결과값////////
                //////////////////////////////
                console.log(typeof msg);
                console.log(msg);
                if(typeof msg == 'object'){
                    for(var i=0 ; i<msg.length ; i++){
                        var data = msg[i];
                        console.log(data);
                    }
                }
            });
            //ajax 실행 실패
            request.fail(function(jqXHR, textStatus) {
                console.log('실패');
            });
        });
    });
</script>
</head>
<body>
<button type="button" id="callAjax"> 호출 </button>
</body>
</html>
cs

위와 같이 적어줍니다.  설명을 하자면 먼저 jquery 사이트에 들어가줍니다.

jquery 사이트에서 Download 를 들어가 준다음 Download the uncompressed.development jQuery 3.2.1 slim build 를 눌러서 다운로드 받아줍니다.

그후 다운 받은 파일 자체를 

이런식으로 만들어진폴더 js 파일 안에 넣어줍니다.

(*또는 이렇게 하여도댐)

여기에 찾아와서 Google CDN에 들어가서

위에 1.x 버전등을 복사해서 스크립트 부분에 추가해줘도 된다.

이제 코드에 대해서 설명을 하자면 9번줄 라인에서는 스크립트 소스를 연결해주어야 하기떄문에 아까 파일을 넣은 폴더경로를 적어주게 되면 된다 

그후 10~53번째 줄까지 jquery 를 활용하면되는것이다.

먼저 

jquery 사이트에서 api Documentation 을눌러 위와 같은 화면으로 넘어옵니다 그후 내리다보면

jquery.ajax()부분을 눌러서 들어가줍니다.

그후 쭉 내리다 보면

위사진과 같은 코드가 나오게 됩니다 그러면 이 코드를 복사해서 붙여넣어줍니다.

하지만 코드에서는 위사진과 같이 나와있지 않은이유는 저것만 사용하게 되면 에러가 나게 된다. 그렇기 때문에 이것을 다른 이벤트로 감싸주어야 하기때문에 button을 사용해서 감싸주었다.

다시 설명을 하자면 12번째 줄의 코드에서는 document 즉 페이지를 다읽고 이걸 준비해달라는 소리이고 그안에 id 가 callAjax 인걸 클릭하였을때 안에 ajax가 사용되게끔 만드는 것이다 16번째 줄같은경우는 호출 경로이고 그 호출된경로에 있는게 호출이 되는것이다 (요청이라고 생각하면편함) 

그리고 18번 줄과같이 data를 지정하여 넘겨줄수도 있게 된다.지금은 data type 자체를 json 방식으로 해서 결과값타입을 맞춰 주고 만약 ajax가 성공하게 되면 22번줄에 있는 함수가 실행되고 그렇지 않으면 48번줄에 있는 함수가 실행되게 된다.

23~34번쨰 줄까지는 19번쨰 줄의 datatype 이 만약 text 방식일때 의 결과값을 받아왓던문이고

지금은 json 방식이므로 35번째줄에서 46번째줄까지가 실행되게 된다. 값을 받아와서 for 문을 통해서 콘솔창에 뿌려주게 되는것이다. 여기서 필요한것은 데이터를 가지고 와야하는데 data 가 따로 지정되어있지 않기 때문에 16번쨰 줄에서 요청한 페이지에서 데이터가 넘어오게 되는것이다. 필요한 /TakTak/call.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
<%@page import="kr.or.ksmart.TestDomain"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@page import="com.google.gson.Gson" %>
<%    
    TestDomain td = null;
    List<TestDomain> strList = new ArrayList<TestDomain>();
    td = new TestDomain();
    td.setA("1");
    td.setB("2");
    td.setC("3");
    strList.add(td);
    strList.add(td);
    strList.add(td);
    Gson gson = new Gson();
    out.println(gson.toJson(strList));
    //String callTest = request.getParameter("calltest");
/*     if(callTest != null && !"".equals(callTest.trim())){
        //파라미터 값에 따라서 처리 - db조회나 로직결과값
        out.println(callTest);
    }else{
        //값이 없거나 혹은 에러처리 완료 이후 보여줄 값
        //에러 코드는 코드 체계를 갖추어서 진행
        out.println("0");
    } */
%>
cs

/TakTak/call.jsp 은 위와 같이 적혀져있다 먼저 방식을 json 방식으로 맞춰 줘야하기 때문에

그방식을 맞춰주는 라이브러리인 Gson 을 이용해서 값을 만들고 json 방식으로 데이터를 보내준것이다.

먼저 설명을 하자면 먼저 MVN에서 Gson 라이브러리를 가지고와서 WEB-INF/lib 안에 넣어줍니다.

그런다음 6번줄과같이 적어주게 되면 gson 라이브러리를 사용할수 있게 되는것이다.

그리하여서 먼저 list 를 만들어줍니다 그후 그안에 ArrayList 의 배열을 만들고 그 제너럴 타입을 TestDomain 이라는 DTO 로 지정해줍니다.

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
package kr.or.ksmart;
 
public class TestDomain {
    private String a;
    private String b;
    private String c;
    public String getA() {
        return a;
    }
    public void setA(String a) {
        this.a = a;
    }
    public String getB() {
        return b;
    }
    public void setB(String b) {
        this.b = b;
    }
    public String getC() {
        return c;
    }
    public void setC(String c) {
        this.c = c;
    }
    @Override
    public String toString() {
        return "TestDomain [a=" + a + ", b=" + b + ", c=" + c + "]";
    }
    
}
 
cs

TestDomain 안은 이렇게 적혀있다.

이타입의 배열을 만들어주고 10번 문을 통해서 TestDomain 타입의 객체를 만들고 

그안에 11~13번 까지처럼 값을 셋해줍니다 그후 14 번줄과 같이 TestDomain 타입의 배열인 strList안에 add 시켜줍니다 객체의 주소값을 그후 gson 의 객체를 만들고 그후 18번문을통해서 gson 을통해 tojson 으로 strList 의객체를 화면에 뿌려주게 되면 이 페이지를 요청햇던 Tak.jsp 에서 ajax는 화면에 뿌려진 strList를 json 방식으로 데이터를 받아오게 되는것이다. 이제 Tak.jsp 를 실행한다음

위 사진과 같이 호출을 누르게 되면 오른쪽에 콘솔에 저런식으로 나오게 되는것이다 call.jsp 에서 넘겨왔을때 json 방식인데 이것은 object 타입으로 넘어오게 되므로 Tak.jsp 파일에서 40번 if 문에 걸려 for 문이 실행되고 배열의 수만큼 화면에 값을 뿌려지게 되는것이다.(*여기서 msg는 넘어온 객체 또는 데이터 뭉치(?)를 이야기한다. 여기서는 배열이 넘어왔으므로 object를 3개 담은 배열이 넘어온것이다.)


TIP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<%@page import="org.jsoup.Jsoup"%>
<%@page import="org.jsoup.nodes.Document"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%
    /*    
    JSOUP - html 파싱 라이브러리
    사이트 - http://jsoup.org/
    -----------------------------------------------------
    ajax 실행시
    현 어플리케이션의 위치에서 벗어나 다른 어플리케이션에 접근시
    크로스 브라우징으로 막혀 차단된다.
    이에 따른 대처 방법중 하나로 jsoup을 사용하여 html 파싱을한다.
    *(라이브러리 추가 후 아래처럼 실행시 네이버 처럼 화면뜸)
     */
    Document doc = Jsoup.connect("http://naver.com/").get();
    out.print(doc.html());
%>
cs

이것은 gson 과 비슷하게 jsoup 이라는것도 존재한다

위 처럼 하게되면 

이런식으로 외부에서 자신이 원하는 타입으로 데이터를 받아오는것이다.

지금은 naver.com 을 html 로 받아와서 화면에 뿌려줫기 때문에 바로 네이버 페이지가 열리게 되는것이다.

저작자표시

'학원에서 배운것들 > TEA - T' 카테고리의 다른 글

2017-07-12-Entity Relationship Diagram  (0) 2017.07.12
2017-07-11-T(게시판 editor)이미지 업로드 가능  (0) 2017.07.11
2017-07-10-T(mock up)  (0) 2017.07.10
2017-06-30-T  (0) 2017.06.30
2017-06-29-T  (0) 2017.06.29
공유하기 링크
'학원에서 배운것들/TEA - T' Related Articles more
Comments