ajax( jQuery )

여기서는 순수 ajax의 동작원리와 jQuery를 이용하여 ajax 를 사용해 보자.

# 순수 ajax

AJAX : Asynchronous Javascript And XML 의 약어

기존에 있던 기술( HTML, CSSm , JacaScript, DOM, XML, XMLHttpRequest )들을 현명하게 사용하는 방법론적 기술

AJAX의 필요성

기존의 웹브라우저는 서버로부터 페이지단위로만 받을수 있었다.

때문에 간단한 상호작용을 하려고 해도 페이지 전체를 로딩해야했음 => 대역폭 낭비를 초래

하지만 AJAX를 사용하면 XML파일 조각 단위로 데이터를 받아올 수 있기 때문에 전체 페이지를 다시 로드하지 않아도

페이지 일부를 동적으로 갱신할 수 있다.

즉 요약하자면, 페이지 재 로딩없이 현재화면에서 일부분만 동적으로 갱신가능!!!

AJAX의 동작원리

1. 유저가 이벤트 발생시키면 자바스크립트 함수가 호출됨

2. XMLHttpRequest 객체의 인스턴스가 생긴다.

3. XMLHttpRequest 객체는 현재 HTML페이지의 상태를 가진 XML메시지를 구성하여 웹서버로 보낸다.

4. 서버내에서 내부처리한뒤에 응답 XML메시지를 보내어 XMLHttpRequest객체가 수신한다.

5,6 웹 서버에서 반환된 XML메시지를 파싱하여 DOM객체를 업데이트한다.

# jQuery의 ajax

위는 순수한 ajax를 이요한것이고 아래는 jQuery에서 지원하는 ajax를 통한 데이터 가져오는 방법이다!!

jQuery의 ajax의 장점은

1. 브라우저 상관없이 코딩할 수 있다.

2. 코드의 길이가 짧아진다.

# jquery ajax로 json객체받아오는방법 3가지

b.jsp( 형식이 json형식이어야 한다 )
==============================
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
{"member":{"id":"a","pw":"b"}}

<% String a = "abc"; %>

만약 jsp출력부분인 
<%=request.getParameter("a")%>     
가 b.jsp에 있다면 json형식이 아니라면 오류남!

1. 기본요청( string을 받아옴 )
 $.ajax({
           url : 'b.jsp',
           ,success : function(data) {      // data는 string
                      //alert(data);
                       $('#tObj3').html(data);
                   }
         });
        
         b.jsp는 jsp파일이므로 컨테이너가 컴파일에 의해 jsp구문들을 전부 html태그로 변환한다
         따라서 그 변환된 html 이 string형식으로 data에 담겨져 온다
          ( html의 메모장 처럼 )
         이는 string으로 받아오기때문에 json객체로 변환이 필요할 수 도있다.
          ( 이때는 html태그들이 없어야 한다 )
               $.parseJSON("문자열")     // String -> Object형변환하기
          
        $.ajax({
                url:'b.jsp',
                success:function(data){
                        var obj=$.parseJSON(data);
                        alert(obj.member.id+","+obj.member.pw);
                }
        });

 
2. 기본요청이아닌 json형식으로 요청
    ( 위와같은 원리로 요청된 b.jsp는 html태그가 없어야한다. jsp문법들중  변환되므로 상관X )
$.ajax({
     url:'t2.jsp',
     ,dataType:'json',
     ,success:function(data){
               alert(data.member.id+","+data.member.pw);
          }
     });


3. $.getJSON( url , [보낼data], [ function(받을data){} ]);

        $.getJSON('b.jsp?id=abc', function(data) {     // data는 json객체
                           alert(data.member.id);
                     });

  혹은 요청페이지에 파라미터를 보기좋게 전송하려면( getJSON두번째파라미터에 전달할 파리미터 기입 )
   $.getJSON(
        'b.jsp?id=abc'
        , { 'id' : 'jojo7673', 'pw' : '7673' }
        , function(data) {     // data는 json객체
                 alert(data.member.id);
    });

# 응용

[ex1] bbb 누르면 ccc가 b.jsp에있는값인 ddd로 변하도록 jQuery의 ajax를 이용하여 만드시오

a.jsp

==========

<%@ 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>
<style type="text/css">
td {
     border: 2px solid green;
}
</style>
<script src="jquery-1.11.1.js"></script>  // 동일위치에 jquery.js가 필요함!! jquery를 쓰기위해
<script type="text/javascript">
     $(document).ready(function() {
     });
</script>
</head>
<body>
     <table width=300px height=300px>
          <tr>
               <td colspan="2">aaa</td>
          </tr>
          <tr>
               <td><a href="#">bbb</a></td>
               <td>ccc</td>
          </tr>
     </table>
</body>
</html>

b.jsp

=========

ddd

[an]

<%@ 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>
<style type="text/css">
td {
       border: 2px solid green;
}
</style>
<script
       src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
       // 위처럼 파일을 다운안받고 바로 인터넷으로 땡겨서 사용가능
<script type="text/javascript">
       $(document).ready(function() {
              $('#aObj').click(function() {
                     $.ajax( // 다른곳에있는 데이터를 가져오기위해
                     {
                           url : 'b.jsp',
                           success : function(data) {
                                  //alert(data);
                                  $('#tObj3').html(data);
                           }
                     });
              });
       });
</script>
</head>
<body>
       <table width=300px height=300px>
              <tr>
                     <td colspan="2">aaa</td>
              </tr>
              <tr>
                     <td><a href="#" id="aObj">bbb</a></td>
                     <td id="tObj3">ccc</td>
              </tr>
       </table>
</body>
</html>

위 예제는 가장 기초적인 jQuery에서 ajax호출법이다.

이 예제를 중점으로 다양한 조작이 가능하다.

먼저 여기서 ajax로 가져온 data는 String형식이다.

우리는 String으로 가져온 데이터를 바로 사용하여도 되지만 객체형식으로 다뤄야 하는 상황도 있다.

그래서 jQuery에서는 $.parseJSON("문자열") 이라는 기능을 제공한다.

이는 json형식의 문자열을 json객체로 변환 시켜주는 기능을 가지고 있다.

# $.parseJSON("문자열")

  var s='{"member":{"id":"a","pw":"b"}}';     // s의 자료형은 string임
                                              // ' ' 이없으면 Object임
 
     // string -> Object로 자료형변환
     // $.parseJSON("문자열"); 의 리턴형은 Object
     // 이제 객체타입임


     document.write(s.member.id);      // 위 s가 string이라서 다음은 오류남
     do

[ex] 아래 기본소스와 $.parseJSON("문자열") 을 이용하여 text에 값 넣기 ( ajax를 통해 데이터가져오기 )

document.getElementById('b').onclick=function(){

alert(document.getElementById('t').value);

}

==> jquery로 바꾼거

$(document).ready(function(){
     $(':button').click(function() {               // :button은 폼선택자
          alert($($(':text')[0]).val());
     });
});

[an] $.parseJSON("문자열") 을활용하여 text에 값넣기

a.jsp

=============

<%@ 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>

<title>Insert title here</title>

td {

border: 2px solid green;

}

</style>

<script

src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

$(document).ready(function() {

$('#aObj').click(function() {

$.ajax({

url : 'b.jsp',

success : function(data) {

alert(typeof data); // string

var obj = $.parseJSON(data);

alert(typeof obj); // object

var i = 0;

$.each(obj.member, function(k, v) {

$($(':text')[i++]).val(v);

});

}

});

</script>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

b.jsp

==========

{ "member" : { "id" : "aa1", "pw" : "bb1", "addr" : "cc1", "tel" :
"dd1" }, "memberList" : [ { "id" : "aa2", "pw" : "bb2", "addr" : "cc2",
"tel" : "dd2" }, { "id" : "aa3", "pw" : "bb3", "addr" : "cc3", "tel" :
"dd3" } ] }

$.val() 은 value값을 반환

$.val("~")은 value값 세팅

alert(typeof data) 해볼것... 그리고 alert(typeof obj) 도 해볼것

(obj는 $.parseJSON(data);의 반환형이 object인데 var obj에 담아서.....)

위 예제들은 ajax통신으로 string값을 받아서 jQuery의 $.parseJSON을 통해 json객체로 변환하였다.

이제 아래 예제는 처음부터 ajax통신할때 json객체로 받아오는 방법을 알아보자.

# $.getJSON()

즉, 이 기능을 통해 바로 json객체를 전달 받는다.

[ex] $.getJSON( url , [보낼data], [ function(받을data){} ]);

url : 서버url... 해당url이 json형태이어야함( JSON페이지이어야만함 )

[data] : json형식의 서버로 보낼 데이터

요청이 성공된후 호출될함수의매개변수로 data를 받아옴

1) url로 값넘기기 ( 매개변수 두개 )

a.jsp

======

<%@ 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>
<style type="text/css">
td {
       border: 2px solid green;
}
</style>
<script
       src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
       $(document).ready(function() {
              $('#aObj').click(function() {
                     $.getJSON('b.jsp?id=abc', function(data) {
                           alert(data.member.id);
                     });
              });
       });
</script>
</head>
<body>
       <table width=300px height=300px>
              <tr>
                     <td colspan="2">aaa</td>
              </tr>
              <tr>
                     <td><a href="#" id="aObj">bbb</a></td>
                     <td><input type="text"> <input type="text"> <input
                           type="text"> <input type="text"></td>
              </tr>
       </table>
</body>
</html>

b.jsp ( json 형태여야함 )

======

<%@ page language="java" contentType="text/html; charset=EUC-KR"

pageEncoding="EUC-KR"%>

{"member":{"id":"<%=request.getParameter("id")%>"}}

<%= %> 앞뒤 " " 필수임!!!!

2) 매개변수3개로 값넘기기 ( 아무래도 값(파라미터)넘기기가 이게 더 편리할려나? )

a.jsp

==========

<%@ 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>
<style type="text/css">
td {
       border: 2px solid green;
}
</style>
<script
       src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
       $(document).ready(function() {
              $('#aObj').click(function() {
                     $.getJSON('b.jsp', {
                           'id' : 'jojo7673',
                           'pw' : '7673'
                     }, function(data) {
                           alert(data);
                           alert(data.member.id);
                     })
              });
       });
</script>
</head>
<body>
       <table width=300px height=300px>
              <tr>
                     <td colspan="2">aaa</td>
              </tr>
              <tr>
                     <td><a href="#" id="aObj">bbb</a></td>
                     <td><input type="text"> <input type="text"> <input
                           type="text"> <input type="text"></td>
              </tr>
       </table>
</body>
</html>

b.jsp ( json 형태여야함 )( request.getParameter로 받음!! )

===============================================

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
{"member":{"id":"<%=request.getParameter("id")%>", "pw":"<%=request.getParameter("pw")%>" }}

추가적으로 ajax 요청 실패시 처리하는 방법을 알아보자.

[ex] ajax의 error(Function) - 요청이 실패했을시 호출됨

a.jsp

=========

<%@ 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>
<style type="text/css">
td {
       border: 2px solid green;
}
</style>
<script
       src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
       $(document).ready(function() {
              $('#aObj').click(function() {
                     $.ajax({
                           url : 't2.jsp',
                           success : function() {
                                  alert("성공");
                           },
                           error : function(a, b, c) {
                                  alert(a.status + "," + b + "," + c);
                           }
                     });
              });
       });
</script>
</head>
<body>
       <table width=300px height=300px>
              <tr>
                     <td colspan="2">aaa</td>
              </tr>
              <tr>
                     <td><a href="#" id="aObj">bbb</a></td>
                     <td><input type="text"> <input type="text"> <input
                           type="text"> <input type="text"></td>
              </tr>
       </table>
</body>
</html>

b.jsp

=============

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%=request.getParameter("aaa").length()%>          // 널포인트 500번에러뜸

저작자표시 비영리 변경금지

'JSP' 카테고리의 다른 글

(부록) java.lang.reflect (0)	2019.03.28
서블릿에서의 화면 이동 (0)	2019.03.27
JSP 액션태그 ( <jsp:useBean> ) (0)	2019.03.27
JSP 에러 페이지 설정 (0)	2019.03.27
JSP 경로 / 파일관련 (0)	2019.03.09

Dev

ajax( jQuery )

'JSP' 카테고리의 다른 글

티스토리툴바

ajax( jQuery )

'JSP' 카테고리의 다른 글

'JSP' Related Articles

티스토리툴바